Requirement add the text for major incident beside the number field

[Gayatri0506]

How can we add the text for major incident beside the number Field please view the attachment for move clearance.

Any suggestion will be really helpful.

[Community Alums]

Hi @Gayatri0506 ,

This can be done by manipulating the DOM model, which is not recommended by ServiceNow, as it can lead to maintenance and compatibility issue and even lead to performance issues.

Create a Onload Client Script-

function onLoad() {
    // Get the number field
    var numberField = g_form.getControl('number');
    if (numberField) {
        // Create a container div to hold both the number field and the badge
        var container = document.createElement('div');
        container.style.display = 'inline-flex';
        container.style.alignItems = 'center';
        container.style.width = '100%';
        // Move the number field into the container
        numberField.parentNode.insertBefore(container, numberField);
        container.appendChild(numberField);
        numberField.style.flex = '1 0 auto'; // Ensure the number field keeps its size
        // Create the badge element
        var badge = document.createElement('span');
        badge.innerHTML = 'Major Incident';
        badge.style.color = 'white'; // Change the text color to white
        badge.style.fontWeight = 'bold';
        badge.style.marginLeft = '10px'; // Add some space between the number and the badge
        badge.style.backgroundColor = '#ff4500'; // Change the background color to orange
        badge.style.padding = '2px 5px'; // Add padding to match the styling
        badge.style.borderRadius = '3px'; // Add rounded corners
        badge.style.whiteSpace = 'nowrap'; // Prevent wrapping
        badge.style.flex = 'none'; // Ensure the badge does not affect the size of the number field
        container.appendChild(badge);
    }
}

The above script will help you in getting this done. See the below screenshot as i made the similar change in my PDI.

There is one more approach to this is by creating a Macro and then calling it in the client script-

Macro would be something like this-

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:ui="jelly:ui">
    <span style="color: white; font-weight: bold; white-space: nowrap; background-color: orange; padding: 2px 5px; border-radius: 3px;">Major Incident</span>
</j:jelly>

Note: As I said before this is completely custom solution and its manipulation of DOM which is not recommended by ServiceNow.

If my response has resolved your query, please consider giving it a thumbs up ‌‌ and marking it as the correct answer‌‌!

Thanks & Regards,

Sanjay Kumar

[Community Alums]

Hi,

Hope you are doing well.

Have you tried the above solution?

If yes then please consider giving it a thumbs up ‌‌ and marking it as the correct answer‌‌!

Thanks & Regards,

Sanjay Kumar