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.
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.
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.
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.
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 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.
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.
Exporting your layout saves it as a ZIP compiled file that may be password protected.
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.
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.
Filtering and Search
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.
Importing Layouts
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.
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.
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 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.
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.
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.
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?