Prerequisite: You must be familiar with the Syntax used in Tutorials and have already created an extension and for this specific Tutorial you must also be familiar with CSS code.

In this Tutorial, using the markup HTML, we will show you how to highlight in the Console the status of a Ticket, with different colors, based on the status value.

For this, you need to write some CSS which need to be embedded in an iTop extension module. We assume that you are familiar with CSS code. Below an example of such CSS, which change the display for status is state 'closed', 'rejected' and 'accepted'

my-module/asset/css/console.scss

/* Define a few colors */
$status-default-color: #757575 !default;
$status-default-bg-color: #DEDEDE !default;
$status-accepted-color: #FFFFFF !default;
$status-accepted-bg-color: #2F855A !default;
$status-closed-color: #757575 !default;
$status-closed-bg-color: #DEDEDE !default;
 
/* Define a reusable set of properties */
%status-icon{
        margin-right: 0.5rem;
        content: "";
        font-family: "Font Awesome 5 Free";
        font-weight: bold;
}
 
/* In any object-details screen, if there is an enum field called 'status' */
.object-details{
        *[data-attribute-type="AttributeEnum"][data-attribute-code="status"]{
                .field_label{
                        vertical-align: baseline;
                }
                .field_value{   /* Modify the display of the value */
                        display: inline-block;
                        padding: 0.25rem 0.6rem;
                        color: $status-default-color;
                        background-color: $status-default-bg-color;
                        border-radius: .25rem;
                }
                /* if the value is 'accepted' use some colors */
                &[data-value-raw="accepted"]{
                        .field_value{
                                color: $status-accepted-color;
                                background-color: $status-accepted-bg-color;
                                /* and add a font awesome icon in front of the label */
                                &::before{
                                        @extend %status-icon;
                                        content: "\f4fc";  /* code of the font */
                                }
                        }
                }
                /* if the value is 'rejected' or 'closed' use other colors */
                &[data-value-raw="rejected"],
                &[data-value-raw="closed"]{
                        .field_value{
                                color: $status-closed-color;
                                background-color: $status-closed-bg-color;
                                font-weight: bold;
                        }
                }
        }
}

In order to be sure that your CSS is used by iTop, you need to add it to the iTop theme

itop_design

  <branding>
     <themes>     
        <theme id="light-grey">
           <stylesheets>
              <stylesheet id="my-module" _delta="define">my-module/asset/css/console.scss</stylesheet>
           </stylesheets>
        </theme>
     </themes>
  </branding>

Of course, you can expend this to define colors for every values of the status. You can make this for any enum, not only the status. You can restrict this behavior to Ticket classes…

Because the Theme are not working in the Portals in iTop 2.7, you cannot use the XML configuration to tell iTop when to upload the CSS for the portal. So we will use another mean.

In the main.my-module.php or any .php file of your module. Using the new extension logic, lets put it under

 my-module/src/Hook/PortalUIExtension.php

And here is the code to copy:

src/Hook/PortalUIExtension.php

<?php
 
use iPortalUIExtension;
use RequestStatusBeautifierPortal;
use Symfony\Component\DependencyInjection\Container;
use utils;
 
/* AbsractPortalUIExtension implements iPortalUIExtension with no behavior */
class MyModulePortalUIExtension extends AbsractPortalUIExtension
{
    const MODULE_CODE = 'my-module';
 
    public function GetCSSFiles(Container $oContainer)
    {
        $sModuleCSSFolderRelPath = 'env-'.utils::GetCurrentEnvironment().'/my-module/asset/css/';
        $sModuleCSSFolderAbsPath = utils::GetAbsoluteModulePath(static::MODULE_CODE).'asset/css/';
        $sAdditionalSCSSFileRelPath = $sModuleCSSFolderRelPath.'portal-additional.scss';
        $sAdditionalSCSSFileAbsPath = $sModuleCSSFolderAbsPath.'portal-additional.scss';
 
        $aCSSFiles = array(
                utils::GetAbsoluteUrlModulesRoot().static::MODULE_CODE.'/asset/css/portal.scss',
        );
 
        // Checking if additional CSS is already compiled
        clearstatcache();
        if (!file_exists($sAdditionalSCSSFileAbsPath) && (is_writable($sModuleCSSFolderAbsPath)))
        {
            // Get additional SCSS
            $sAdditionalSCSS = '@import "../'.$sModuleCSSFolderRelPath.'variables.scss";'."\n";
            $sAdditionalSCSS .= RequestStatusBeautifierPortal::GetAdditionalSCSS();
            file_put_contents($sAdditionalSCSSFileAbsPath, $sAdditionalSCSS);
 
            $aCSSFiles[] = utils::GetAbsoluteUrlAppRoot().utils::GetCSSFromSASS($sAdditionalSCSSFileRelPath);
        }
        return $aCSSFiles;
    }
}

You can nearly copy-paste this code, changing the:

• class name
• module_code
• name and path of the .scss files

Do not forget to add this Hook file name in the model

model.my-module.php

SetupWebPage::AddModule(
        __FILE__, // Path to the current file, all other file names are relative to the directory containing this file
        'my-module/1.0.0',
        array(
                'datamodel' => array(
                        'model.my-module.php',
                        'src/Hook/PortalUIExtension.php',
[...]