Skip to main content
Matrix42 Self-Service Help Center

Landing Page

Overview

A Landing Page is as a web page that explains the product or service offer and places visual emphasis on the value of the product or service presented. Landing Pages usually contain clear, concise, and action oriented headlines followed by clear and concise paragraphs reinforced with visuals, such as graphs and images. Below is a sample Landing Page created with the help of the Solution Builder.

landing_page_sample.png

Creating a Landing Page

To create a Landing Page, in Administration, under User Interface > Layouts:
 

  • Select "Landing Pages" and click the FAB button located in the bottom right-hand corner of the grid.
  • Fill out and save the dialog that appears. In the dialog, select the "Enable Personalization" checkbox to allow end users to configure the Landing Page - hide entities, such as graphs and charts, from or add them back to the Landing Page - directly from the UI. This checkbox can be selected only on creating the Landing Page and cannot be changed later.

    TIP: Users can open the Configuration Dashboard with all the entities that can be added to the Landing Page with a mere click of the Configure button located in the bottom right-hand corner of the Landing Page and then add the entities to the Landing Page by clicking the + button next to those entities in the Configuration Dashboard.

    landingpageconfigurationdashboard.png

  • Design the look and feel of the new Landing Page in the Layout Designer that opens in a new tab once you provide all the required data and click SAVE or DONE in the New Landing Page Creation dialog.
    landing_page_toolbox.png

    In the right-hand panel of the Layout Designer, open the Toolbox by clicking the Toolbox (Wrench) icon, locate the controls you need under the available categories - Literals, Controls, Layout, Image Controls, Grid Controls, and Charts - and then drag-and-drop the selected entities onto the canvas, into the desired location.

    You can also switch to the Data Model view in the right-hand panel by clicking the Data Model icon located in its rightmost part, at the top, right below the Wrench icon, click the +ADD SOURCE button at the very bottom of the right-hand panel and create a new Source Configuration from a Service Operation, Entity, Data Definition, or Data Query. Once you add a Configuration Source by filling out and saving the Add New Source dialog, you can use the data from the new source in the Landing Page you are building. Just drag the data from the right-hand panel and drop it onto the canvas to add fields and other controls to the dialog, exactly where you need them. Once you drag and drop an attribute or relation onto the canvas, select the type of the control from the list of available options that appears. The new entity will be added to the canvas. You can now set properties for the newly added attribute or relation in the Layout Container that opens up in the right-hand panel.

    When done designing the layout, click the "Save & Close" button located in the Main Toolbar at the top of the screen.

    TIP: You can open an entity in the Layout Designer at a later point in time by clicking …MORE > CUSTOMIZE in the toolbar of the entity’s Preview dialog. Once you open an entity in the Layout Designer, you can make changes to the layout of this entity by rearranging the data on the canvas, modifying its look and feel, removing the attributes and relations from the canvas and adding new ones from the right-hand panel.

The most usable controls for Landing pages are quick-links and charts.

Quick-link

A Quick-link is a control which can be used to execute any actions in our system. There are seven types of quick-links which can be configured in section “Model”:

  1. Go to Navigation
  2. Open Dialog (New/Edit/Preview)
  3. Execute Action
  4. Open external link
  5. Call service
  6. Assign some data (used to execute other calculation fields in Designer)
  7. Go to Landing Page

By default, a quick-link will be shown only if the configured action is accessible for the current user. This behavior can be changed by checkbox “Hide if unavailable” in section “Appearance”.

Go to Navigation

Used to go to some navigation in the system.  
Attributes: 

  • Navigation item – choose which one should be opened
  • Filter – configure the filter of the selected navigation item
  • View type – data-set type: grid, list, calendar

Dialog

Used to open any dialog for some object.
The object can be set by EntityType and ObjectID or by EntityClassName and ID. 

  • To open “New dialog”: choose only EntityType (but not ObjectID);
  • To open “Preview”: choose both EntityType and ObjectID (or EntityClassName and ID);
  • To open “Edit Dialog”: choose object as for “Preview” and set “Edit Mode” as “true”.

Action

Used to execute some configured action from the system.
Attributes: 

  • Action – choose an action
  • Action context – add context which should be added to the action. Action context is an array of js objects which define the ID and the Type of the action context object

 return [{ _id: booking.Id, _type: "SVCServiceBookingType"}];

  • Disable on action submit – if checked, than this quick-link will be disabled after action (wizard) is submitted
  • Reload on action submit – reload Preview when action (wizard) is submitted

 

External

Used to open external links.

Call service

Used to execute some service.
Attributes:

  • Source – the name of source from DataModel which should be executed
  • Source State – bind to Source State of selected Source
  • Show Loading Indication – if checked, the “circle loader” will be shown near the quick-link during Source loading

Assign

Used to assign one field from DataModel to another. It can be used to recalculate some logic in Calculation Fields.
“Assign Source” – field from DataModel  which will be assigned to the field selected in “Assign Destination”.

Landing Page

Used to go to chosen Landing Page (for example, if this Landing Page is acceptable for current user but is not acceptable by any navigation item).

There are two extra properties for all modes:

  1. Assign Before – Source
  2. Assign Before – Destination

These properties work like properties from “Assign” but they are executed before the main action. This is not often the case, usually, it is needed for Quick-links on Tiles (where a quick-link is added to repeater).


Common properties

  1. Title – text which will be shown in the first line of the quick-link
  2. Description - text which will be shown in the second line of the quick-link
  3. Confirmation message – If this message is entered, then before the execution, the confirmation dialog  will be shown with this message.

Appearance

  1. Mode
  • Button – show the quick-link as a button
  • Link – show the quick-link as a link
  1. Style – several pre-configured styles for the quick-link (for mode “button”)
  2. Icon 
  3. Icon color
  4. Text color
  5. Background color
  6. Darker hovered background – to add “hovered styles”
  7. Hide if unavailable – if checked, then the quick-link will be hidden if the configured action is not acceptable for the current user
  8. Detect small size – quick-link will change its layout when it is located on a widget with small size (it uses for Landing pages with Personalization, where widget sizes can be changed by user).

Advanced

  1. Outer context – the data that will be added to Context.OuterContext of opened Dialog.

 

Charts

There are such types of charts:

  1. Pie
  2. Column
  3. Line
  4. Area
  5. Bar
  6. Stacked Column
  7. Stacked Bar
  8. Combo chart

Most of the charts have very similar attributes (except for combo-chart).

Section “Model”

To configure charts, first, it is necessary to add some DataSource which returns an array of objects. These objects should have minimum two properties which will be used as data for X- and Y- axes.
First, set some array with object to attribute “Data”. After that, all property names of these object will be loaded to attributes “Legend Field Name”, “Value Field Name” and “Stacked Field Name” (only for “stacked” charts). Choose them:

  • Legend Field Name – property which contains legend data
  • Value Field Name - property which contains values data
  • Stacked Field Name – property by which data combines in stack (if these values of different object is equal)

“Loading state” – If it is necessary to show a loader while DataSource is loading, then this property should be set as “Loading state” of chosen DataSource.
“X-Axis Title” and “Y-Axis Title” – titles of axis displayed on the chart.

Section “Output”

“Selected Data Item” – data of selected point on the chart. It is used to do any actions after a click on the chart.

Section “Legend”

This section contains parameters which configure legend visibility.

Section "Appearance"

  • Chart title
  • Title Align - how title should be displayed
  • Show Only Top Bars/Columns - show only top bars/columns which are placed in the area. Other bars will be hidden until chart will be resized (used on Landing Pages with personalization, where widget can be resized by end user)
  • Data Labels Format - the format of point labels on charts. Variables {x} and {y} can be used here to add values of x and y to label.
  • Tooltip Format - format of the tooltip which is shown over charts. Variables {x} and {y} can be used here to add values of x and y to label.
  • No Data Message - message which is shown if data is not available. By default: "There is no data available to generate this chart'

Section "Details"

Attributes from this section are used to configure which dialogs should be opened on clicking on chart. It can be configured to open Preview of some object or to open grid of objects.

To open grid of objects:

  • Entity Class - object of which entity class should be displayed in the grid
  • Filter Expression - filter for objects in A-SQL 
  • Column Definition - the name of DataQuery which will be used to define visible columns

To open preview of object:

  • Entity Type - entity type of object
  • Object Id - object id of object

"Details View Title" - title of opened view.

To show Preview of some object related with a clicked point on a chart, it is necessary:
  • array with data for the chart has to contain minimum such attributes:
    • value of x which will be displayed on chart (number)
    • value of y which will be displayed in legend
    • EntityType of related object (or any value which can help to define EntityType of selected object)
    • ObjectId of related object (or any value which can help to define ObjectID of selected object)
  • add to DataModel new field "SelectedItem" (or any other name) and set it in chart property “Selected Data Item”
  • add new field "SelectedEntityType"
  • import field "SelectedItem" in "SelectedEntityType and get property "EntityType" from it (e.g. "return selectedItem.$value.EntityType;", or write some logic to define which EntityType is needed)
  • set "SelectedEntityType" to chart property "Entity Type"
  • the same for ObjectId

Combo-chart

It is possible to configure up to 4 charts in a combo-chart. Each of them should be configured in its section "Chart 1", "Chart 2",... .

First, choose type of each chart in attribute "Chart Type": line, column or area. 

The data has to be configured in the same way as for a simple chart. Attributes "Data", "Legend Field Name", "Value Field Name".

"Details Type" - type of view which will be opened after a click on chart: list (grid) or object (Preview). Configuration is the same as in simple chart.

"Chart Title" - title of this chart which will be shown in legend of the combo-chart.

"Individual Y Axis" - if checked, then this chart will use individual Y axis with different scale. It is usable when values of the other chart are very different (e.g. hundreds for the first chart and billions for the second). 

 

Best practices for "Quick Link"

Styles

1. Big squared colored button

quick-link-big-square.png

 

To make a quick-link to look like in the screenshot above, change next attributes:

  • "Title": enter any title you need

In section "Appearance":

  • "Mode": "Button" (chosen by default)
  • "Style": click on property, in opened menu click on "Static Value" and there choose "Big Quick Link Without Description"
  • "Icon": choose any icon
  • "Icon color": choose white color in color picker
  • "Text color": choose white color in color picker
  • "Background color":  choose yellow color in color picker (or any other, also it is possible to choose one of the colors from theme)
  • "Darker Hovered Background" - true

2. Material button with description for quick-start widget

quick-links-material-quick-start.png

This is the default style for quick-links. To make Quick-link looks like in the screenshot above change next attributes:

  • "Title": enter any title you need, e.g. "New Application"
  • "Description": enter any description, e.g. "Create Application"
  • "Mode": "Button" (by default)
  • "Icon": choose any icon from the library

3. Quick-links for Resizable widgets.

quick-link-resizable.png

In the screenshot, all the quick-links, except for "New management Area", have attribute "Detect Small Size" = "true".

So, if this attribute is set as true and the end user changes the size of the widget where the quick-link is located, then the quick-link automatically hides description and changes its layout.

4. Quick-link as hyper-link

quick-link-hyperlink.png

To make quick-links look like hyper-links, change attribute "Mode" on "Link" and don't use "Style" in this mode.

 

5. Quick-link as active button

quick-link-active-button.png

Attributes:

  • "Title" = "Any title"
  • "Mode" = "Button" (By default)
  • "Style"  = Static Value => "Active button"
  • "Full width" = "False"
  • "Detect small size" = "False"
  • "Flex option" = "Fixed" (By default)
  • "Icon" - choose an icon if it is needed

By default, Layout Containers (or Dashboard Widgets) stretch their elements. So, it is also necessary to change layout properties for the container where the quick-link is located:

layout-direction-start.png

Functionality configuration

1. Open "New Dialog"

For example, to create new Incident, set attributes:

  • Quick Link Type = "Dialog"
  • Entity Type = entity type of required object. For incidents, it is "SPSActivityTypeIncident"

quick-link-new-incident.png

2. Open "Preview" 

For example, to open preview of action "Withdraw" set attributes:

  • Quick Link Type = "Dialog"
  • Entity Type = entity type of this object. For actions it is "PDRActionType"
  • Object ID - (GUID) of required object
  • Title = any title, e.g. "Open preview of action "Withdraw"

Usually this case is used with ID which is loaded dynamically by some Source. 

3. Open "Edit dialog"

For this use the same parameters as for "Preview" and also set "Edit Mode" as "true"

quick-link-edit-dialog.png

4. Active button with confirmation which calls some service

Add some Service Operation as Source to DataModel. Set "Source Execution Mode" as "On Data Update" for it. Configure input values if it is necessary.

Add quick-link with next attributes:

  • "Quick Link Type" = "Call Service"
  • "Title" = "Execute My Service"
  • "Source" - input the name of the Source added to DataModel
  • "Source State" = bind property "$sourceState" of added Source
  • "Show Loading Indication" = true to see loader during Source is working
  • "Confirmation message" = "This operation can take too much time. Are you sure?" or any other confirmation message
  • "Mode" = "Button"
  • "Style" = "Active Button"
  • "Icon" = any icon
  • "Full Width" = false
  • "Detect Small Size" = false

Example with source "Consolidate"

image.png

 

  • Was this article helpful?