Using Layout Styles
•Adding a Dynamic Layout Style
•Editing a Dynamic Layout Style
•Deleting a Dynamic Layout Style
•Viewing Dynamic Layout Style Usage Statistics
About Dynamic Layout Styles
You can create custom styles for layouts. You can use these styles to highlight changes to individual records as they are listed in the layout when certain conditions apply, or to emphasize certain fields within a layout. Styles include text font, size, style, alignment, and color, as well as backgrounds and borders.
The styles created in the Layout Styles workspace follow standard CSS Cascading Style Sheet. Use to define how to display HTML elements. HEAT Service Management allows a limited amount of CSS control within the list highlighter. guidelines. See http://www.w3schools.com/css/ for more information on CSS syntax.
Adding a Dynamic Layout Style
1.From the Configuration Console, click Build > User Interface Styles > Layout Styles to open the Layout Styles workspace. The list of layout styles appears, if any.
2.Click Add new.... The New Style page appears.
3.Under the Dynamic Style Definition pane, the following default fields appear:
Field | Description |
---|---|
Name |
A unique name that only contains alphanumeric characters. Spaces and special characters are not permitted. |
Description |
The purpose of the layout style. |
4.Drag and drop items from the Style Properties pane onto the Dynamic Style Definition pane, then enter standard CSS syntax to define each style.

Style | Description |
background-color |
The list cell background. Use standard CSS syntax, such as purple or #533b75. Choose from the pop-up window. |
border-color | The color of the field border. Choose from the pop-up window. |
border-style |
The type of border. See http://www.tizag.com/cssT/border.php for examples of each border style. none hidden dotted dashed solid double groove ridge inset outset |
border-width | |
color |
The color of the text. Choose from the pop-up window. |
font-family | The text font family. Choose from the drop-down list. |
font-size |
The text font size. Enter the font size according to standard CSS guidelines, or choose from the drop-down list. |
font-style |
The text font style, either normal or italic. |
font-weight |
The text font weight, such as bold or normal or a number value.
NOTE: 400 is the same as normal and 700 is the same as bold. |
padding | The amount of padding around the field. Enter the padding according to standard CSS guidelines. |
text-align |
How the text is aligned. Choose from the drop-down list: left right center justify |
SelectorFormat |
Defines an attribute for the style. For example if you set: Font-size: x-small SelectorFormat.{0}:hover this shrinks the font when you mouse over the style. |
MediaQuery | |
width | |
min-width | |
max-width | |
height | |
min-height | |
max-height | |
float | |
clear |
The Preview section shows the results of your custom list style.
1.Click Save. The layout style appears on the page. You might need to click the refresh icon to see the style.
After creating the layout style, you can apply it to any form, list, or control, by choosing the style from a drop-down list.
Editing a Dynamic Layout Style
1.From the Configuration Console, click Build > User Interface Styles > Layout Styles to open the Layout Styles workspace. The list of layout styles appears, if any.
2.Click the name of a dynamic layout style to edit it.
3.Make changes to the dynamic style.
4.Click Save in the Dynamic Style Definition pane.
Deleting a Dynamic Layout Style
1.From the Configuration Console, click Build > User Interface Styles > Layout Styles to open the Layout Styles workspace. The list of layout styles appears, if any.
2.On the line with the dynamic layout style, click the delete icon. The application displays a confirmation dialog box.
3.Click Yes.
Viewing Dynamic Layout Style Usage Statistics
You can see the business object Any key business component that you want to track and manage. Examples include incidents, tasks, configuration items, attachments, audit history, contacts, and notes.s to which layout styles have been applied.
1.From the Configuration Console, click Build > User Interface Styles > Layout Styles to open the Layout Styles workspace.
2.Click Get usage statistics. A list of the layout styles and where they are being used appears. If a layout style does not have a description, it is not being used.