Styling UI Action Buttons
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-27-2016 05:48 AM
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.
- Load an existing change request that is in the New state and open the browser's element inspector (CTRL-SHIFT-C).
- Hover over the "Request Approval" button in the header and click, then copy the element 's ID to the clipboard.
- Create a UI Formatter and a UI Macro and name them something relevant. Reference the wiki for details.
- 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.
- 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.
- Let me know how this works for you.
- 8,614 Views
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎01-03-2017 10:48 AM
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.
Here's my new UI Macro/Formatter code:
Enjoy!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎08-30-2023 04:34 AM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-19-2017 01:10 PM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎10-24-2024 08:57 AM
Neither of these links point to anything