Skip to main content
Matrix42 Self-Service Help Center

Introduce a new Style for a Control in Layout Designer

Overview

The article explains how the custom Style can be created and registered in the Solution Builder, to be available in the Layout Designer controls. Such a use case could be very helpful for cases when you would like to introduce a new Style for a Control, which could be used in various Layouts.

Goal

The article targets the following goals:

  • Introduce a new style in Layout Designer that could be applied to a specific control or the family of the controls

 

Implementation

Step 1: Create your custom style

In CSS snippet you can see the simple implementation of such style:

  .my-custom-style .literal-value {
    background-color: red;
}

Save that CSS as file in your custom workspace. For example here: <installationFolder>/wm/workspaces/MyCustomWorkspace/css/mycustomstyle.css

To make the implemented control be known by UUX application, references to the Front-end assets (e.g. JS libraries or CSS) need to be properly registered in the UUX platform. For the integrating 3-d party modules, the UUX platform uses "UUX Front-end Workspaces". 

In this case, the reference to a new CSS library needs to be added to index.html:

<link rel="stylesheet" href="workspaces/MyCustomWorkspace/css/mycustomstyle.css">

Step 2: Register style in the Layout Designer

To make the implemented style be known by UUX application, You need to register it in configuration file that can be found here: <installationFolder>/wm/workspaces/PandoraSolutionBuilder/styles/styles.json

Add following part in the file with your custom style information for Literal controls

        {
            "class": "my-custom-style",
            "name":"My Custom Style",
            "tags": ["literal"]
        },

Tags, is an array of identifiers, which characterize a control, or the group of controls (family of controls). As far as all controls have complex composite HTML structure, it is important to display only appropriate Styles for each control. The Tag value, which corresponds to your control is set in the configuration of the Control Style Property (or in Style property of the inherited Control)

StyleTag.png

Step 3: Use custom style the Layout Designer

Open any Layout where style needs to be applied, select any literal control, and see the style property:

 

clipboard_e45e388e320f0df3aaef1af59da1f3a06.png

After saving Layout, custom style will be applied to selected Literal

clipboard_e6555f30699db8d26ed19f479264ce072.png

  • Was this article helpful?