Quick Start Guide

This guide will walk you through creating your first EmberBlocks application. By the end, you’ll have a working app that displays data from your database.

Prerequisites

Before you begin, make sure you have:

• An EmberBlocks account (sign up at app.emberblocks.com)
• Access to a PostgreSQL database with at least one table
• Your database connection credentials (host, port, database name, username, password)

Step 1: Create a New App

1. Log in to EmberBlocks and navigate to your dashboard
2. Click the Create App button
3. Enter your app details:
   • Name: Give your app a descriptive name (e.g., “Customer Portal”)
   • Description: Optional description of your app’s purpose
   • Icon: Choose an icon from the icon library
   • Theme Color: Select a primary color for your app
4. Click Create to create your app

Your new app opens in the editor, ready for configuration.

Step 2: Connect Your Database

Before you can display data, you need to connect EmberBlocks to your PostgreSQL database.

1. Navigate to the Data tab in the header
2. Click Connections in the sidebar
3. Click Add Connection
4. Fill in your database credentials:
   • Connection Name: A friendly name (e.g., “Production DB”)
   • Host: Your database host address
   • Port: Usually 5432 for PostgreSQL
   • Database Name: The name of your database
   • Username: Database user with read access
   • Password: Database password
   • SSL Mode: Choose based on your database configuration
5. Click Test Connection to verify the credentials
6. Click Save once the connection test passes

Step 3: Select Tables

With your database connected, select which tables to use in your app.

1. In the Data tab, click Tables in the sidebar
2. You’ll see a list of tables from your connected database
3. Check the tables you want to use in your app
4. For each table, you can:
   • Set a display name
   • Configure field visibility
   • Mark fields as read-only
   • Set default values

Step 4: Create Your First View

Views are the pages of your app. Let’s create a view to display your data.

1. Navigate to the Layout tab
2. In the views sidebar, click + Create View
3. Enter a name for your view (e.g., “Customers”)
4. Choose an icon for the sidebar navigation
5. Click Create

Your new view opens with an empty canvas.

Step 5: Add Components

Now let’s add components to display your data.

Add a List Component

1. In the component palette, find the List component
2. Drag it onto the canvas
3. The settings panel opens on the right
4. Configure the List:
   • Title: Enter a title (e.g., “Customer List”)
   • Table: Select your data table
   • Display Style: Choose table, list, kanban, or cards
   • Fields: Select which columns to display
   • Pagination: Enable if you have many rows

Add a Text Component

1. Drag a Text component above your List
2. Configure it:
   • Title: Enter a heading (e.g., “Welcome”)
   • Content: Add descriptive text with markdown support

Add a Button Component

1. Drag a Button component to the canvas
2. Configure it:
   • Label: Enter button text (e.g., “Refresh”)
   • Variant: Choose primary, secondary, outline, or ghost
   • Action: Select an action to trigger on click

Step 6: Preview Your App

Before publishing, preview your app to see how it looks to users.

1. Click the Preview button in the header
2. Interact with your app as a user would
3. Test all components and actions
4. Click Exit Preview to return to editing

Step 7: Invite Users

Add team members to your app:

1. Navigate to the Users tab
2. Click Add Member
3. Enter their email address
4. Select a role:
   • Admin: Full access
   • Editor: Can edit the app
   • User: View-only access
5. Click Invite

They’ll receive an email invitation to join your app.

Step 8: Publish Your App

When you’re ready to make your app available:

1. Click the Publish button in the header
2. Add optional publish notes describing your changes
3. Click Confirm

Your app is now live! Users with appropriate access can view the published version while you continue editing the draft.

Next Steps

Congratulations! You’ve built your first EmberBlocks app. Here’s where to go next:

Learn More About Components

• List Component - Advanced table, kanban, and card configurations
• Text Component - Markdown and dynamic content
• Button Component - Actions and confirmation dialogs
• Image Component - Display images dynamically

Master Formulas

Learn to create dynamic, data-driven applications with the Formula System.

Configure Actions

Set up Actions to enable CRUD operations, navigation, and more.

Manage Users

Learn about User Management and custom roles.

Tips for Success

• Start simple - Build a basic version first, then add complexity
• Use preview mode - Test your app frequently during development
• Name things clearly - Use descriptive names for views, components, and actions
• Leverage formulas - Dynamic values make your app more powerful
• Iterate - Publishing creates versions, so you can always roll back

---

Need help? Check out the full documentation or reach out to our support team.