How to hide a specific css class in form view

[georgechen]

Hi folks,

I have an embedded list in a form layout, in the list there is a '+' sign on the new row which is an indicator to the users that they can insert a new row, however, some of our clients consider this '+' sign is kind of confusing as they cannot click on it.

Therefore I have been understanding how to achieve this;   firstly I raised a community forum at https://community.servicenow.com/message/1242922?et=watches.email.thread#1242922   and it replied a approach of using "document.getElementById('pass the actual DOM Id').style.display="none";"

however, what I found is that the DOM id keeps changing each time when the form gets rendered.       Breaking the element down, I further found a class named 'list_edit_image icon-add btn disabled' would not change each time it loads (see screenshot below)

If manually set css code in my Chrome Debugger,

the '+' successful removes which is great!

So I tried to incorporate this css into an onLoad client script to fetch the class, and then attempt to set the style.display='none'

var x= document.getElementsByClassName("list_edit_image.icon-add.btn.disabled");

x.style.display='none';

this has failed, but when alerting the x object, it pops up

the object was found.   I also tested the x.length which returns 0

I am not sure if I am on the right track on this , but wondering if any one could advise.

Thanks in advance.

[georgechen]

found a way to fix this is to add another wait time

function onLoad() {

window.setTimeout(hideSign,3000); //wait to load embeded list on the form

function hideSign(){

function WaitSeconds() {

}

var list=document.getElementsByClassName('list_odd list_row list_add');

//alert(list.length);

if (list.length>0) {

for (var i = 0; i < list.length; i++) {

if(list[i].id) {/window.setTimeout(WaitSeconds,3000); //wait to load embeded list on the form

      document.getElementById(list[i].id+'_edit').style.display="none";

}

}

}

}

}

after failing the while loop

if (list.length>0) {

for (var i = 0; i < list.length; i++) {

if(list[i].id) {

do {

      document.getElementById(list[i].id+'_edit').style.display="none";

} while (document.getElementById(list[i].id+'_edit').style.display!="none");

}

}

}

[georgechen]

Hey Raju

don't worry about it; when I changed the wait time to 5 seconds, it seems to improve the effectiveness.

window.setTimeout(hideSign,5000); //wait to load embeded list on the form.

Very appreciated your efforts and enthusiasm for my question.  

You are the legend of my day!

[georgechen]

Hello Raju

This + sign has worked good until I tested it on a non-admin user. do you happen to know if any access control that could be tuned or so?

Thanks again.

[Raju Koyagura]

I don't think it will depend on any access controls because its a global UI script and moreover we didn't include any condition in the script to verify the user roles.

[georgechen]

I think you are right, from my experiment it seems to relate to the Waiting time "window.setTimeout(hideSign,3000);"

3000 doesn't work well, 5000 has been stable, and 3800 is the minimum waiting time it appears to work.  

After adding an addition timer to the script, it has seemed to work for non-admin users ?!     Below is the updated script