Display options are added during configuration of a service form item. Display options can be used to control behaviour of components or rules and to add styles to the rendered HTML element.
<box shortCode="detail" displayOptions="css-mbn">
....
</box>Display options prefixed with css- are interpreted as CSS styles and are added to the rendered HTML element as classes without the prefix. e.g., the above would add the "mbn" class to the box.
<div class="mbn">
...
</div>Display options that are not css- prefixed are interpreted by the specific Glue component that the resulting View Node will use for rendering
Container Styles
Utility classes to configure the display of a container. These may be used to differentiate parts of a form from each other or bring attention to a section. Prefix the display option with css- for it to propagate to the UI.
| Display Option | Description |
| borderedContainer | Adds a border with background around the container node. |
| lightContainer | Adds a border with transparent background around the container node. |
| alert | Changes the container style to an alert box. |
| plain | Used together with alert to display an alert box with plain settings |
| info | Used together with alert to display an alert box with info level |
| warn | Used together with alert to display an alert box with warning level |
| error, fatal | Used together with alert to display an alert box with error level |
| debug, success | Used together with alert to display an alert box with error level |
| small | Used together with alert to display a condensed version of the alert box |
Buttons
Buttons use functional display options rather than CSS utility display options to determine the type of button to use.
| Display Option | Description |
| button | Contains the basic look and feel and functionality of a button. Automatically added in the css if there’s no other display option in the node. |
| primary | Changes the button style to primary. Please refer to Design System for more details |
| secondary | Changes the button style to secondary. Please refer to Design System for more details |
| link | Changes the button style to link. Please refer to Design System for more details |
| simple | Changes the button style to link with padding around. Please refer to Design System for more details |
| small | Changes the button style to small. Please refer to Design System for more details |
| fill | The button will be wide as much as available space. |
| hollow | Changes the button style to hollow. Please refer to Design System for more details |
| rounded | Changes the button style to rounded. Please refer to Design System for more details |
| right | Float the button to the right. Please refer to Design System for more details |
| icon-* | Renders an icon on the left of the button text. Please refer to Design System for more details |
| new | Opens the button action response to a new window |
| prompt | Displays a confirm dialog when the button is activated. |
The following text keys can be provided to configure the dialog:
- promptHeading
- promptMsg
- promptConfirm
- promptCancel
| prompt-small, prompt-medium, prompt-large, prompt-full | Sets the width of the popup dialog if button has a confirm prompt message. If any of the size is not present, the default is small. Used only with prompt display option |
| focusOnError | This display option works only in buttons. When the button with this display option is activated, the screen will focus and scroll to the input field with error. |
Utilities
Display
Prefix the SFI display option with css- to add the following display option.
| Display Option | Description |
| clear | Sets whether the node must be moved below if there’s a floating element the precedes it |
| inline, inline-block | Changes the display to inline-block, causing another inline node to be displayed next to each other in one line |
| pre | Retains the white spaces inside the text. Please note this does apply to all text, known usage is hint text. |
| right | Float the node to the right. |
| left | Float the node to the left. |
| hide-for-small | Hides the node on small screen |
Typography
More details and options in Design System Utilities Typography. Prefix the SFI display option with css- to add the following display option.
| Display Option | Description |
|---|---|
| italic | Changes the font style to italic Please note that this may not apply to all if the node is using a widget that has a specific font styling, eg. attribute label-value |
| text-size-small | Changes font size to small |
| css-text-highlight | Changes font colour to black (darkest colour) |
Margins and Paddings
You can combine "m" for margin or "p" for padding with any of the sizes "x" extra tiny, "t" tiny, "s" – small, "l" – large
| Display Option | Description |
|---|---|
| mn, pn | margin/padding none |
| mx, px | margin/padding extra tiny |
| mt, pt | margin/padding tiny |
| ms, ps | margin/padding small |
| ml, pl | margin/padding large |
Also you can specify margin only for top, left, right or bottom using "t", "l", "r" or "b"
| Display Option | Description |
|---|---|
| mts, pts | margin-top/padding-top small |
| mrs, prs | margin-right/padding-right small |
| mbs, pbs | margin-bottom/padding-bottom small |
| mts, pts | margin-top/padding-top small |
Colours
| Display Option | Description |
|---|---|
| success | Sets the background, borders and text colour to the success colour palette |
| warning | Sets the background, borders and text colour to the warning colour palette |
| danger | Sets the background, borders and text colour to the danger colour palette |
