Sidebar

Using iTop

Creating your iTop

iTop Customization

"How to" examples
DataModel

User Interface

Automation & Ticket management

Portal Customization

:: Version 3.2.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

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_2_0/customization/highlight-critical-objects.txt · Last modified: 2024/06/20 17:28 (external edit)
Back to top
Contact us