App Builder Guide

This guide walks you through the key concepts of building an app with the App Builder. It also includes suggested prompts you can use as a starting point when working with the AI assistant.

1. App Structure and Forms

Every app is built around Forms. A Form represents a core category of information you want to track.

Types of Forms

Depending on the type of system you are building, your forms will typically fall into one of these categories:

People: Customers, Employees, Students, Patients, Members.
Organisations: Teams, Departments, Companies, Schools.
Items and Assets: Products, Equipment, Books, Vehicles, Software.
Activities and Transactions: Orders, Appointments, Maintenance Logs, Consultations, Exams, Projects, Tasks.
Locations: Warehouses, Classrooms, Offices, Outlets, Clinics, Meeting Rooms.

App Structure Prompts

You can try restructuring your forms or renaming your system by describing what you need in the chat. Here are some suggested phrases you can try:

Modifying the App Name

To Rename the System: "Change the system name to 'Clinic Management System'."

Managing Forms

To Add a Form: "Add a new main form called Employee."
To Add a Subform: "Add a subform under Supplier called Supplier Contact."
To Combine Similar Actions: "Add a new form called Invoice, and add a subform under Invoice called Invoice Item."
To Remove a Form: "Remove the Supplier form."
To Rename a Form: "Rename the Customer form to Client."

2. Details & Limits

Once your Forms are established, the assistant will help you define the Details for each form.

What are Details?

Details are the specific questions, properties, or pieces of information you need to collect for a particular Form.

For example, if your form is Student, the details you need to collect might be their Full Name, Date of Birth, and Enrollment Date. If your form is an Inspection Log, details might include Inspector Name, Condition Rating, and Remarks.

Detail Behaviors

You can assign specific rules and behaviors to your details:

Compulsory: The user cannot save the form without filling in this detail. Essential for critical data like emails or totals.
Maximum / Minimum Limits: Restricts the input. For text, it limits the character length (e.g., Min 5 characters for an address). For numbers, it restricts the actual value (e.g., Max value 10,000).
Default Values: Automatically pre-fills the detail with a standard answer (e.g., defaulting 'Status' to 'Pending') to save users time.
Formatting: Changes how the data is displayed or handled, such as formatting a number as Currency.

UI Buttons

When the assistant proposes a list of Details for a form, you will be presented with two buttons:

"I agree with the form": Click this button to lock in the suggested details and move on to the next form.
"I need adjustments": Click this button to open the chat window, allowing you to use the prompts below to modify the details.

Note: The "Next Step" button will remain disabled until you have confirmed the details for all of your forms.

Detail Prompts

To modify details, you can often write these as a natural sentence or in a structured format.

1. To Add a Detail:

• "Add 'Date of Birth' to the Customer form."

• "Customer form: Add 'Date of Birth'."
2. To Remove a Detail:

• "Remove 'Shipping Address' from the Customer form."

• "Customer form: Remove 'Shipping Address'."
3. To Rename a Detail:

• "Rename 'Contact Number' to 'Mobile Phone' in the Customer form."

• "Customer form: Rename 'Contact Number' to 'Mobile Phone'."
4. To Make a Detail Compulsory:

• "Make the 'Email' detail compulsory."

• "Customer form: Make 'Email' compulsory."
5. To Set a Maximum Limit:

• "Set the maximum value for 'Yearly Revenue' to 99999."

• "Customer form: 'Yearly Revenue' max to 99999."
6. To Set a Minimum Limit:

• "Set the minimum length for 'Contact Number' to 8 characters."

• "Supplier form: 'Contact Number' min to 8."
7. To Change Formats (e.g., Currency):

• "Format 'Credit Limit' as Currency."

• "Customer form: Format 'Credit Limit' as Currency."
8. To Set a Default Value:

• "Set the default value for 'Status' to 'Active'."

• "Customer form: Default 'Status' to 'Active'."

System Generated Details: Important metadata such as 'Create Date', 'Create By', and 'Modified By' are built into the system automatically. You do not need to ask the assistant to add them.

Renaming Forms: In this phase, you are only editing the Details. You cannot rename the form itself (e.g., changing Customer to Client). To do that, return to the step 1.

3. Connecting Forms

In a properly designed system, information does not exist in isolation. The assistant will attempt to find logical links between your forms.

During this phase, the assistant will present a summary of the suggested connections for your review, as shown below:

Understanding Connections

In a typical business process, information are often linked together. For example, an order belongs to a customer, and an invoice is generated from an order. Linking forms together keeps your data connected and allows you to reference existing information instead of re-typing it.

The system represents these connections using ID fields. Here is how to read the connections:

When you see Customer ID in the Order form, it means the order is linked to a specific customer. This captures exactly who placed the order.
When you see Order ID in the Invoice form, it means the invoice is generated from a specific order. This ensures the invoice can be traced back to what was originally requested.
When you see Product ID in the Order Item form, it means the item being purchased is linked to a specific product in the inventory.
When a form is labeled as a Child of..., it means the form is attached to its parent form. For example, an Order Item is a child of an Order, similar to line items on a physical receipt. To keep them connected, the Order ID is included in the child Order Item form.

Connection prompts

If you need to adjust a logical link or remove an unnecessary one, you can ask the assistant to update it. Here are some examples of how you might phrase this:

To Link Two Forms Together:

• "Connect the Order form to the Invoice form."

• "Add 'Order ID' to the Invoice form."
To Remove a Link:

• "Remove 'Supplier ID' from the Product form."

4. Menus

The final design involves grouping your forms into the navigation menu so users can easily find what they are looking for.

The assistant will propose a layout in the chat as a text-based list, showing how your main forms are grouped under broad menu categories. Note that only main forms are placed in the navigation menu.

This text structure translates directly to the navigation bar in your final app. Here is how it looks once the app is generated:

Menu Prompts

If you prefer a different layout, you can ask the assistant to reorganise the navigation bar. Here are a few ways you might try:

To Move a Form to a Different Menu:

• "Move Employee into the 'Operations' menu."

• "Move Customer and Supplier into a new menu called 'Accounts'."
To Reorder the Main Menus:

• "Move the 'Operations' menu to the very front of the menu bar."

• "Swap the positions of the 'Management' and 'Operations' menus."
To Reorder Forms Within a Menu:

• "Move Supplier to be below Customer."
To Rename a Menu:

• "Rename the 'Management' menu to 'Admin'."

Note: You are only arranging how items are grouped in the navigation bar. You cannot rename a form (e.g., changing Customer to Client) in this step. If you need to make changes to a form or its details, go back to Step 1 or Step 2.