Quickstart

What You'll Build

By the end of this guide you will have a working Web App that:

• Fetches and displays records from a UnifyApps Storage object in a Data Table.

• Lets users add new records through a Form with a text field.

• Responds to form submission with a success snackbar — your first event-action wire.

• Is accessible in a browser via a published URL.

No prior builder experience is required.

Prerequisites

• Access to a UnifyApps workspace where you can create applications.

• A base domain configured for your workspace. Without one, the New Application button is disabled. See Create an Application.

• A Storage object with a text field named name and a few records, for example a Contacts object. Create it before you start if your workspace doesn't have one.

Warning: The app type is fixed after creation. This guide creates a Web App. If you need a Mobile App or Copilot Chat, start a new application — you cannot convert after the interface record is created.

Step 1 — Create the App

1. Open the Applications Manager: From the UnifyApps home screen, navigate to Applications in the left navigation. The Applications Manager lists all apps in your workspace.

2. Click New Application: Click + New Application in the top-right corner. If AI app building is enabled for your workspace, the AI prompt screen (Prompt. Build. Ship) opens first. Under Or start blank, click Create Manually. The create form opens.

3. Choose Web App: Under Application Type, select Web App.

4. Name the app and set a sub-domain: Enter a Name (for example, My First App). The Sub-domain field fills in automatically. You can edit it, using lowercase letters, numbers and hyphens only. The sub-domain becomes part of your app's address. If your workspace uses path-based hosting, the field is labelled Path instead.

5. Check the base variant and workspace: Leave Base Variant set to Desktop. This is the device your app is built for first. Under Workspace, pick the workspace the app belongs to. Tags and About this application are optional.

6. Create the app and its first page: Click Create Application. In Choose a Template, select Blank Page. In Page Setup, keep the page name and slug. Under Privacy Settings, choose Public (Pages accessible to everyone) so anyone with the link can open the page after you publish. Keep Private (Pages accessible after user login) if users must sign in first. Click Confirm. The builder opens with a single page.

Tip: You're in the builder. The canvas is empty. The Hierarchy panel lists the page's Header, Body and Footer, with nothing inside Body yet. The top bar shows your app name and Not Published status.

Step 2 — Add a Table

1. Open the Hierarchy panel: Click the Hierarchy icon in the left rail (or press H). You see the block tree for this page: Header, Body and Footer, with nothing inside Body yet.

2. Click "Add Component": In the Hierarchy panel, click Add Component under the Body block. A component picker popover opens.

3. Search for "Data Table": In the search field of the component picker, type Data Table. The matching component appears under Built-in components.

4. Click the Data Table component to add it: Click Data Table. The component is inserted as a child of the Body block and appears on the canvas with placeholder columns. It is named dataTable1 by default. Close the component picker (or press Escape).

Step 3 — Connect a Data Source

The table needs data. You will create a Fetch data source pointing at a Storage object and then bind it to the table.

1. Open the Data panel: Click Data in the left rail (database icon, or press E). The Data panel shows the app's and the page's resources in one searchable tree.

2. Add a data source: Click + (Add Resource) next to your page's name and choose Data Source. Search for Storage and select the Storage by UnifyApps app. A data source configuration panel opens.

3. Configure a Fetch operation: Choose the Fetch records action. Set Object to your Contacts object. Leave the other options at their defaults. Click Save & Run. The data source appears in the Data panel with a generated name based on the action and object, such as fetchRecordsContacts.

4. Bind the data source to the table: Click dataTable1 on the canvas to select it. In the Properties panel on the right, open the Content tab. Set Source to Mapped. In Data Source, select fetchRecordsContacts. The builder fills in the records path, {{ fetchRecordsContacts['data']['objects'] }}, generates columns from the object's fields and shows your records.

Note: Columns are auto-generated. When you bind a Storage data source to a Table, UnifyApps creates one column per field in the source object. You can reorder, rename, hide, or remove columns in the Content tab's column editor.

Step 4 — Add a Form

Now add a Form component so users can create new records.

1. Open the Hierarchy panel and click "Add Component" again: In the Hierarchy panel, click Add Component under the Body block. The Form component will be inserted at the same level as the table, below it.

2. Add the Form component: In the component picker, type Form and click the Form result. The Form block, named form1, is added below the table. It comes with sample fields (First Name, Last Name, Date of Birth, Mobile Number, Address Proof, Upload Documents, Additional Comments and a declaration checkbox), Reset and Submit buttons, and a ready-made On Submit interaction that shows a success message.

