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. The only prerequisite is access to a UnifyApps workspace.

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 the + New Application button in the top-right corner. A creation dialog opens.

3. Choose "Create Manually" and select Web App: On the creation dialog, select Create Manually (as opposed to importing or cloning). From the app type selector, choose Web App.

4. Name the app and set a subdomain: Enter a display name (e.g., My First App). The subdomain field populates automatically — you can edit it (lowercase letters, numbers, hyphens only). The subdomain becomes the last segment of the app's public URL.

5. Click "Create Application": A template picker appears. Choose Blank Page to start from an empty canvas. The builder opens with a single untitled page.

Tip: You're in the builder. The canvas is empty — you see only the Body block root in the Hierarchy panel on the left. 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 will see the block tree for this page — currently just the root Body block.

2. Click "Add Component": At the top of the Hierarchy panel, click Add Component. A component picker drawer slides open on the right side of the canvas.

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

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 table1 by default. Click the component picker drawer's close button (or press Escape) to dismiss it.

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 the Data icon in the left rail (lightning bolt icon). The Data panel shows Data Sources, Variables, and Functions tabs. You are on Data Sources by default.

2. Click "Add Resource" and choose Storage: Click + Add Resource at the top of the Data panel. In the integration picker, find and click Storage by UnifyApps. A data source configuration panel opens.

3. Configure a Fetch operation: Set the operation to Fetch records. From the Object dropdown, select any object that exists in your workspace (for example, a Contacts object). Leave all filter/sort options at their defaults for now. Click Save. The data source appears in the panel as dataSource1.

4. Bind the data source to the table: Click table1 on the canvas to select it. In the Properties panel on the right, open the Content tab. Find the Data field and select dataSource1 from the dropdown. The table immediately renders columns mapped to the object's fields and populates with real records from your Storage object.

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, make sure the Body block is selected (click it). Then click Add Component. 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 to the canvas below the table. It contains a default Submit button.

3. Add a text field inside the form: Select form1 in the Hierarchy, then click Add Component. This time add a Text Field (or Input) component. It becomes a child of the form. In its Properties panel, set the Label to Name and the Placeholder to Enter a name. This field's value will be accessible as form1.fields.name (or whatever field key you set) in actions.

Step 5 — Wire Your First Interaction

You will configure the form's On Submit event to show a success notification. This demonstrates the fundamental event-action pattern used throughout UnifyApps Applications.

🔗 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. Choose an event (e.g., On Submit).

4. Click Add Action and choose the action type.

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

6. Optionally add more actions to the same event — they execute in sequence.

1. Select form1 and open the Interactions section: Click form1 on the canvas or in the Hierarchy. In the Properties panel on the right, scroll down to find the Interactions section (it is below the Appearance tab settings).

2. Locate the "On Submit" event and click "Add Action": The Interactions section lists available events for the Form block. Find On Submit and click its + Add Action button. An action type picker opens.

3. Choose "Show Snackbar": From the action type list, click Show Snackbar. A configuration panel appears with fields for Message, Type, and Duration.

4. Configure the snackbar: Set the Message field to Thanks!. Set the Type to Success (green). Leave the duration at its default (3 seconds). Click Save or click outside the panel to confirm.

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.

Tip: Multiple actions on one event. You can click + Add Action again on the same On Submit event to chain a second action — for example, a Trigger Data Source action that calls a Create operation to actually persist the form data, followed by a Trigger Data Source action that re-fetches the table's data source to reflect the new record.

Step 6 — Save and Preview

1. Save the working copy: Click the Save button in the builder top bar (or press Cmd/Ctrl + S). A toast notification appears at the bottom: "Successfully updated". A new entry is also logged in the Saved Versions panel recording this save.

2. Click "Preview Application": In the top bar, click Preview Application. The app opens in a new browser tab. The Data Table renders with real records from your Storage object. The Form and its Name field are visible below the table.

3. Test the interaction: In the preview tab, click the form's Submit button. A green snackbar appears at the bottom of the screen with the message "Thanks!" and disappears after three seconds. Your first event-action wire is working.

Warning: Preview reflects the latest saved work, not the latest publish. The Preview tab always shows the current state of your working copy as of the last save. If you make changes in the builder and do not save, the preview will not reflect them. 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 Preview Application). A publish confirmation dialog opens showing the app's public URL.

2. Confirm the publish: Review the URL and click Confirm 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. Click the URL shown in the publish dialog (or navigate to it manually) to open the live, publicly accessible version of your app. Anyone with the URL and appropriate access can now use it.

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:

Frequently Asked Questions

How long does it take to build and publish my first app?

The Quickstart guide is designed to take approximately 15 minutes for a first-time user. This includes creating the app, adding a Data Table and a Form, wiring a basic interaction, saving, and publishing. More complex apps with multiple pages, custom data transformations, and role-based access will naturally take longer to build.

What prerequisites do I need before following this guide?

The only prerequisite is access to a UnifyApps workspace. No prior builder experience or coding knowledge is required. The guide uses a Storage by UnifyApps data source, so having at least one Storage object with records in your workspace will let you see live data in the table immediately.

What happens if my data source fails to load records?

If the data source returns an error, the table renders empty or shows an error indicator. Open the Dev Tools panel (Alt + Shift + D) and check the Network tab — it shows the full request parameters and the error response returned by the integration. Common causes include no records in the selected object, an incorrect object selection, or a permissions issue on the integration connection.

Can I use this quickstart app in production?

The app you build in this guide is a fully functional published application that can be promoted to production once you connect it to real data, configure access controls in the app's Settings tab, and verify that intended users have the correct roles and permissions. For a production deployment, also add form validation, error handling actions, and a proper navigation structure before sharing the URL with end-users.

Does this guide work for creating a Mobile App instead of a Web App?

The steps in this guide target a Web App. Mobile Apps follow a similar creation flow but use a mobile-sized canvas and require the UnifyApps Preview app on iOS or Android for testing via QR code rather than a browser tab. The core concepts — adding components, connecting data sources, and wiring events — are the same across both app types.