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

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.

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:

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

    .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:

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:

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