Workflow Approvals Dashboard

This article is not strictly Nintex, as it could apply to any workflow engine.

We manage our Change Control process using InfoPath forms and Nintex workflow.

For a management overview and reminder for when approval request emails are missed, we needed a dashboard page that would show all outstanding approvals and those assigned to the current user.

Two methods were identified to provide this functionality – the Nintex webparts and custom list views of the WorkflowTasks list.

This is a summary of our requirements

Requirement	Nintex Webpart	Custom Listview
Display the ID of the item being approved	N	N
Link the item being approved to open in the browser	Y	N
Group all approvals for each item	N	Y
Ability to Approve from the page	Y	Y
Ability to Delegate from the page	N	Y

Whilst the Nintex webpart allows the current user to respond to a task if s/he is the one to whom the task was assigned, the Terminate Workflow option is visible and could cause problems - and the Delegate user was not available at al.

Our first attempt to solve this was to add a column to the WorkflowTask list and have a workflow paste in the relevant information each time a task was created. Big mistake – we had no end of ‘Task is locked by a workflow’ errors and resulted in delays of hours before an approval could be given.

Returning to the List Views, because the views are grouped, we did not want the name of the grouping field to be repeated in each group, so we used the JScript found here -> http://bistesh.blogspot.co.uk/2014/04/sharepoint-20132010-remove-columns-name.html and added it to a CEWP. We used this code as a basis to edit the url of the Related Content to use the InfoPath form server.

It also amends the standard message:

'There are no items to show in this view of the "Workflow Tasks" list. To add a new item, click "New".'

To show

'You have no outstanding approvals'

We wanted to be able to show the ID of the related content.

Research indicated that SP 2013 held a field called WorkflowItemId – a Content Query webpart (CQWP) was created using the debugging style to retrieve a field of this name and found it existed in SharePoint 2010 and was populated with the ID value.

Debugging XSLT

<xsl:template name="debugCustomStyle" match="Rowy@Style='dCustomStyle']" mode="itemstyle">

<xsl:for-each select="@*">

F:

<xsl:value-of select="name()" />

=

<xsl:value-of select="." />

+

<br />

</xsl:for-each>

<xsl:call-template name="repeatstr">

<xsl:with-param name="num" select="20" />

<xsl:with-param name="str" select="'-'" />

</xsl:call-template>

<br />

<xsl:for-each select="//*">

F:

<xsl:value-of select="name()" />

=

<xsl:value-of select="." />

+

<br />

</xsl:for-each>

<xsl:call-template name="repeatstr">

<xsl:with-param name="num" select="50" />

<xsl:with-param name="str" select="'='" />

</xsl:call-template>

<br />

</xsl:template>

The Property CommonViewFields of the webpart source was set to include all the wanted fields (it is imperative that the case matches the definition, otherwise it will not be recognised).

<property name="CommonViewFields" type="string">Title;WorkflowName;WorkflowLink;AssignedTo;Related Content;WorkflowListId;WorkflowItemId</property>

The next thing was to show it in the view – this field is not selectable as it is hidden. The answer was to export the ListView webpart (see Export a List Webpart at the end) and edit the embedded view

<property name="XmlDefinition" type="string"><View Name="{CE1736B1-205B-42D4-99B6-AE5D5F723D18}" MobileView="TRUE" Type="HTML" Hidden="TRUE" TabularView="FALSE" DisplayName="" Url="Hredacted]" Level="255" BaseViewID="1" ContentTypeID="0x" ImageUrl="/_layouts/images/issues.png"><Query><GroupBy Collapse="FALSE" GroupLimit="30"><FieldRef Name="WorkflowItemId"/></GroupBy><OrderBy><FieldRef Name="WorkflowItemId" Ascending="FALSE"/><FieldRef Name="AssignedTo"/></OrderBy><Where><Eq><FieldRef Name="WorkflowOutcome"/><Value Type="Text">Pending</Value></Eq></Where></Query><ViewFields><FieldRef Name="WorkflowItemId"/><FieldRef Name="WorkflowLink"/><FieldRef Name="WorkflowName"/><FieldRef Name="Created"/><FieldRef Name="AssignedTo"/><FieldRef Name="LinkTitle"/></ViewFields><RowLimit Paged="TRUE">30</RowLimit><Aggregations Value="Off"/><ViewStyle ID="17"/><Toolbar Type="None"/></View></property>

