Sidebar

Using iTop

Creating your iTop

iTop Customization

"How to" examples
DataModel

User Interface

Automation & Ticket management

Portal Customization

:: Version 3.3.0 ::

Highlight critical objects

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

learning:
Make critical objects within a class more visible to users
level:
Intermediate
domains:
PHP, UI
min version:
2.1.0

In this usecase, we want to highlight some object instances within a class of object, because they are more critical than others and should be identified as such by iTop users.

class:dbobject
/**
 * Get the icon representing this object
 * 
 * @api
 *
 * @param boolean $bImgTag If true the result is a full IMG tag 
 * (or an empty string if no icon is defined)
 *
 * @return string Either the full IMG tag ($bImgTag == true) or just the URL to the icon file
 * @throws ArchivedObjectException
 * @throws CoreException
 */
public function GetIcon($bImgTag = true)
{
        $sCode = $this->ComputeHighlightCode();
        if($sCode != '')
        {
                $aHighlightScale = MetaModel::GetHighlightScale(get_class($this));
                if (array_key_exists($sCode, $aHighlightScale))
                {
                        $sIconUrl = $aHighlightScale[$sCode]['icon'];
                        if($bImgTag)
                        {
                                return "<img src=\"$sIconUrl\" style=\"vertical-align:middle\"/>";
                        }
                        else
                        {
                                return $sIconUrl;
                        }
                }
        }         
        return MetaModel::GetClassIcon(get_class($this), $bImgTag);
}

Background color in a list

This explain how to highlight critical objects within a list, based on one of its value.

In the below example, we will set different colors on members of a Team, based on his role in the team.

class:lnkPersonToTeam
/**
 * This function returns a 'hilight' CSS class, used to hilight a given row in a table
 * There are currently (i.e defined in the CSS) 4 possible values HILIGHT_CLASS_CRITICAL,
 * HILIGHT_CLASS_WARNING, HILIGHT_CLASS_OK, HILIGHT_CLASS_NONE
 * It can be overridden by derived classes like here
 *
 * @param void
 *
 * @return String The desired higlight class for the object/row
 */
        public function GetHilightClass()
        {
                // Possible return values are:
                // HILIGHT_CLASS_CRITICAL, HILIGHT_CLASS_WARNING, HILIGHT_CLASS_OK, HILIGHT_CLASS_NONE        
                $current = parent::GetHilightClass(); // Default computation
 
                switch ($this->Get('role_id_friendlyname')) {
                    case 'Manager': $new = HILIGHT_CLASS_CRITICAL; break;
                    case 'Support Agent': $new = HILIGHT_CLASS_OK; break;
                    case 'Team leader': $new = HILIGHT_CLASS_WARNING; break;
                    break;
                }
                // Compare the parent returned and new hilight class and keep the highest
                @$current = self::$m_highlightComparison[$current][$new];
 
                return $current;
        }

That example is not very safe as the role is a text string which can be modified on iTop without guessing that it would impact the display

Changing the colors

Using an undeclared SCSS variable as the value for another variable is deprecated. To ensure compliance with Sass specifications, please use static values (e.g., Hex codes) or variables that you defined beforehand.

Those table colors are controlled by 2 SCSS variables which can be modified in the Designer or with an iTop extension

Hilight class table tag
HILIGHT_CLASS_CRITICAL red
HILIGHT_CLASS_WARNING orange
HILIGHT_CLASS_OK green
$ibo-vendors-datatables--row-highlight--colors:(
        'red': ($ibo-color-red-100),
        'danger': ($ibo-color-danger-200),
        'alert': ($ibo-color-red-200),
        'orange': ($ibo-color-orange-100),
        'warning': ($ibo-color-warning-200),
        'blue': ($ibo-color-blue-200),
        'info': ($ibo-color-information-200),
        'green': ($ibo-color-green-100),
        'success': ($ibo-color-success-200),
) !default;

Assuming you want darker colors…

<variable id="ibo-vendors-datatables--row-highlight--colors" _delta="define">('red': ($ibo-color-red-200),'danger': ($ibo-color-danger-300),'alert': ($ibo-color-red-300),'orange': ($ibo-color-orange-100),'warning': ($ibo-color-warning-200),'blue': ($ibo-color-blue-200),'info': ($ibo-color-information-200),'green': ($ibo-color-green-100),'success': ($ibo-color-success-200),)</variable>

A single value in a single row no carriage return, blanks are not an issue, the rest of the syntax should be aligned to this example.

Other SCSS variable for left border of each row
$ibo-vendors-datatables--row-highlight--first-cell--colors:(
        'red': ($ibo-color-red-300),
        'danger': ($ibo-color-danger-400),
        'alert': ($ibo-color-red-400),
        'orange': ($ibo-color-orange-300),
        'warning': ($ibo-color-warning-400),
        'blue': ($ibo-color-blue-400),
        'info': ($ibo-color-information-400),
        'green': ($ibo-color-green-300),
        'success': ($ibo-color-success-300),
) !default;
3_3_0/customization/highlight-critical-objects.txt · Last modified: 2026/07/23 16:11 by 127.0.0.1
Back to top
Contact us