UI Color Adornments for Fields

UI Color Adornments for Fields

CPQ, form-config, or datatable fields can be colored using two mechanisms. These mechanisms are described below. Note: these mechanisms are NOT in the UI Layout.

  1. Inputs can take a ‘warning’ or ‘danger’ attribute. If their value is non-empty, the input will be colored orange or red respectively. You can set the attribute to a form expression. You must include a ‘=‘ at the beginning of the form expression. This only works for inputs. It does not work for formconfig table rows or columns. This coloring does work for cells in datatable list screens. It does not work for cells in formconfig/cpq summary screens.

  2. One can specify a form-expression in the ‘class’ attribute for inputs, rows, and columns. You must include a ‘=‘ at the beginning of the form expression. You will need to define the CSS yourself. This can be done via a CSS file pointed to via ADL Property ‘adlwebui-css’. This only changes the color in the form. The list screen will not be colorized.

Example:

In a quote, an 'Informational' input type that is conditionally visible/hidden can be used to colorize display values in the Quote. Such conditions only use client side form expressions, so cannot conflict with server side actions. The displayed message is in the label of the input. A Label field supports limited styling, so one can change its color. For example: '[color=#ff1234]

There are no builtin colors for the second method. You will need to create styles like the following. Suppose you wish to color a table row orange. You will need to specify CSS like the following:

.formTable tr.warningRow,

.formTable tr.odd.warningRow,

.formTable tr.even.warningRow {

background-color: #fffcec;

color: #c63;
}

And row in the table should look something like

<row class="=IF(showWarning, 'warningRow', '')">

The first method is for datatables, to colorize certain cells, and have those colors show up in both the view and list views. It should work for formconfig/cpq forms as well, but not list screens.

The second method is for internal use, to color inactive or expired rules in quote templates.

Color enhancements for Quote UI Layout

You could color labels of a input text as follows in Quote UI Layout ONLY in XML form:

<col label="[b][color=#ff0000]Customer[/color][/b]">. /* Example for BOLD RED COLOR Customer label in Customer tab in Quote UI Layout */

You could also the following attributes too:

[I]italic[/I]
[b]bold[/b]
[u]underline[/u]
[s]strikethrough[/s]
[color=#ff0000]red[/color]