Customizing the Icon of User-Defined Business Objects

Styling > Using Cascading Style Sheets > Customizing the Icon of User-Defined Business Objects

Customizing the Icon of User-Defined Business Objects

This use case shows you how to customize the icon used to represent your business objects. It applies to the tree and table graphic components.

Customizing icon parameters in the graphic representation of a user-defined business object is based on the following properties of the graphic representation:

CSS Property	Type of Value	Default	Usage
`icon`	`Image`	`null`	Icon to be displayed.
`iconVisible`	`Boolean`	`true`	Determines whether the icon is displayed or not. If this value is `true` and `icon` is `null`, the icon will not be displayed.

The CSS selector in this use case is defined based on the object identifier as shown in the following example.

How to Customize the Icon Based on the Business Object Identifier

#id {
      icon: '@|image("customer.png")';
      iconVisible: true;
}

In this example, the business object with the object identifier id will use the icon customer.png.

How to Customize the Icon Used in a Table Cell

object."CustomIltNetworkElement/site" {
  iconVisible: true;
  icon: '@|image("site.png")';
}

In this example, the table cells in the column site will display the icon site.png for objects of the class CustomIltNetworkElement.

PREVIOUS NEXT