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. 
5. 
6. Open the change request form in the designer 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. 

UPDATE: 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!

This document was generated from the following discussion: Styling UI Action Buttons