CSS Variables

This feature in the designer allows you to define custom CSS variables on a per-tenant basis, which can then be applied within form controls and CSS classes.

To access this feature, enable the CSS Variables option in the Beta Versions of Tenant Settings, as illustrated in the image below. 

The CSS Variables option will then appear under the Basic Settings section of Tenant Settings, as shown in the image below.

Click the “Manage” link to open the CSS Variables Configuration Window.

CSS Variable Name – You can enter the name of the CSS variable in the CSS Variable Name field. The CSS variable name will be prefixed with “–“. 

Value – The values can be entered manually or selected using the icon next to the value field. 

Add – After entering the values in the CSS Variable Name and Value fields, click the Add button. This will add the variable to the grid. 

Clear – This button is used to clear the values in the CSS Variable Name and Value fields. 

Search – Use this field to filter CSS variables in the grid. Type the variable name in the Search field, and only the matching variables will be displayed in the grid. 

The grid contains Edit and Delete icons, as shown in the image below.

Click the Edit icon next to the CSS variable you want to edit. The selected CSS variable will appear in the CSS Variable Name and Value fields. Make the necessary changes and click the Update button. 

After clicking the Update button, the updated CSS variable will be displayed in the grid, as shown in the image below.

Close – The Close button is used to exit the CSS Variable Configuration window. 

Example

Let’s illustrate this with an example.

After defining the CSS variable, drag and drop a Button and a Content Editor into the form. Inside the Content Editor, add the CSS using the defined variable name, as shown in the image below.

Under the custom style property, assign the class name ‘btn’ to the button control, as shown in the image below.

During rendering, the button’s background color will reflect the CSS color defined in the variable, as illustrated in the image below.