Styling UI Action Buttons

cmcclendon
Mega Guru

Greetings all. I came across a simple way to colorize those dull, dreary UI Actions that can sometimes be hard to see in the form header. For this example, I'm using a Chrome browser with a submitted change request that is in a state of New.

  1. Load an existing change request that is in the New state and open the browser's element inspector (CTRL-SHIFT-C).
  2. Hover over the "Request Approval" button in the header and click, then copy the element 's ID to the clipboard.
  3. Create a UI Formatter and a UI Macro and name them something relevant. Reference the wiki for details.
  4. find_real_file.png
  5. find_real_file.png
  6. Open the change request form and place the formatter anywhere on the page as it will have no elements or space. I placed mine on the last row of the second column.
  7. Creating the style in the UI Macro serves as an override for the button element as it loaded after the UI Action. Make sure the name of the element referenced in the style tag is the same as the one we copied to the clipboard in Step 2.
  8. find_real_file.png
  9. Let me know how this works for you.
4 REPLIES 4

cmcclendon
Mega Guru

Here's an update that simplifies this even more. I've learned that the element id's referenced in the style tags are actually a property of the UI Action, called the "Action name".   If this field is left blank, then you will get a sys_id and you will not be able to reference it from the code. I went in and gave an existing UI Action on the Change form a name and now I don't even need to inspect elements, as I did in the previous post, I can just insert the Action name into the style tag.



find_real_file.png


Here's my new UI Macro/Formatter code:



find_real_file.png




Enjoy!


Well its been a while since this was posted. But I just tried this and I didn't get it to work.
This article is also referenced in on of SN's KBs, which last was updated Jan 2022
https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1004974

amlanpal
Kilo Sage

Hi Chris,



Please find the helpful threads regarding your requirement below:


1. Set Colour of Unique Form Button


2. Change UI action button color



I hope this helps.Please mark correct/helpful based on impact


Neither of these links point to anything