nick_darlington

Using JQuery to quickly test out adhoc UI Theme changes

Blog Post created by nick_darlington Employee on May 10, 2016

I have commented in a few threads previously how UI Theme changes with CSS can be used to make desired adjustments to the display.

 

Usually this request is due to a 'button' or feature of Clarity that isn't being rolled out or used, and it is desired to hide this item from everybody.

 

The approach of going to update the UI Theme and refresh/reload the page can take some cycles, so here's a shortcut you can try given that the Clarity UI uses and loads JQuery in the background you may like.

 

I use this approach in Internet Explorer 11 so my disclaimer is that the steps and results may vary on other browsers.  The effect, if it works, should be immediate but temporary, clearing itself upon a refresh of the browser page (not a refresh of the javascript line you entered).

 

1) Find the item you wish to impact on the page, right-click it, and choose Inspect Element

 

This brings up IE's Dev Tools (F12) function and highlights the item you were selecting in the UI.

 

 

2) Identify from the HTML the parts you wish to impact.

 

This part requires some understanding of CSS and HTML in general, but you can choose to impact <elements> with the same name, style classes in the class="..." attribute, or elsewhere.

 

3) Modify the following string for your desired CSS changes.

 

javascript:var v=$("css_selectors").css("css_attribute", "value");

 

Where your CSS would normally look like this:

css_selectors {
  css_attribute: value;
}

 

E.g. the following CSS would remove ALL BUTTONS from ALL PAGES (not recommended to put into your UI Theme directly):

 

button {
  display: none;
}

 

-or-

 

.ppm_button {
  display: none;
}

 

4) To try this out on a page without wrecking your UI Theme and taking time to apply it / undo it, take this string instead and put it into your browser's address bar on the page you want to test it on:

 

javascript:var v=$("button").css("display", "none");

 

Notes:

 

You may find when pasting this into your browser's address bar that it strips off the javascript: text from the beginning - this is a deliberate act by the browser that may force you to manually type it back in as a safeguard before you press <enter>.

 

I would advise, for simplicity, converting any double-quote " characters into single-quote ' characters in the javascript and vice-versa.

 

At this point if you are unhappy with the results, bring the buttons back again with this:

javascript:var v=$("button").css("display", "inline");

 

Or this, which would produce an unusual effect on most pages:

javascript:var v=$("button").css("display", "block");

 

And if you wanted to be more specific, such as the recent example I had of wanting to remove only the Update Baseline button of the Task List page (which normally shows on projects where you have performed a baseline operation once at least already), you can target it with this:

javascript:var v=$(".ppm_button[onclick*='projmgr.updateTaskBaselineClick']").css("display", "none");

 

To then translate this back into the corresponding CSS once you're happy with the results, it would look like this:

 

.ppm_button[onclick*="projmgr.updateTaskBaselineClick"] {
  display: none;
}

 

In that last example you'll see the managing of the transition between single and double quotes between the JS and CSS too.

Outcomes