How can I change colors on the Process Flow Formatter based on the different values?

marcelorsc · ‎04-17-2012

I would like to change the green color on the process flow formatter to red for an specific value. Has anyone come across this yet?

Thanks,
Marcelo R. S. Correia
Principal Business Consultant
EMC Corporation

Mark Stanger · ‎04-18-2012

I'm not sure how thrilled I am with this solution, but I've figured out how to do this. The first thing you'll need to do is make a copy of that arrow-point image colored the way you want. Then you can upload the new image via the 'System UI - Images' module. The out-of-box image can be found here...

https://demo.service-now.com/images/chevron_current_.pngx

Once you've done that, then you can set up a client script to modify the arrow color and arrow head image for the currently-selected items in the process flow formatter. Here are the script lines that should work. The script points to 'chevron_current_red.pngx' as the arrow head image. You should change this to be the path to your uploaded image. The second line changes the bar color.



$$('img[src*="chevron_current"]')[0].src='chevron_current_red.pngx';
$$('.process_flow.current')[0].style.backgroundColor='#920000';

Radhika Aluru1 · ‎03-19-2013

Hi Marcelo,

I tried to implement this in my environment. After adding the image and client script, I am getting the attached image. It has three images and all three are in different color.

can you please advise if there is any way to acheive single colour?

Regards,
Radhika

Kishore8 · ‎07-26-2017

Hey ,

How did you get it?

Could you please help on this one,...

How to add colors can you please your explanation with screen shots/ script

where i have to write script and what i have to do....

CapaJC · ‎03-19-2013

Problem is, there are what looks like eight different chevron images that get used for the state separators in that thing. The boundary between two states is colored on either side based on the color of both the previous and next blocks.

Any attempt to change this would probably need to change all eight of those images.

chevron_current_.png
chevron_current_current.png
chevron_current_future.png
chevron_future_.png
chevron_future_current.png
chevron_future_future.png
chevron_past_current.png
chevron_past_past.png

Manjul Katare · ‎10-16-2015

Hi All,

Here is the fix if you are on Dublin/Eureka or any prior releases. But if you are in Fuji OR planning to upgrade to Fuji then I would advice NOT to use this fix as UI design in Fuji is really good.....Trust me you don't wanna customize it !

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>

<tr>

<div>

<tr>

<g2:flow_formatter var="jvar_flows" table="$[${ref_parent}.getRecordClassName()]" current="$[${ref_parent}]" />

<j2:forEach items="$[jvar_flows]" var="jvar_flow">

$[jvar_flow.getLabel()]

</td>

<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?

As you can see there is no image being used, its more modern and blends well with forms. it really feels like iOS design

Hope this helps!

-Manjul