Using iTop

Creating your iTop

iTop Customization

"How to" examples

User Interface

Automation & Ticket management

Portal Customization

You are browsing the documentation for iTop 3.1 which is not the current version.

Consider browsing to iTop 3.2 documentation

Colors on enum values

Prerequisite: You must be familiar with the Syntax used in Tutorials and have already created an extension.

How to associate a color on each value of an enum
min version:

The iTop 3.0 brings new capabilities to highlight particular values of enum, when displaying an object alone or within a list.

In order to take advantage of this new capability on classes which you would have define yourself or brought by another extension or built-in iTop but you don't like the colors that we set, we will details the XML changes to do for this.

iTop Essential & Professional

If you have a support contract with Combodo, then changing an enum attribute colors can be done in a few clicks in the ITSM Designer.

Check this video tutorial :

Text transcript :

  • Open the ITSM Designer
  • Open the enum class in the “Classes” tab
  • Select the enum field
  • Click on the pencil icon corresponding to the value to customize
  • Set color and icon (to find the icon code, you can follow the help link)
  • Validate
  • Repeat for each value to change
  • Push the modifications to your iTop instance

iTop Community

Style on value

Within the datamodel.xxxx.xml file, add a style tag to the enum values

  • Within this style tag, be cautious that the 3 below tags are all mandatory.
  • The two colors tags can contain a CSS formatted color,
    • You can even use existing iTop SCSS variable, using this syntax:
    • $ibo-color-blue-400
    • $ibo-transparent
    • $ibo-body-text-color default color of iTop text
    • $ibo-field--value--color color of the text of a field (in form and list)
  • For decoration class:
itop-design / classes / class@xxx / fields
        <field id="priority" xsi:type="AttributeEnum">
            <value id="must">
              <code>must</ code>
                <decoration_classes>fas fa-chess-king</decoration_classes>
            <value id="want">
              <code>want</ code>

Using default

In this example, I will show how you can just provide an icon and no other type of highlighting, using the transparent and the default text color…

itop-design / classes / class@xxx / fields
        <field id="status" xsi:type="AttributeEnum">
            <value id="planned">
              <code>planned</ code>
            <value id="development">
              <code>development</ code>
            <value id="delivered">
              <code>delivered</ code>
                <decoration_classes>far fa-bell</decoration_classes>  
            <value id="obsolete">
              <code>obsolete</ code>
                <decoration_classes>far fa-bell-slash</decoration_classes>

Default in iTop

Here is a summary of how it is done on a simple iTop Community version, for the class UserRequest.

itop-design / classes / class@UserRequest / fields
    <field id="status" xsi:type="AttributeEnum">
          <value id="new">
             <style _delta="define">
          <value id="waiting_for_approval">
             <style _delta="define">
                <decoration_classes>fas fa-hourglass-half</decoration_classes>
Example of what is set by default on the UserRequest class
code value Code & Color Icon
new #2C5382 dark blue
assigned #2C5382 dark blue
waiting_for_approval #F6AE55 orange fas fa-hourglass-half
pending #F6AE55 orange fas fa-hourglass-half
approved #689F38 green fas fa-user-check
resolved #689F38 green fas fa-check
closed #689F38 green
rejected #B83280 purple fas fa-user-times
escalated_tto #B83280 purple fas fa-fire
escalated_ttr #B83280 purple fas fa-fire
<default> #2B6CB0 blue fas fa-user-check

Visual Example

Here is a visual example of what can be done on any class.

  • Note that a class can have multiple Enum attributes and they each can have their own color logic

3_1_0/customization/enum-colors.txt · Last modified: 2023/07/21 10:19 (external edit)
Back to top
Contact us