So i have a requirement to update the colour scheme used for the Process Breadcrumbs on Change and Problems to our company colours. I have created a new theme but looking at how to correctly update the colours for these properties.
Just want to know what the correct process is for changing this colour scheme, i have found the CSS property for the Teal Grouping as per below
OOB CSS Properties
"--now-color_grouped--teal-0": "212,240,240",
"--now-color_grouped--teal-1": "145,217,217",
"--now-color_grouped--teal-2": "81,194,194",
"--now-color_grouped--teal-3": "63,151,151",
"--now-color_grouped--teal-4": "46,111,111",
"--now-color_grouped--teal-5": "28,68,68",
Am i correct in saying that we update these properties to reflect a new colour scheme or is there an alternative?
Hi
You're limited in your ability to do this because the arrow end of the formatter is actually an image. It's technically possible to do what you're asking but you need to have a separate image of each color and then manipulate the style of the formatter after it is rendered using a client script on the form.
The customized solution :
Here is the fix for Eureka or any other older releases, Please follow the steps below:
#1. Update the UI Macro name "process_flow".
URL : https://<instance-name>.service-now.com/nav_to.do?uri=sys_ui_macro.do?sys_id=4bcb4b840a0a0b9f00ae822ff0cef724
#2. Take the below code — We are adding some styles and changing the source for images being used.
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<style>
table.process_flow_formatter {
margin-left: -9px;
}
table.process_flow_formatter tr td,
table.process_flow_formatter tr td.process_flow.future,
table.process_flow_formatter tr td.process_flow.current,
table.process_flow_formatter tr td.process_flow.past {
color: #ffffff;
height: 24px;
font-size: 15px;
}
table.process_flow_formatter tr td.process_flow.current {
background-color: #d1232b;
}
table.process_flow_formatter tr td.process_flow.future,
table.process_flow_formatter tr td.process_flow.past {
background-color: #847c7c;
}
</style>
<link rel="stylesheet" type="text/css" href="styles/process_flow_formatter.cssx"></link>
<tr>
<td colspan="2" width="100%" nowrap="true">
<div>
<table class="process_flow_formatter" width="100%" cellpadding="0" cellspacing="0">
<tr>
<g2:flow_formatter var="jvar_flows" table="$[${ref_parent}.getRecordClassName()]" current="$[${ref_parent}]" />
<j2:forEach items="$[jvar_flows]" var="jvar_flow">
<td class="process_flow $[jvar_flow.getParameter('state')]" title="$[jvar_flow.getLabel()]">
$[jvar_flow.getLabel()]
</td>
<td width="16" height="100%">
<img style="height:24px; width:21px; margin:0px; padding:0px;"
src="chevron_$[jvar_flow.getParameter('state')]_$[jvar_flow.getParameter('next_state')].pngx" />
</td>
</j2:forEach>
</tr>
</table>
</div>
</td>
</tr>
</j:jelly>
#3. Upload the images and make sure your images are named like these:
chevron_current_.png
chevron_current_future.png
chevron_current.png
chevron_future_.png
chevron_future_future.png
chevron_past_current.png
chevron_past_past.png
#4. You should get the end result as show below:
Before:
After:
Why you should not be change the process formatter if you are in Fuji or newer release?
Solution Referred from this thread!
Mark my answer correct & Helpful, if Applicable.
Thanks,
Sandeep
