Design UI

Interface design on the platform is done via the Layout Designer - a tool specifically created to help build clean graphical layouts for your users to interact with your application.

Overview

The Layout Designer is the main tool offered by the platform to create graphical user interfaces (or layouts) for your application.

Prior to creating your layout, it is helpful to have already defined the underlying components of the entire application - such as creation of the required classes and actions.

You can then build your layout to allow users to interact with the underlying components with ease.

Layout Designer Overview

For a more hands-on guide to the Layout Designer, see the tutorial provided.

Getting Started

Navigate to your Workspace > Apps and click on the gear icon to activate the configuration mode of your applications. Next, click on the gear icon of the application you wish to configure. In the Views section, you can select Layouts to access the Layout Designer.

Opening Layout Designer

At this stage, you will encounter the layouts management section of the designer - allowing you to view your existing layouts, create new ones and import/export layouts.

Layout Management

The layouts management window presents all the layouts created for your application categorized by the Page Type.

Layouts Management

Role Filtering

By selecting the right Role value, you can browse through the list of layouts created for users with Viewer or Editor rights accordingly.

Learn more about roles and permissions in the Rights Designer section.

Grouping

Selecting the menu icon on the right of the Role filter, you can select further grouping options from a dropdown menu.

The options include:

  • No Grouping

  • Group By Class

  • Group By First Letter

  • Group By Last Modified

Based on the grouping method selected, each page type category is further broken down into grouping sub-categories where the layouts are listed accordingly.

Layout Grouping Options

Layout options

An existing layout can be opened for editing by selecting it from the list of layouts.

More management options are available for each individual layout by selecting the dropdown on their right.

Layout Context Menu

Cloning a layout

The clone option is available from the dropdown menu for your layout item. It creates a copy of the layout with the suffix - Copy added to its name.

Exporting a layout

The export option is available from the dropdown menu for your layout item. This results in the platform compiling your layout as a JSON file, which is then bundled and downloaded to your device as a ZIP file. The default file name is layouts.zip.

Usage of layout

You can easily verify which components (such as classes or workflows) of your application is using your layout by selecting the Used By option from the layout dropdown menu.

Delete a layout

The delete option is available from the dropdown menu for the layout item. You will be prompted with a confirmation message, following which your layout will be deleted from your application.

Import/Export Texts

The platform provides an import and export mechanism for all text content within your layout. This is particularly helpful when the application is being translated to provide multilingual support.

Exporting the text even allows the use of external translation services without compromising on access to your application.

Import and Export Texts

Configurations of the layouts in your application can be exported by selecting the Export Texts option. This generates a Microsoft Excel file which can either be viewed in your browser, or saved locally to your device.

Similarly, the exported Microsoft Excel file can be imported back to the application by using the Import Texts option.

Using the filter box on the top left corner of the window allows you to filter the list of layouts by name.

Layouts Filtering

Clearing the filter box resets the layout list to its original items.

Importing Layouts

The Import Layouts option allows you to import your previously exported layouts back into the application.

Creating a new layout

A new layout can be creating simply by clicking on the New Page option from the top action toolbar in the layouts management window.

First, you need to select your layout page type.

Learn more about the Layout Designer Page Types

Next, you will be directed to the Page Configuration screen where you can further customize your layout page settings and functionality.

Layout Designing

After creating your page, you can customize the page layout via the layout designer canvas. You can browse the variety of layout controls offered by the platform as well as templates to help kickstart your design. On top of the designer, you can see several options offered to improve your layout designing experience.

Layout Designer

Layout Controls

The layout controls are listed on the left of the designer categorized as Fields, Links, Controls and Templates. These elements are the building blocks of your layout in the designer.

Fields and Links are available only when using class-bound pages such as Object Page.

Design Options

More options are available in the action toolbar on top of the designer to help your with your layout designing process.

Page Settings

Allows you to access the configurations of your current page.

More information about page configurations can be found in Page Types.

Preview

Allows you to preview what your design will look like as a user interface.

Expand (todo: square-plus icon)

Expands all the elements on your designer to view their content.

Collapse (todo: square-minus icon)

Collapses all the elements on your designer to hide their content.

Debug

Allows you to view your layout in JSON format.

  • Modify When in debug mode, you can select this option to modify your layout as a JSON directly.

  • Toggle View Allows you to toggle between the fully expanded JSON view with all the control properties and a categorized list of items based on their status on the canvas. Item status: Deleted, Moved, Updated, Added.

Visualize Indentation

Displays indentation markers on the canvas to help keep track of nested controls in your layout.

Layout Designer with Indentation

Run Intro Tour

The platform presents an informative guide to the various features available on the layout designer in the form of an interactive onboarding.

Attachments

Allows you to upload files (such as images) for use within your layout.

Last updated

Was this helpful?