3. Remove the sample fields you don't need: Most sample fields are required, so the form won't submit while they are empty. Select form1, open its Content tab → Fields, and delete every sample field except First Name with the delete icon on its row. To keep a field instead, turn Is optional on under that field's Validation.

4. Set up a Name field: Edit the First Name field. Set its Label to Name, its Placeholder to Enter a name, and its Field key to name. Its value is available as {{ form1.data.name }} in actions.

Step 5 — Wire Your First Interaction

You will wire the form's On Submit event to show a success notification, then to save the record and refresh the table. This demonstrates the fundamental event-action pattern used throughout UnifyApps Applications.

The event-action pattern

Every interaction in UnifyApps Applications follows the same shape:

1. Select a block on the canvas.

2. Open the Interactions section in the Properties panel.

3. Click + (Add Interaction).

4. Set the Event (e.g., On Submit) and choose the Action.

5. Configure the action's parameters (message text, variable name, navigation target, etc.).

6. Optionally add more interactions for the same event.

Here is how that works for form1:

1. Select form1 and find its Interactions: Click form1 on the canvas or in the Hierarchy. In the Properties panel, open the Content tab and scroll to Interactions, below Fields and Slots. Under Events, the form already has an On Submit interaction that runs Show Snackbar.

2. Open the interaction: Click the On Submit → Show Snackbar entry. The popover shows the Event and Action, plus the snackbar's Message, Description, Type and Duration fields. To add a new interaction instead, click + (Add Interaction) beside Events.

3. Configure the snackbar: Set Message to Thanks!. Set Type to Success (green). Leave Duration (in ms) at its default (3000). Click Save.

The Interactions section for form1 now shows one entry: On Submit → Show Snackbar ("Thanks!", Success). When a user clicks the form's Submit button, this action will fire.

Step 5b — Save the Record and Refresh the Table

The snackbar only confirms the submit. To store the name, add a data source that creates a record, then call it from the form.

1. Add a Create record data source: In the Data panel, click + (Add Resource) next to your page and choose Data Source. Select the Storage by UnifyApps app again, choose the Create record action and set Object to your Contacts object.

2. Map the form value: On the Input tab, the object's fields appear as inputs. In the name input, enter {{ form1.data.name }}. Leave Run Behaviour set to Manual so a record is created only when the form is submitted. Click Save.

3. Call it on submit: Select form1. In Interactions, click + (Add Interaction). Set Event to On Submit and Action to Trigger Data Source. In Select Data Source, pick the Create record data source, keep Method set to Trigger, and click Save.

4. Refresh the table: Add one more On Submit interaction with the Trigger Data Source action, and select fetchRecordsContacts. It re-fetches the table's records so the new name appears.

5. Check the order: Interactions on the same event run top to bottom, one at a time. Drag the entries so they run in this order: create the record, refresh the table, show the snackbar.

Step 6 — Preview

1. Your changes autosave: The builder saves your work automatically as you go — you will see a brief "Saved" indicator in the top bar. There is no Save button and no need to press Cmd/Ctrl + S.

2. Open the preview: In the top bar, click the Preview icon (the play button, labelled Preview Application). The app opens in a new browser tab. The Data Table shows the records from your Storage object, and the Form with its Name field is below it.

3. Test the form: In the preview tab, enter a name and click the form's Submit button. A green snackbar with the message "Thanks!" appears for three seconds, and the new name appears as a row in the table. Your first event-action wire is working.

Warning: Preview reflects your latest autosaved work, not the latest publish. The Preview tab always shows the current state of your working copy, which saves automatically as you work. The published version (what users at the public URL see) is only updated when you explicitly click Publish.

Step 7 — Publish

1. Click "Publish" in the top bar: Return to the builder tab. In the top bar, click the Publish button (to the right of the Preview icon). A publish popover opens showing the app's Application URL with a copy button.

2. Confirm the publish: Review the URL and click Publish. The platform creates version V1 of your app. A success notification appears: "Your app has been published."

3. Access your live app: The top bar now shows V1 Published instead of Not Published. Open the Application URL from the publish popover. If you chose Public in Page Setup, anyone with the link can open the page. If you kept Private, users must sign in and have access to the app.

Note: Publishing is non-destructive to your working copy. After publishing V1, you can continue editing in the builder — adding more pages, changing the table columns, adding more form fields. Those changes live in the working copy and will not go live until you publish again (creating V2).

Where to Go From Here

Congratulations — you have built, previewed, and published your first UnifyApps application. Here are the natural next steps: