Process Flow dynamicly shows a Process Formatter...

DrewW · ‎10-07-2011

So I needed the Process Flow formatter to show a Flow Formatter dynamically and since some of the java code was not available I updated the UI Macro "process_flow" to do what I needed. Including it all here for those who mite be interested in such an enhancement.

Add the field "u_view_condition" with a type of "conditions" to the sys_process_flow table.

Here is the new code for the UI Macro "process_flow"



<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <link rel="stylesheet" type="text/css" href="styles/process_flow_formatter.cssx"></link>
    <tr>
        <td colspan="2" width="100%" nowrap="true">
            <div>
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <g2:flow_formatter var="jvar_flows" table="$[__ref__.getRecordClass()]" current="$[__ref__]" />
                        <g2:evaluate var="jvar_table" jelly="true">
                            var afterCurrent = false;
                            var tableText = "";
                            var show = [];
                            var label = "";
                            var gr = new GlideRecord("sys_process_flow");
                            gr.addQuery("table", current.sys_class_name);
                            gr.orderBy("order");
                            gr.query();
                            while(gr.next()){
                                //If you do not do this you get the last value of gr.label in all elements, do not know why exactly.
                                label = new String(gr.label);
                                //Check to see if the record should be displayed.  If so add element to array.
                                //Array info
                                //   show[] -> Each element is a flow formatter record to display
                                //      show[][0] -> Label for the flow formatter to display.
                                //      show[][1] -> state: used to indicate the state of the flow formatter.
                                //              Possible values: past, current, future
                                //      show[][2] -> next_state: used to indicate the state of the next flow formatter.
                                //              Possible values: past, current, future
                                if(Packages.com.glide.script.Filter.checkRecord(current, gr.u_view_condition)){
                                    show.push(new Array(3));
                                    show[show.length - 1][0] = label;
                                    //Check if this is the current flow that should be green/selected.
                                    if(Packages.com.glide.script.Filter.checkRecord(current, gr.condition)){
                                        show[show.length - 1][1] = "current";
                                        show[show.length - 1][2] = "future";
                                        //Once current is found update the previous element
                                        if(show.length > 1){
                                            show[show.length - 2][2] = "current";
                                        }
                                        afterCurrent = true;
                                    } else {
                                        if(afterCurrent){
                                            show[show.length - 1][1] = "future";
                                            show[show.length - 1][2] = "future";
                                        } else {
                                            show[show.length - 1][1] = "past";
                                            show[show.length - 1][2] = "past";
                                        }
                                    }
                                }
                            }
                            //clear the next_state element so that the process flow has a pointer at the end.
                            show[show.length - 1][2] = "";
                            if(!afterCurrent){
                              show[show.length - 1][1] = "future";
                            }
                            //Build the table
                            for(i in show){
                                tableText += '<td class="process_flow ' + show<i>[1] + '" title="' + show<i>[0] + '">';
                                tableText += show<i>[0];
                                tableText += '</td>';
                                tableText += '<td width="16" height="100%">';
                                tableText += '    <img style="height: 24px; width: 21px; margin: 0px; padding: 0px;" src="images/chevron_' + show<i>[1] + '_' + show<i>[2] + '.pngx" />';
                                tableText += '</td>';
                            }
                            tableText;
                        </g2:evaluate>
                        $[jvar_table]
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</j:jelly>

DrewW · ‎06-04-2014

For those of you how would like to use the updated version that I put on ServiceNow Share with out having to load the update set here is the updated UI Macro code.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<tr>

<div>

<tr>

<g2:flow_formatter var="jvar_flows" table="$[__ref__.getRecordClass()]" current="$[__ref__]" />

<g2:evaluate var="jvar_elements" jelly="true" object="true">

var afterCurrent = false;

var tableText = '';

var show = [];

var label = "";

var gr = new GlideRecord("sys_process_flow");

gr.addQuery("table", current.sys_class_name);

gr.orderBy("order");

gr.query();

while(gr.next()){

//Check to see if the record should be displayed. If so add element to array.

//Array info

// show[] -> Each element is a flow formatter record to display

// show[].label -> Label for the flow formatter to display.

// show[].state -> used to indicate the state of the flow formatter.

// Possible values: past, current, future

// show[].next_state -> used to indicate the state of the next flow formatter.

// Possible values: past, current, future

if(GlideFilter.checkRecord(current, gr.u_view_condition)){

var item = new Object();

item.label = gr.getValue("label");

//Check if this is the current flow that should be green/selected.

if(GlideFilter.checkRecord(current, gr.condition)){

item.state = "current";

item.next_state = "future";

//Once current is found update the previous element

if(show.length > 1){

show[show.length - 1].next_state = "current";

}

afterCurrent = true;

} else {

if(afterCurrent){

item.state = "future";

item.next_state = "future";

} else {

item.state = "past";

item.next_state = "past";

}

show.push(item);

}

//clear the next_state element so that the process flow has a pointer at the end.

show[show.length - 1].next_state = "";

if(!afterCurrent){

show[show.length - 1].state = "future";

}

show;

</g2:evaluate>

<j2:forEach items="$[jvar_elements]" var="jvar_el">

<g2:evaluate jelly="true">

var label = jelly.jvar_el.label;

var state = jelly.jvar_el.state;

var next_state = jelly.jvar_el.next_state;

</g2:evaluate>

$[label]

</td>

</td>

</j2:forEach>

</tr>

</table>

</div>

</td>

</tr>

</j:jelly>

View solution in original post

Bill_Collins · ‎10-18-2011

Nice! Thank you.

DrewW · ‎10-18-2011

Added comments

DrewW · ‎11-07-2011

Found another quirk and fixed it. The last image would not load if there was no current item found, i.e. the green one.

garyopela · ‎11-12-2012

Hey, this is exactly what I was looking for, thanks! I have a question though. I copied the existing process_flow ui macro and created a new one, process_flow2. Then i put the contents of your post above into the XML body of the new UI Macro. Then, under System UI -> Formatters, I created a new one called "Change Process Flow" so I could then add this to Change Request, without having to modify the existing UI Macro.

Whenever the page loads, i can see by the HTML that it works, however, it only puts HTML into the area where the process flow is, instead of the graphics and what not. Instead of the arrows with green/grey on them, I get the following:

I can tell by the pngx files that it is grabbing the correct ones, i'm just wondering why it is not rendering the HTML and instead simply is displaying the HTML itself?

Not Yet Requested

Approval Requested

Approved

Complete

garyopela · ‎11-12-2012

Well shoot, I keep trying different things to get it to show my HTML code, but the wiki keeps trying to render the HTML here. Ironically, this is the converse of my issue in Service-Now, where it won't render the HTML...

It is showing the td (table datacells) part of the code but not rendering the buttons.



<td class="process_flow current" title="Not Yet Requested">Not Yet Requested</td><td width="16" height="100%"><img style="height: 24px; width: 21px; margin: 0px; padding: 0px;" src="images/chevron_current_future.pngx"></img></td><td class="process_flow future" title="Approval Requested">Approval Requested</td><td width="16" height="100%"><img style="height: 24px; width: 21px; margin: 0px; padding: 0px;" src="images/chevron_future_future.pngx"></img></td><td class="process_flow future" title="Approved">Approved</td><td width="16" height="100%"><img style="height: 24px; width: 21px; margin: 0px; padding: 0px;" src="images/chevron_future_future.pngx"></img></td><td class="process_flow future" title="Complete">Complete</td><td width="16" height="100%"><img style="height: 24px; width: 21px; margin: 0px; padding: 0px;" src="images/chevron_future_.pngx"></img></td>