UI Action buttons on Top Header & Footer

anupamg
Tera Guru

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 - find_real_file.png

bottom - find_real_file.png

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

1 ACCEPTED SOLUTION

Ankur Bawiskar
Tera Patron
Tera Patron

@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:

find_real_file.png

Regards
Ankur

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

View solution in original post

9 REPLIES 9

Mark Roethof
Tera Patron
Tera Patron

Hi there,

Can you share what you've set up?

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark
2020, 2021 ServiceNow Community MVP
2020, 2021 ServiceNow Developer MVP

---

LinkedIn
Community article, blog, video list

 

Kind regards,

 

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

 

~444 Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

LinkedIn

Hi Mark,

Thanks for the quick reply.

Here is my client script:

function transformButton(buttonID, buttonBackgroundColor, buttonTextColor, buttonIconName) {
try {
//Find the button(s) by ID and change the background color
$$('button[id =' + buttonID + ']').each(function(elmt) {
elmt.style.backgroundColor = buttonBackgroundColor;
if (buttonTextColor) {
elmt.style.color = buttonTextColor;
}
if (buttonIconName) {
elmt.addClassName(buttonIconName);
//Add some spacing between the icon and button label
elmt.innerHTML = ' ' + elmt.innerHTML;
}
});
} catch (e) {}
// Get a list of button elements
var bottomButtons = document.getElementsByClassName('form_action_button');

for (var i=0; i<bottomButtons.length; i++) {
// Check that the button is not in the header
// if (bottomButtons[i].className == 'form_action_button action_context') {
// Check for the Request Approval button
if (bottomButtons[i].getAttribute('id') == 'csignal_case') {
// Hide the button
bottomButtons[i].style.display = 'none';
// }
}
}

I just cheated scripts from the forum

Let me know if further questions.

Thanks

Anupam

Hi

Did you check, if your top and bottom buttons have different IDs?

Maybe you need to set the color and icon separately for each of them.

So, try to find out the ID of the bottom button in the same way you did for the top button.

Then call your client script one more time for your bottom button.

Let me know if that answers your question and mark my answer as correct and helpful.

BR
Dirk

Maik Skoddow
Tera Patron
Tera Patron

Hi @anupamg ,

basically there is a system property glide.ui.buttons_bottom for hiding bottom buttons, but disabling this property has no effect.

So for general disabling the bottom buttons you can create a onLoad Client Script, and disable "Isolate Script" (put the field on form if not already there):

find_real_file.png

Kind regards
Maik

If my answer replied your question please mark appropriate response as correct so that the question will appear as resolved for other users who may have a similar question in the future.