Hi, I need some help to get specific text to change color and size in a checkbox variable. In the example only the end of the text needs the modification "(access should only be granted to cost center manager and above)". I have tried a few examples and no luck. thank you:)
function onLoad(){
setTimeout(function(){
if(window != null){
// native
g_form.getControl('kha_budgeting').setAttribute('style', 'font-weight: bold;color:red');
}
else{
// portal
var aTags = this.document.getElementsByClassName("ng-binding");
var searchText = "access should only be granted to cost center manager and above"; // give the label name here
var found;
for (var i = 0; i < aTags.length; i++) {
if (aTags[i].textContent.toString() == searchText) {
aTags[i].style.fontWeight = 'bold';
break;
}
}
}
}, 3000);
}
Hi @Bradley Bush ,
Here's a workaround to achieve this.
Add the following code in an onLoad Client Script, ensuring the UI Type is set to All.
function onLoad() {
//Type appropriate comment here, and begin script below
var url = top.document.location.pathname;
var append = "<span style='color:red;font-weight:bold'> (access should only be grated to cost center manager and above)</span>";
if (url == '/sp') {
//portal
setTimeout(function() {
var label = top.document.getElementById("label_drop_ship"); // usually renders the element id in the format label<<backened name of the variable>>
var text = label.innerHTML;
label.innerHTML = text + append;
}, 500);
} else {
//native
var checkBoxSysId='b00c36b8830c2210357c71a6feaad3bd'; // sysId of the checkbox
var attr='[for="ni.IO:'+checkBoxSysId+'"]'; //attribute of the label where the text is appended
var check = g_form.getControl('drop_ship'); //get the HTML element
var checkLabelID = check.parentElement; //targets the parent element of check box
var checkBoxLabel=checkLabelID.querySelector(attr); // get the text of label
var text = checkBoxLabel.innerHTML; // do modification to the label
checkBoxLabel.innerHTML = text + append; // reassign the modified label
}
}
I am using URL pathnames here to differentiate between native and portal, make sure you add your portal suffix in the code.
Screenshot from my PDI
Native
Portal
I noticed that getControl() for a checkbox does not return the actual checkbox added to the catalog form. Instead, we need to find the label element where the text is rendered using the object returned by getControl().
I hope this helps you achieve your requirement. 😊
Mark this as Helpful / Accept the Solution if this helps so that it helps future hunters.
hi Diveshnaik,
This really helped to get the code started, i noticed that it writes the text put in the code instead of recognizing the text already used for the variable.
Hi @Bradley Bush ,
I'm glad my script was helpful to you! Please make the following changes to update the variable text.
function onLoad() {
//Type appropriate comment here, and begin script below
var url = top.document.location.pathname;
var append = "<span style='color:red;font-weight:bold'> (access should only be grated to cost center manager and above)</span>";
if (url == '/sp') {
//portal
setTimeout(function() {
var label = top.document.getElementById("label_drop_ship"); // usually renders the element id in the format label<<backened name of the variable>>
var text = label.innerHTML;
var updatedText=text.replace("(access should only be grated to cost center manager and above)",append);
label.innerHTML = updatedText;
}, 500);
} else {
//native
var checkBoxSysId='b00c36b8830c2210357c71a6feaad3bd'; // sysId of the checkbox
var attr='[for="ni.IO:'+checkBoxSysId+'"]'; //attribute of the label where the text is appended
var check = g_form.getControl('drop_ship'); //get the HTML element
var checkLabelID = check.parentElement; //targets the parent element of check box
var checkBoxLabel=checkLabelID.querySelector(attr); // get the text of label
var text = checkBoxLabel.innerHTML; // do modification to the label
var updatedText=text.replace("(access should only be grated to cost center manager and above)",append); // replace existing content in the variable text with styled test
checkBoxLabel.innerHTML = updatedText; // reassign the modified label
}
}
Mark this as Helpful / Accept the Solution if this helps so that it helps future hunters.
