Skip to main content
Matrix42 Self-Service Help Center

Layout designer

Learn how to use the Layout Designer, a tool for editing Layout Templates;  components and basic principles overview.

Overview

A template is a web application page that has a particular layout, similar design, and filled with data according to a pre-defined pattern.
Any template can be represented in a number of familiar to us forms and pages of any type. These can be:

  • landing pages
  • preview pages
  • grids
  • tabs
  • dialog boxes
  • property sheets 
  • single step and multiple-step forms etc.

To create a new application page template, it is necessary to define:

  1. Data model: a set of data that will be used in a template to create a data filtering and displaying pattern;
  2. Controls: specify displayed data formatting and representation to the actual user who will see the page. For instance, the data will be shown as a grid, a list, a field with a checkbox, a static value, a text field with free input, a drop-down list, etc.;
  3. Layout: the template’s markup or areas of the page where the controls are placed;
  4. Audience: settings defining access restrictions for the template displaying to a specific set of application users. 

 Page template components.jpg

 

 

Working with Layout Designer

Layout Designer allows creating new layout templates as well as editing, customizing, or extending existing templates. 

Use Customize action to open the Layout Designer:

Customize_layout_template.png

Basic Functions

The Layout Designer basic functions are available in the top panel and have the described below particularities:

Layout designer example.png

"Save" layout function

LD_save.png or Save function means that all changes made in the layout will be applied to a single user who made the change and will not be visible to other users of the system. When the actor makes changes to the Layout and clicks Save personalization happens. 

LD_save_n_close.png or Save&Close, similarly to the Save function, applies and shows changes of the layout only for the current user and additionally closes the Layout Designer page.

To share changes with the entire company use Publish function.

"Remove Personalization" function

LD_remove_personalization.png or Remove Personalization action reverts the result of the Save action and appears for the users who did a change of a layout, saved it, but did not publish.

When an actor executes the Remove Personalization the system will revert the layout to the state of the last Publish (when any) or to the system state (in case of changing product layout).

Applying the Remove Personalization action for the layout the was created by the user but never published, will delete everything.

"Publish" layout function

LD_publish.png or Publish button is used when an actor makes changes in the layout template and wants to share them with the entire company.

It is highly recommended, to use Save function and test changes locally before sharing them with everyone.

"Remove Configuration" function

LD_remove_configuration.png or Remove Configuration reverts the result of the Publish action. Remove Configuration is visible for all administrators when the layout was changed and published (not necessarily the change was made by the same user).

Also, Remove Configuration is available for the product default layout only.

Executing Remove Configuration will remove all changes made and published but will keep all personalizations made by other users. So after execution, Layout will be reverted to product default status, but personalizations will be still applied (see Save layout function for personalization).

Layout Configuration

The Layout Designer configuration functions are available in the top right panel and have the described below particularities:

Layout configuration1.png

toolbox.png or Toolbox offers a list of Controls that are stored in the system as Control Descriptors and keep the definition of how the Control appears and behaves in the different areas of Layout Designer. For more details, see also Control Descriptor page.

data model.png or Data Model defines and allows configuring the data sources that can be used for the Layout. See also, Data Model page.

localization.png or Localization is used to configure and translate display texts for the user interface.  For more details, see also User Defined Localization page.

properties.png or Properties allows configuring the properties of the Widget Views and Containers of the Layout Designer canvas:
widget_view_properties.png

Widget View Properties example

 

container_properties1.png

Container Properties example

Useful Information

Follow the links below to learn more about the Layout Designer:

 

  • Was this article helpful?