Change order guide tab

[jrcarter1000]

On the order guide, when you are on the Choose Options screen, the only way you can tell what tabs have mandatory fields is by the small asterisk. Does anyone know of a way to add to that, say something like change the background color of the tab?

[tony_fugere]

You can likely hack the UI Page and Macros that build that page to highlight the background or something else, but I use the word "HACK" here to communicate that it will be a customization that you will own and ServiceNow will not support.

[jrcarter1000]

Any idea where it might be? That's my biggest issue currently, is that I can't figure out where it decides what tab has mandatory fields, and where it puts the '*' next to the title of the tab.

[tony_fugere]

Open your Order Guide in a new window to find out what UI Page it is using by inspecting the URL.

Hint: it's com.glideapp.servicecatalog_cat_item_guide_view

From there, start to dig into that UI Page and unfold the answer.

Unfortunately, you'll learn that com.glideapp.servicecatalog_guide_tabs.xml is what is building this and that is an XML template that we cannot customize or access at all.

So, like I said, it would be serious hack to modify this.

If you are still interested hacking this together, I would suggest using an HTML inspector like Firefox, Chrome or Safari have built-in. From there you'll learn that these tab elements have a common class that can be utilized for finding them and modifying their CSS. Then, you'll be putting a Client Script on the UI Page mentioned at the beginning to hack the CSS into those elements.

Here's what I hacked together quickly. Feel free to tinker. Notice it is relying on the ASTERISK to understand which tab to highlight in red. To me, that is a hack job. If ServiceNow changes their functionality in that tabs.xml template, we'll have to update our code.

document.observe('dom:loaded', function() {
  $$('.guide_tab').each(function(a) {
    if(a.innerHTML.toString().indexOf('*') == 0) {
      a.innerHTML = a.innerHTML.slice(1);
      a.style.backgroundColor = 'red';
    }
  });
});

[jrcarter1000]

Excellent. Thanks for the info.