1. You can find UI Configuration under Access Manager.

Getting to UI Configuration

The Access manager requires that you have rights to the "Access Manager" license. YOU decide what permissions it needs, not us, that is discussed elsewhere.) The Access Manager is on the Configuration page

Start by opening the main menu

Start by clicking on the main menu button on the left panel, top left portion.

If the menu button isn't visible, you are likely on a screen too narrow to see everything, press on the left pointing gold button to take you so you can see the menu button.

Once the menu is up, the exact location of the configuration button depends on how wide your window is and how many options you have access to. On most it will be at the top of the 2nd or 3rd column of the menu but on a cell phone or narrow window, it will be down partway in the first column.

Then from there you choose the Access Manager, or what we call the funny green key

You can also click on the right hand V button in the main menu (if you don't already have it open), noting if you do it this way, you can directly pick the Access Manager tool that you want to go into.

From there click on the UI Configuration button

You can then proceed to clicking the expand/collapse toggles in the following order:

Work Order > Edit Page > Summary > Details > [details-columns] > [details-column-2] > Priority.

2. Click Style: Edit, and a pop-up will appear, where you can put the script to implement your preferred configuration.

3. In the Smart Style section of the pop-up, paste in the script for the styling behavior you want:

a. Style Priority based on Priority's own value (e.g., red for High, purple + bold for Immediate):

if (!props) return null;
 
if (props.value === "1") {
    return { color: "red" };
}
if (props.value === "0") {
    return { color: "purple", fontWeight: "bold" };
}
 
return null;

• props.value is the Priority field's own current value, since this code sits inside Priority's Style Editor, props always refers to Priority itself.
• It checks that value against "1" and "0" and returns a style object matching each case.
• return null at the end means "no match, leave the default styling alone." The !props guard at the top just prevents an error if props hasn't loaded yet.

At Priority 1

At Priority 0

At other priorities

b) Style Priority based on Category's value (e.g., orange + bold for specific category codes, everything else gets green):

if (!entity) return null;
 
const categoryID = entity.categoryID;
const orangeCategories = ["ADMIN", "HOUSE", "EQUIP", "SECURITY"];
 
if (orangeCategories.includes(categoryID)) {
    return { color: "orange", fontWeight: "bold" };
}
 
return { color: "green" };

• orangeCategories now holds the list of codes that should get the orange + bold treatment: ADMIN, HOUSE, EQUIP, SECURITY.
• If categoryID matches one of those, it returns { color: "orange", fontWeight: "bold" }.
• Anything else falls through to the final return { color: "green" }, which is now the catch-all for every category not in the list.

At specific category values

At everything else