UI Action buttons on Top Header & Footer

[anupamg]

Hi

We have UI Action Buttons on top of the screen which we have color coded and also added icons on the buttons thru client script (thanks to SN Guru for the script).

It is working as expected on the top in the header but not on the bottom of the form.

Top - 

bottom - 

Please help if we could show same color coding & icon on the bottom as on the top or if we could hide tabs at the bottom altogether.

Thanks in anticipation

Anupam

[Ankur Bawiskar · Accepted solution]

@anupamg 

you must have used DOM manipulation for this and used HTML id for the button

I assume you referred this article from SN Guru

Change the Color of Form Buttons

This would apply color to only the top button as it will search with only particular HTML id

The bottom button has HTML id as actionName_bottom

to make it work for bottom add this code in your client side script

var buttonID = 'show_first_page';

try{
	// top buttom
	//Find the button(s) by ID and change the background color
	$$('button[id=' + buttonID + ']').each(function(elmt) {
		elmt.style.backgroundColor = '#CC0000';
		elmt.style.color = '#ffffff'; //make the button text white
	});

	//
	$$('button[id=' + buttonID + '_bottom' +  ']').each(function(elmt) {
		elmt.style.backgroundColor = '#CC0000';
		elmt.style.color = '#ffffff'; //make the button text white
	});

}catch(e){}

Output:

Regards
Ankur

[DirkRedeker]

Hi @Ankur Bawiskar 

Thanks for the details. Can you tell me, what tool you took on screen to find out about the names of the Button IDs?

Did you use Browser Built-In inspector, what is the "JavaScript Executor"?

Thanks and BR

Dirk

[Ankur Bawiskar]

Hi Dirk,

For determining the HTML ID I used browser inspect element

For using the Javascript executor I used this shortcut for chrome Ctrl + Shift + J

Regards
Ankur

[bhuvana]

Hi Ankur,

i have followed the steps provided by SN Guru it is working on Form Level not on workbench

var items = $$('BUTTON').each(function(item) {
if (item.innerHTML.indexOf('Resolve') > -1) {
item.hide();
}
});

this was the code i am using to hide resolve when major incident was accepted, but once we resolve we want to show Un-Resolve Button , but this was not working becoz it contains Resolve tried below scenarios but still no luck

 var items = $$('BUTTON').each(function(item) {
if (item.innerHTML == 'Un-Resolve') {
item.show();
}
}); 

[anupamg]

You guys are awesome. Many thanks for all the guidance 

Regards

Anupam