Need to highlight short description field of incident with some background color(blue/red etc)

[sumitcshend]

Need to highlight short description field of incident with some background color(blue/red etc) in service operation workspace.

function onLoad() {

 var short_desc = g_form.getControl('short_description');

short_desc.style.backgroundColor = 'blue';

       }

I tried running above client script, changes are getting reflected in default incident overview form but not visible in service operation workspace.

I need to highlight test incident text circled in attached screenshot. Can someone please help here.

 

[sumitcshend]

This can be done easily in UI builder, but I dont want to use UI builder as it will ask to create replica of the form.

[yuvarajkate]

I would personally recommend  UI Builder approach because:

1. It provides a structured way to modify widgets and their styles without interfering with the DOM.
2. Direct DOM manipulation in workspaces can be brittle and prone to breaking during upgrades or changes.

However, if you want to avoid replicating forms in UI Builder, the below methods using client scripts and injected CSS should work.

1.  Inject CSS Dynamically

if (g_event.isInteractive()) {
    var shortDescriptionElement = document.querySelector('[sn-field-name="short_description"]');
    if (shortDescriptionElement) {
        shortDescriptionElement.style.backgroundColor = 'blue'; // Set your color
        shortDescriptionElement.style.color = 'white'; // Adjust text color for contrast
    }
}

2.  Use Workspace Scripting API

// Event listener to customize the field
CustomEvent.observe('workspace-form-loaded', function() {
    var fieldElement = document.querySelector('[sn-field-name="short_description"]');
    if (fieldElement) {
        fieldElement.style.backgroundColor = 'red'; // Background color
        fieldElement.style.border = '1px solid black'; // Optional border
    }
});

Hope you find this useful.

[vijaya Adagane]

Have you got any solution for this?