Issue with g_form.getControl() in Client Script

[Service now11]

Hi,

I have a "satge" field that I want to highlight with a red background when the value is "waiting_for_approval". The script works fine in the instance but not in the Service Portal. Can anyone suggest an alternative approach to achieve this in the Service Portal?

function onLoad() {  

    var stage = g_form.getValue('stage');

     if (stage === 'waiting_for_approval') {

        var message1 = '** CAUTION** Ticket is awaiting approval. Do NOT fulfill/handle (yet) UNLESS manual approval has been achieved and documented in the Work notes.';

        var message2 = message1.fontcolor("white");

        g_form.addErrorMessage('<span style="background-color: red; font-weight: bold; padding: 5px;">' + message2 + '</span>');

       g_form.setReadOnly('stage', true);

         var stageLabel = g_form.getControl('stage');

        stageLabel.style.backgroundColor = "red";

        stageLabel.style.fontWeight = "bold";  

    }

}

Thanks

[Martin Friedel]

Hello, 

have you set UI Type value to All on the Client Script?

There is also g_form.focus() method that do similar thing, you can try:

ServiceNow documentation: g_form.flash() 

If my answer helped you, please accept it as correct and helpful, thank you 👍
Martin

[Debasis Pati]

Hello @Service now11 ,

Create a custom widget to display and control the form fields. Inside the widget, you can add a script that will check for the waiting_for_approval status and dynamically style the background of the stage field.

(function() {
// Assuming you are passing the 'stage' value into the widget from the record or form
var stage = data.stage;

// Function to change background color if stage is "waiting_for_approval"
function updateStageStyle() {
if (stage === 'waiting_for_approval') {
// Apply red background and bold text
angular.element(document.querySelector('#stageField')).css({
'background-color': 'red',
'font-weight': 'bold',
'color': 'white'
});
// Display the message
angular.element(document.querySelector('#warningMessage')).html(
'** CAUTION** Ticket is awaiting approval. Do NOT fulfill/handle (yet) UNLESS manual approval has been achieved and documented in the Work notes.'
);
}
}

// Wait for the document to be ready
angular.element(document).ready(function() {
updateStageStyle();
});
})();

In your widget's HTML template, you'll need to define a placeholder for the stage field and the warning message.

<div>
<!-- Display the Stage field -->
<input id="stageField" type="text" ng-model="data.stage" disabled>

<!-- Display the warning message if needed -->
<div id="warningMessage" style="padding: 5px; font-size: 14px;"></div>
</div>


Please mark it as helpful/correct if this helps you.

Regards,
Debasis

[Ankur Bawiskar]

@Service now11 

g_form.getControl() doesn't work in portal.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Service now11]

Hi @Ankur Bawiskar ,

Ok. Is there any other approach?  I have tried g_form.focus() is also not functioning.