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.
Last updated
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.
Last updated
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.
For a more hands-on guide to the Layout Designer, see the tutorial provided.
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.
The layouts management window presents all the layouts created for your application categorized by the Page Type.
Learn more about Layout Designer Page Types
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.
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.
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.
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.
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.
Exporting your layout saves it as a ZIP compiled file that may be password protected.
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.
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.
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.
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.
You can only import texts back into the same application from which it was exported, which will cause your existing configurations to be overridden.
Using the filter box on the top left corner of the window allows you to filter the list of layouts by name.
Clearing the filter box resets the layout list to its original items.
The Import Layouts option allows you to import your previously exported layouts back into the application.
Layouts can only be imported back into the same application from which they were exported.
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.
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.
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.
More options are available in the action toolbar on top of the designer to help your with your layout designing process.
Allows you to access the configurations of your current page.
More information about page configurations can be found in Page Types.
Allows you to preview what your design will look like as a user interface.
Expands all the elements on your designer to view their content.
Collapses all the elements on your designer to hide their content.
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.
Displays indentation markers on the canvas to help keep track of nested controls in your layout.
The platform presents an informative guide to the various features available on the layout designer in the form of an interactive onboarding.
Allows you to upload files (such as images) for use within your layout.
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.
