Hide the title of variable set on form load

[abhishekte]

Hi,

I have variable set which is attached to multiple item. I want to hide the Title of variable set on the catalog form for some of the items on form load.

Please guide me on the same, how we can access the title of variable set on form load and hide on that catalog item without affection the other item.

[justin_drysdale · Accepted solution]

You can accomplish this using DOM methods.

First you need the id of the variable set label.   You can inspect the page source for the id, or you can use a browser developer tool.   Please see the screenshot to see what I mean.   I made a variable set display it's label, I opened up the catalog item and then I right clicked it and selected 'Inspect Element'.   I am in Firefox.

Once you have the id, in my case it is: 'label_fd95e715c443d1005579b0616ee82249' you can hide all child nodes under it.   This is the easiest way!

var el = document.getElementById('label_fd95e715c443d1005579b0616ee82249');//lookup and use your var set id

while( el.hasChildNodes() ){

       el.removeChild(el.lastChild);

}

So you would add this bit of code (with your var set's id) to an onLoad and it should strip it from the page.

[abhishekte]

Hi Justin,

That works perfect:)

Please also let me know if instead of hiding, I have to change the title of variable set to some other name dynamically.How we can do that?

Thanks

[justin_drysdale]

You want to adjust the text label?   It takes more work but it is very doable.

A quick note about DOM manipulation.   You aren't changing the label as it is stored in Service-Now on the variable set, you are simply altering it after it is rendered in the browser.   It is a client side edit.

The easiest way for this is to probably use jQuery, but here is the plain javascript way:

1. Click the Label and 'Inspect Element' just like before.

2. This time you are looking for the 'Unique Selector' for the label.   First drill down in the web dev tool until you can see your Text Label in the page's HTML (Screenshot1).

3. Right click on the HTML tag containing the label, and click 'Copy Unique Selector' (SCreenshot2).

4. In your code, paste in the Unique Selector.   It should have copied to you clipboard.

5. Build your code following this model:

var path = <Unique Selctor>;

var el = document.querySelector(path);

el.innerHTML = "Your New Text Label!!!";

    For my instance, it looks like this:

var path = '#label_fd95e715c443d1005579b0616ee82249 > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1)';

var el = document.querySelector(path);

el.innerHTML = "Your New Text Label!!!!";

  (See Screenshot3).

How to add spacing to your label:

Adding empty spaces in your new text string will not add spaces to the label.   You have to add what is called a non breaking whitespace.

In javascript use the escaped non breaking whitespace character: '\xA0'.

Code for my instance using spacing (See SCreenshot4):

var path = '#label_fd95e715c443d1005579b0616ee82249 > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1)';

var el = document.querySelector(path);

el.innerHTML = "\xA0\xA0\xA0\xA0Your New Text Label!\xA0\xA0!\xA0\xA0!!\xA0\xA0\xA0";

Final note:   If you change the variable ordering (or variable set ordering) on the page AFTER you implement this code, you will have to adjust this code with a new Unique Selector to match where you moved the variable to.

Please let me know if you have any questions.

[abhishekte]

Genius:)

Just one more thing..when i copy the "unique inspector" I am getting only "#label_id"..please let me know what

"td:nth-child(1) > table:nth-child(1) > tbody:nth-" this line is doing and query selector is doing.

Thanks a lot for your help.Is there any doc where I can see all these concepts:)