Trying to change background color of single line textfield in ServicePortal and unable to do thT

CharanKulukuri
Tera Contributor

I want to change the background color of single line text field for a catalog item on ServicePortal when user is trying to submit a form.

Basically it should work on an onChange of other field. the field I want to change is just a single line text and Presetted value in it. it will be visible based on the other field.

I tried Isolated script true and false and also tried g_form.setStyle and getControl nothing worked.

1 ACCEPTED SOLUTION

Rakesh_M
Kilo Sage

Hello @CharanKulukuri ,
Modify and add these lines of code as per requirement

function onChange(control, oldValue, newValue, isLoading) {
   if (isLoading || newValue == '') {
      return;
   }
	var title=this.document.getElementById("sp_formfield_text");
	if(newValue=="1")
	{
		title.style.backgroundColor="blue";
	}
	else
	{
			title.style.backgroundColor="red";
	}
}

// here Element ID is "sp_formfield_+VariableName". 
//Prefix "sp_formfield_" is  concatenated
//if variable name is subnet_retrieved then element ID is "sp_formfield_subnet_retrieved"


As mentioned by @Ankur Bawiskar DOM manipulation can cause scripts to break or generate unexpected errors especially after platform upgrades.
 

View solution in original post

7 REPLIES 7

Ankur Bawiskar
Tera Patron

@CharanKulukuri 

on portal you can use DOM but DOM is not recommended

see this link and enhance it further

How to make text of Label type in Bold 

💡 If my response helped, please mark it as correct and close the thread 🔒— this helps future readers find the solution faster! 🙏

Regards,
Ankur
Certified Technical Architect  ||  10x ServiceNow MVP  ||  ServiceNow Community Leader

Hi Ankur,

My field is not a label type it is single line text field I am using it dynamically based on other fields.
User will select any value from choice field - Subnet
Screenshot 2026-04-08 145420.png

 

once it is selected we run a flow via script and It will take sometime to run and give the ouputs.
Once subnet is selected I gave a string in single line text field

Screenshot 2026-04-08 145521.png

So based on the script and configuration I want that change accordingly. 



script:

var currentSubnet = null;

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        return;
    }

    currentSubnet = newValue;

    g_form.clearOptions('subnet_ranges');
    g_form.addOption('subnet_ranges', '', '-- Select --');
    g_form.setValue('subnet_retrieved', 'RETRIEVING SUBNET RANGES PLEASE HOLD. This may take up to 2 minutes.');
 
    var gaStart = new GlideAjax('global.subnetRangesUtils');
    gaStart.addParam('sysparm_name', 'startSubnetLookup');
    gaStart.addParam('sysparm_subnet', newValue);

    gaStart.getXMLAnswer(function(answer) {
        var res = JSON.parse(answer);

        if (res.status !== 'started') {
            g_form.setValue('subnet_retrieved', 'Failed to start subnet lookup');
            return;
        }

        pollSubnetLookup(newValue, 0);
    });
}

function pollSubnetLookup(subnet, attempt) {
    var maxAttempts = 40;
    var intervalMs = 3000;

    if (subnet !== currentSubnet) {
        return;
    }

    if (attempt >= maxAttempts) {
        g_form.setValue('subnet_retrieved', 'Timed out retrieving subnet ranges');
        return;
    }

    var gaPoll = new GlideAjax('global.subnetRangesUtils');
    gaPoll.addParam('sysparm_name', 'checkSubnetLookup');
    gaPoll.addParam('sysparm_subnet', subnet);

    gaPoll.getXMLAnswer(function(answer) {
        var res = JSON.parse(answer);

        if (subnet !== currentSubnet) {
            return;
        }

        if (res.status === 'pending') {
            setTimeout(function() {
                pollSubnetLookup(subnet, attempt + 1);
            }, intervalMs);
            return;
        }

        if (res.status === 'error') {
            g_form.setValue('subnet_retrieved', res.message || 'Subnet lookup failed');
            return;
        }

        if (res.status === 'ready') {
            var data = JSON.parse(res.data);
            var ranges = data.ranges;

            g_form.clearOptions('subnet_ranges');
            g_form.addOption('subnet_ranges', '', '-- Select --');

            for (var i = 0; i < ranges.length; i++) {
                var label = ranges[i].start_addr + ' - ' + ranges[i].end_addr;
                g_form.addOption('subnet_ranges', label, label);
            }

            g_form.setValue('subnet_retrieved', 'Subnet ranges retrieved');
        }
    });
}


So I dont want to use label. as I should create 4 fields If i go with label
 
 

 





@CharanKulukuri 

I shared sample script.

it's obvious you need to enhance it as per your requirement.

Regards,
Ankur
Certified Technical Architect  ||  10x ServiceNow MVP  ||  ServiceNow Community Leader

iftekhar_mirza
Tera Guru

Hi @CharanKulukuri ,
Please refer to the following link. It may help you understand how to apply styles to fields in Service Portal.
Make a variable type Label bold on Service portal 
If you found this useful mark it as helpful
Regards,
Iftekhar