Conditional styling

Conditional styling is available in the index list, details header, form, and data grid components. The conditional styling is connected to a specific application and not a specific user.

The types of styling differ a little between the components. This list shows the components with their respective styling:

  • Application header: field color, text color, text weight, text style, and tooltips. Tooltips do not work yet for lookup fields in the application header.
  • Index list: field color, text color, text weight, text style, text alignment, text override, tooltips, icons, icon color, and icon position.
  • Details header: field color, text color, text weight, text style, text alignment, text override, tooltips, icons, icon color, and icon position.
  • Form: field color, text color, text weight, text style, and tooltips. Tooltips do not work yet for lookup fields in forms.
  • Data grid: field color, text color, text weight, text style, text alignment, text override, tooltips, icons, icon color, icon position, and links.

Add conditional styling to an application:

  1. Click Configure or hover over the component that needs styling and click the Configure icon.
  2. Click the Conditional Styles tab and click + Add.
  3. Specify a name for the condition and select target field, condition type, field, operation, type, and value on the Target Field and Conditions tab.
    The available condition types are field value, specific value, user context, and dynamic date. Dynamic date is only available if the date is selected as the condition type. You can use condition type user context to add user data in the condition.
    You can use condition type dynamic date to add a time interval in the condition. The interval is always related to today’s date. If the interval is set to 0 days before and 0 days after today’s date, the interval is today's date.
  4. Click + Add to add more conditions in one conditional style.
  5. On the Style tab, specify field color, text color, text weight, text style, text alignment, text override, tooltips, icons, icon color, and icon position. The text override and custom tooltip work together with translation keys. To enable the translation keys, enclose the name in <> and do not use spaces. See Configuring translations
  6. On the Link tab, select the check box, Become a link when the condition is met, to change the field into a link. Select a link type, paste the link in the link text area, and click + Add to create variables used in the link.
  7. On the Description tab, add a description of the conditional style.
  8. Click Save in the Conditional Styles Configuration window.
  9. Click Save in the component configuration window.
  10. To ensure that the conditional style you added and configured is applied, click the Save button on the application.