HowTo: Set the style of a read-only Attribute/Variable control using DSO

Official Content
This documentation is valid for:

This article explains how to give a specific style to a read-only Attribute/Variable control using a Design System Object.

Consider a variable named &copyright that is inserted in a Web Panel object to display a copyright text.

Since the variable should not be editable, its Readonly property is set to True.

DSO Read Only Attribute /Variable control styled with DSO

In addition, the &copyright variable has its Class property configured with a class named MinorText which is defined in the Styles section of a Design System object created in the KB and associated with the Web Panel.

The definition of the MinorText class in the Styles section of the Design System object is as follows:

        background-color: $colors.Grey01;
        color: $colors.OnSurface;
        font-size: 20px;
        font-family: AbhayaLibre-Bold;
        gx-readonly-class: Readonly;

        background-color: yellow;

Note that the MinorText class contains the gx-readonly-class property configured with another class (which is defined by you and in this case has been named ".Readonly").

At runtime, you will see the following:

DSO Read Only Attribute /Variable control styled with DSO 2

However, if the Attribute/Variable control had its Readonly property set to False (which is the default value), at runtime you would see the following:

DSO Read Only Attribute /Variable control styled with DSO 1

In conclusion, given an Attribute/Variable control that has its Class property = MinorText and also has:

  • Its Readonly property = False: The background-color property of the MinorText class is taken into account.
  • Its Readonly property = True: The gx-readonly-class property of the MinorText class is taken into account (and the assigned class has its own background-color property configured).

See Also

DSO properties that begin with gx- and end with class