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 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.
- 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.
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
Hey Chuck. The answer is yes, it works fine in a scoped app.
Enjoy!
Thanks Chris. I'll have to keep tinkering. I must have something wrong somewhere in my scoped app UI macro or formatter. Hopefully it's something simple I've overlooked after hours and hours of developing other stuff.
This is great stuff!
One challenge I see is the button at the bottom of the form. For some reason the font-color attribute isn't working. See image: Any ideas?
Top of Form: White font
Bottom of form: black font:
My macro:
UPDATE: I'm using the same technique for my update set picker by changing the width property. I also switched from using the foreground/background colors to simply adding a slight border, which makes it appear more like a 3D button. So use the same style section, just find the id's of the different elements you want to change. This techniques migrated from Geneva to Jakarta with no hiccups.
Very inspiring article! You can in fact do much more styling in the backend form, even to the extent of applying external CSS. I wrote a post about it here.
