Portal Community
App Studio

Getting Started

Create your first App Studio application in minutes — from opening the builder to publishing a live dashboard with a data grid and navigation.

Prerequisites

Step 1 — Open App Studio

1

Navigate to App Studio

From the BizFirstGO platform navigation, select App Studio from the product menu. This opens the App Studio dashboard listing your tenant's existing apps.

2

Create a New App

Click + New App. Enter an app name (e.g., "Sales Dashboard"), choose an icon, and set the initial access — Restricted (role-gated) or Open (all authenticated users). Click Create.

3

The Builder Opens

The three-panel builder opens with a default AppPage (usually "Home") already created. The canvas shows an empty Pane awaiting your first widget.

Step 2 — Add an AppPage

1

Add a Page in the App Tree

In the left panel (App Tree), right-click on the app name → Add Page. Name it "Leads" and set the route to /leads.

2

Add a Pane

With the "Leads" page selected, click Add Pane. A default pane with a 12-column grid layout is added. You can rename it "main" in the properties panel.

Step 3 — Add a DataGrid Widget

1

Open the Widget Palette

In the builder toolbar, click the Widgets button to open the widget palette overlay. Search for "DataGrid".

2

Place the Widget

Drag the DataGrid widget from the palette onto the canvas (or click it to add it to the selected Pane). A placeholder grid appears in the canvas.

3

Configure the Data Source

In the right panel (Properties Editor), set dataSource to the AIExtension.Service method that returns your lead data (e.g., GetLeads). Add the columns you want displayed.

4

Add a Row Action

Under Row Actions, add an onRowSelect action of type navigate. Set the target to /leads/:id and map the row's id column to the :id parameter.

Step 4 — Configure Navigation

With the app selected in the App Tree, open the Navigation tab in the Properties Editor. Add a sidebar item:

The canvas preview will show the sidebar with your new navigation item highlighted.

Step 5 — Preview and Publish

1

Preview the App

Click Preview in the toolbar. A new browser tab opens showing the app running in the runtime, with live data from AIExtension.Service. Test navigation and interactions.

2

Publish

When you are satisfied, click Publish in the toolbar. Publishing makes the app available to users with the configured access roles at its URL: /app/{tenantId}/{appId}.

Auto-Save

App Studio saves your work automatically every 30 seconds. You can also press Ctrl+S to save manually. The publish step is always a deliberate action — auto-save does not publish to users.

Next Steps

Now that you have a basic app running, explore the rest of the App Studio documentation:

← Architecture