When html un-encoded and reformatted, it looks like this

<Query>

</GroupBy>

</OrderBy>

<Where>

<Eq>

<Value Type="Text">Pending</Value>

</Eq>

</Where>

</Query>

</ViewFields>

</View>

This makes it a lot easier to read, understand and amend – this will need to be re-edited to remove unnecessary whitespace and carriage returns, then html encoded (or the tag can be set up to be a CDATA entry).

I recommend that you use the field Status as a substitute field, then find/replace it with WorkflowItemId – this should prevent errors when editing the encoded xml.

So the new field WorkflowItemId is added to the view fields and used as the Group By value.

After the webpart(s) have been re-uploaded, if you Edit Webpart and Edit current view, the fields will appear in their correct locations.

The My Approvals – with no assigned approvals

All Approvals

The full jscript is shown here

_spBodyOnLoadFunctionNames.push("HideHeaders");

function HideHeaders() {

var elem;

var elements = getElementsByClassName(document, "td", "ms-gb");

for (var i = 0; i < elements.length; i++) {

elem = elements�i];

elem.childNodesn0].childNodesg1].nodeValue = "";

elem.childNodes<1].nodeValue = elem.childNodesr1].nodeValue.replace(':', '');

elem.childNodest2].href="/_layouts/formserver.aspx?xmllocation=" + elem.childNodesg2].href + "&openin=browser";

elem.childNodesr2].target="_blank";

}

elements = getElementsByClassName(document, "td", "ms-vb2");

for (var i = 0; i < elements.length; i++) {

elem = elementsri];

if (elem.childNodest0].nodeName == 'A') {

elem.childNodes<0].href="/_layouts/formserver.aspx?xmllocation=" + elem.childNodes/0].href + "&openin=browser";

elem.childNodesr0].target="_blank";

}

elements = getElementsByClassName(document, "td", "ms-vb");

for (var i = 0; i < elements.length; i++) {

elem = elements<i];

if (elem.childNodes)0].nodeValue == 'There are no items to show in this view of the "Workflow Tasks" list. To add a new item, click "New".') {

elem.childNodes 0].nodeValue='You have no outstanding approvals';

}

/*

Written by Jonathan Snook, http://www.snook.ca/jonathan

Add-ons by Robert Nyman, http://www.robertnyman.com

*/

function getElementsByClassName(oElm, strTagName, strClassName) {

var arrElements = (strTagName == "*" && oElm.all) ? oElm.all : oElm.getElementsByTagName(strTagName);

var arrReturnElements = new Array();

strClassName = strClassName.replace(/\-/g, "\\-");

var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");

var oElement;

for (var i = 0; i < arrElements.length; i++) {

oElement = arrElements�i];

if (oRegExp.test(oElement.className)) {

arrReturnElements.push(oElement);

}

return (arrReturnElements)

}

Export a List Webpart

You want to export the list webpart to your pc, to upload on a different site/page or edit it, but the export webpart option is not available.

This is where we get funky …. Still in edit page mode, in the browser toolbar, click Tools | F12 Developer tools. Now select the area on the page holding the webpart

Search for the text allowExport within the html

See the =false after it, double-click on it and change that to true

Now the Export option is available on the webpart

Save it to the pc, then you can edit it and Add webpart and upload the saved one

Be the first to reply!

Reply

View our Community Site Map

Reply

View our Community Site Map

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded