Building Apps

To build an application, you should create Layouts, Pages, fill them with content, and set up web app interaction. 

Layouts

Earlier, we introduced the concept of Layouts. To commence layout creation, you must first outline your application's structure and identify the page templates to be utilized.

If you miss out on something, don't worry. You can augment the layout list as and when required.

Layout List

The Layout List provides all layouts of your web application. Here, you can perform a variety of operations and manage layouts.

To access the Layout List, select the 4th tab on the left toolbar in the UI Designer Tab or use the shortcut key 4. All your application layouts will be displayed here.

Every application must have at least one layout. When you create a new application, one or several layouts will be automatically created depending on the selected application template. One of them is marked up as **default**.

In the Layout List, you can perform the following actions on layouts:

• select,
• add new,
• rename,
• duplicate,
• delete.

Default Layout

The Default layout is auto-selected from the layout list when creating a new page. However, this can be replaced with a different layout if needed.

The default layout usage increases development speed, so we recommend using the most frequently used layout as default. Note that only one layout can be set as default at a time. Overriding the default layout does not affect existing pages unless the initial layout is deleted.

The Default layout is marked with a blue star icon in the layout list.

Create New Layout

You can design different layouts for different page types. Follow these steps to create a new layout:

• Press CTRL/⌘+L or open the Layout List (shortcut 4) from the Left toolbar of the UI Designer and click the Plus button on the panel header.
• Provide the Layout Name in the modal that appears. We recommend using a readable title that reflects the structure of the layout for quick identification when assigning layouts to the pages.
• Select Layout Template:
  • Base: blank template without additional elements, good for pages without navigation, like auth or error pages.
  • Sidebar Left: template with sidebar menu, good for admin panels, CMS, ERP, etc.
  • Top Menu: template with top menu, good for websites or landing pages.
• Enable the Default Layout setting if this layout is to be made default.
• Click the Create button.

There is no limit to the number of layouts you can create.

Renaming Layout

To rename a layout, double-click on the layout name, make the necessary changes, and press Enter to save or Esc to revert changes.

Duplicating Layout

To duplicate a layout, along with its content and settings:

1. Hover over the layout you want to duplicate.
2. Click the Duplicate icon.

The duplicated layouts automatically appear in the list with an index added to their names. If you duplicate the layout set as the default, the source layout isn't overridden by the newly created one.

Deleting Layout

To remove layout:

1. Hover over the layout you want to delete.
2. Click the Trash icon.
3. Confirm deletion.

To delete the layout linked with any pages, you should reassign the layout for any linked pages before deleting it. This can be done through the confirmation modal or manually for each page.

To delete the default layout, you should set up another layout as the default.

❗️ Important: You cannot undo a layout delete operation.

Layout Settings

Click the target layout in the Layout List to access its settings from the left Setting Sidebar.

From the Settings sidebar header, you can rename the selected layout by clicking on the name or delete it.

You can set the selected layout as default and view all linked pages here. To edit a linked page, click on it in the list.

Furthermore, you can build some business logic for the layout.

Layout Business Logic

In the business logic tab, select a trigger to set an action. This will open the business process editor, focused on the selected trigger.

Here, you can create an action flow for one or more triggers, like implementing navigation, altering properties conditionally, toggling visibility, sending data, and more. Refer to our guide on building a business process for more information.

🔔 For optimal application performance, build complex business processes on the backend side.

Editing Layout

Layouts, as global components and page templates, automatically apply all modifications to all linked pages.

To edit a layout, select the target item in the layout list and add any necessary components from the UI elements panel by dragging and dropping them onto the canvas area.

While editing a layout, remember that the template includes an unchangeable Page Container component. This determines the placement of your page content within the template. The Page Container is highlighted in green and cannot contain inside components while in layout editing mode. The content is defined directly on the page, and the Page Container size is determined by its parent component.

Pages

After creating the necessary layouts, the best time to start creating the web app pages. After creating the necessary layouts, the best time to start creating the web app pages. Each web application page provides content displayed on the user's web browser by the target URL.

Pages Tree

Pages Tree shows you the structure of your website — your site pages and the folders that house those pages. Here, you can perform various operations and organize pages and folders.

To Open the Pages Tree, select the 3rd tab from the Left toolbar of the UI Designer or press 3. Here will be displayed all your application pages.

Every application must have at least one page. When you create a new application, one or several pages are already created depending selected application template.

You can perform the following actions on pages and folders:

• select,
• add new page or folder,
• rename,
• move the page and folders to/out folder,
• duplicate,
• delete.

Index page

The Index page is the initial page of your application. When your application runs, this page will be rendered first if you didn't create any redirects.

The Index page marked the House icon in the pages tree and can't be switched to another page. By default, this page is linked with the default layout created automatically, but you can change it in the Page Settings.

Create New Page

To add a page to your web application:

1. Press CTRL/⌘+P or open the Pages Tree (shortcut 3) from the Left toolbar of the UI Designer and click Plus button on the header of the panel.
2. Provide the Page URL in the modal that appears.
3. Select the Parent Folder for the page or leave the field empty to place the page at the root.
4. Select Page Layout.
5. Click Create button.

💡 To build a nested route without creating folders, provide a full path to the target page in the Page URL field, e.g., settings/profile. The page Profile will be created nested to folder Setting in this case.

You can create unlimited pages and folders for your web application.

🔔 Web apps built with AppMaster Studio generate app routing by page URL, so in page generation form, use page URL in the correct format and, for the best understanding, use a friendly URL.

Create New Folder

You can create folders to organize navigation and build the right router for the pages. To create a new folder:

• Press CTRL/⌘+SHIFT+P or open the Pages Tree (shortcut 3) from the Left toolbar of the UI Designer and click Folder button on the header of the panel.
• Provide the Folder Name in the modal that appears.
• Select the Parent Folder if necessary to make a nested router
• Click Create button.

UI Elements

Your app's user interface consists of elements: input fields, buttons, images, checkboxes, calendars, images, and icons that each serve a specific purpose. 

AppMaster offers a drag-and-drop visual editor that lets you pick and place elements directly on the page instead of writing code and immediately previewing it.

Adding Elements

To add an element to the canvas:

1. Open the UI Elements Panel with a list of UI elements (shortcut 1).
2. Select the necessary element or use the Search bar.
3. Drag the selected element onto the page or layout canvas.

To place the dragging element inside the target, drop the element above the target elements.

To add an element before or after an element, drag the element above the target's border until a separator appears.

The divider depends on the parent container direction:

• If the parent container Direction is Vertical, elements will be added from the top or bottom.
• If the parent container Direction is Horizontal, elements will be added from the left or right.

Customize Elements

Every component you add to the canvas is endowed with a comprehensive set of customizable settings. With element properties, you can manage both the element appearance and the data that will be displayed.

To configure an element:

• Select the target component on the canvas.
• Navigate to the Appearance panel, the first tab on the right sidebar.
• Within the panel, choose the specific Setting item you wish to modify.
• Enter your preferred values in the designated fields.

The canvas responds in realtime, showcasing your adjustments immediately.

For additional guidance, hover your mouse cursor over a setting briefly to emerge a tooltip, providing a concise description of that setting's function.

Beyond these interactive features, AppMaster enhances customization capabilities through its special business process blocks, Set Properties and Set Data. These blocks provide an advanced level of access, allowing you to alter the settings of each component programmatically in your web application.