Any better way to code Catalog Variables with CSS?

[Lon Landry4]

I need to make a field in bold with green text on the Catalog Item, RITM, & Task.

The field is a reference field, the script is an onLoad Client script.
The client script has 

The below code works on catalog item form view but not on RITM or portal:

(plus I am guessing that by using the $, I am using Dom manipulation)

function onLoad() {
setTimeout(function() {
this.$('#first_asset span').css('color', 'green');
this.$('#first_asset span').css('font-weight', 'bold');
}, 200);

I have also tried below code but also only works in Catalog Item form view, but not on Task or RITM:

function onLoad(){

setTimeout(function(){ 

if(window != null){

// native

g_form.getControl('first_asset').setAttribute('style', 'font-weight: bold;color:green');

}

else{

// portal

var aTags = this.document.getElementsByClassName("ng-binding");

var searchText = "1st Asset";

var found;

for (var i = 0; i < aTags.length; i++) {

if (aTags[i].textContent.toString() == searchText) {

aTags[i].style.color = 'green';

break;

}

}

}

}, 3000);

}

Any ideas?

[Iraj Shaikh · Accepted solution]

Hi @Lon Landry4 

The issue you're encountering is likely due to the differences in the DOM structure and the way client scripts are executed between the ServiceNow platform UI (for Catalog Item and RITM) and the Service Portal. The `$` notation you're using is indeed a shorthand for jQuery, which may not be available or behave differently in the Service Portal.

Here's a revised version of your script that should work across both the platform UI and the Service Portal. This script checks if the `window` object has a `g_form` object available, which indicates that you're in the platform UI. If not, it assumes you're in the Service Portal and uses AngularJS elements to find and style the field.

function onLoad() {
    // Function to apply styles
    function applyStyles(element) {
        element.style.fontWeight = 'bold';
        element.style.color = 'green';
    }

    // Apply styles for platform UI
    function stylePlatformUI() {
        var field = g_form.getControl('first_asset');
        if (field) {
            applyStyles(field);
        }
    }

    // Apply styles for Service Portal
    function styleServicePortal() {
        var elements = document.querySelectorAll('.field-element[data-field="first_asset"]');
        elements.forEach(function(element) {
            var referenceSpan = element.querySelector('.ref-field');
            if (referenceSpan) {
                applyStyles(referenceSpan);
            }
        });
    }

    // Check if we are in the platform UI or Service Portal
    if (typeof g_form !== 'undefined') {
        stylePlatformUI();
    } else {
        // Wait for the Service Portal to render the field
        setTimeout(styleServicePortal, 2000);
    }
}

Please note the following:

1. The `data-field="first_asset"` selector is used to find the field in the Service Portal. You may need to adjust this selector based on the actual `data-field` attribute value for your reference field in the Service Portal.

2. The `querySelector` method is used to find the specific element within the field that should be styled. The class `.ref-field` is a placeholder and may need to be adjusted based on the actual class used in your Service Portal's theme for reference fields.

3. The `setTimeout` function is used to delay the execution of the Service Portal styling code to allow for the field to be rendered. You may need to adjust the delay time based on the actual rendering time of your Service Portal.

Please test this script thoroughly in a sub-production instance before deploying it to production, as client-side scripting can have unintended side effects if not implemented correctly.

Please mark this response as correct or helpful if it assisted you with your question.

[Lon Landry4]

Thanks for the help, I guessed AngularJS may provide a way forward, but was not sure if it would be a good investment of time researching & learning. I think this weekend I will revisit AngularJS training...

[Lon Landry4]

Great explanation!