cancel
Showing results for 
Search instead for 
Did you mean: 

Displaying a Process Timeline Diagram in Nintex Form

Workflow Hero
9 8 2,413

Following my previous post on Displaying a Process Flow Diagram in Nintex Form​ that I've shared how to include a JavaScript based Process Flow Diagram in Nintex Form. In this post, I am going to show how to include a "Timeline" diagram in Nintex Form using just pure CSS technique. As it uses just CSS, the Timeline will be viewable even in Nintex Mobile App. The outcome of this exercise, you will get to see the below form when form is being filled (i.e. New), and middle of the process timeline to show steps that were completed and yet to be completed.

The "Timeline" is presented by simply a CSS formatted HTML list as shown in the HTML code below, which in my example I have a total of 4 list items (i.e. <li>) to display a 4 process stages timeline.

<ul class="timeline" id="timeline">

  <li class="li" id=""Request Submitted">

    <div class="process">

      <span class="name">Request Submitted</span>

    </div>

    <div class="status">

      <span class="author">Initiator</span>

      <span class="date">06/06/2016</span>

    </div>

  </li>

  <li class="li" id="Manager Approval">

    <div class="process">

      <span class="name">Manager Approval</span>

    </div>

    <div class="status">

      <span class="author">Manager</span>

      <span class="date">06/06/2016</span>

    </div>

  </li>

  <li class="li" id="Finance Approval">

    <div class="process">

      <span class="name">Finance Approval</span>

    </div>

    <div class="status">

      <span class="author">Finance Manager</span>

      <span class="date">06/06/2016</span>

    </div>

  </li>

  <li class="li" id="Request Processed">

    <div class="process">

      <span class="name">Procurement</span>

    </div>

    <div class="status">

      <span class="author">Proc Admin</span>

      <span class="date">TBD</span>

    </div>

  </li>

</ul>

For the exercise, I have created a Sharepoint Custom List with just two columns (i.e. Title as Single line of text, and Timeline as Multiple lines of text). Timeline column is used to store the Timeline HTML source shown in the figure above. At each process stage, the Workflow will update the Timeline data to indicate if a process stage is "Complete", the "author" value is updated with the person who performed/completed the process stage, and the "date" of the process stage being completed.

Create a Nintex Form to be used as the Sharepoint List form of the custom list. Arrange the defaulted two controls (i.e. Title and Timeline) so that it looks similar to the diagram below. drag and drop a "Multi Line Textbox" to the red dotted box (i.e. on top of the "Timeline" list column control) as shown in the diagram below. The red dotted box area should have two form controls (i.e. Timeline and Multi Line Textbox), one on top of the other.

Configure the "Multi Lines Textbox" by copying the Timeline HTML code shown in the previous diagram to the Default value of the control, and configure the Appearance - Visible with value as shown in diagram below. The formula of the Appearance - Visible property is to show the "Multi Line Textbox" control when the List Column "Timeline" is empty or null.

Open the List Column "Timeline" control to add the Appearance - Visible property as shown in diagram below. The formula used in Appearance - Visible property is to show the "Timeline" list column control if it's not empty or null.

We will need to include our custom CSS to format the Timeline to the format we want. Here is the CSS code I used in my example

.timeline {

  list-style-type: none;

  display: flex;

  align-items: center;

  justify-content: center;

}

.li {

  transition: all 100ms ease-in;

}

.process {

  margin-bottom: 5px;

  padding: 10px 10px;

  display: flex;

  align-items: center;

  font-size: 12px;

  font-weight: 100;

}

.status {

  padding: 15px 10px;

  display: flex;

  align-items: center;

  flex-direction: column;

  border-top: 2px solid #CFD2D5;

  position: relative;

  transition: all 100ms ease-in;

}

.status .author {

  font-weight: 200;

}

.status .date {

  font-weight: 200;

  font-size: 12px;

}

.status:before {

  content: "";

  width: 25px;

  height: 25px;

  background-color: white;

  border-radius: 25px;

  border: 1px solid #8A8A8A;

  position: absolute;

  top: -15px;;

  left: 42%;

  transition: all 100ms ease-in;

}

.li.complete .status {

  border-top: 2px solid #22BB22;

}

.li.complete .status:before {

  background-color: #22BB22;

  border: none;

  transition: all 100ms ease-in;

}

.li.complete .status .author {

  color: #22BB22;

}

.li.complete .status .date {

color: #22BB22;

}

I have appended the code directly to the "Custom CSS" settings of the form as shown below

Now that we are done with the form design. In order to show the timeline with completion/timeline status, we will need to include actions in our workflow to update timeline data reflecting the status of the process stage(s)/timeline. I have attached my sample workflow for reference purposes, which carries the following summarised key actions.

1. Query the "Multi Line of Textbox" control value from Nintex Form.

As the "Timeline" list column control of type multiple lines of text does not allow us to set default value in form, we have introduced the "Multi Line of Textbox" form control without it "Connected" to the "Timeline" list column. We then perform this action (i.e. Query XML) to query the Nintex Form data, so we could save it to the Timeline list column in the workflow. Diagram below shows the configuration of the Query XML action, to which it queries the "/FormVariable/Timeline" and store the result to the workflow variable - "TimelineXML".

2. State Machine branch - "Decode TimelineXML"

The "Decode TimelineXML" state machine branch performs few actions to decode the TimelineXML data that was encoded, and saved the decoded HTML code back to TimelineXML variable. The outcoe of the actions are being logged in attached workflow, diagram below shows the my workflow performed actions to extract the Timeline data from the NFFormData, and the extracted Timeline data in encoded format, and the outcome of the "Encode TimelineXML" steps.

3. State machine branch - "Extract Timeline"

Performs actions to extract the four process stages list item represented by <li> tag in the html code. The 4 list items will be saved to "ProcessState1", "ProcessState2", "ProcessState3", and "ProcessState4" workflow variables respectively. With the extracted states data save in the workflow variables, we can update the data at different stages of the workflow. This is done by four "Query XML" actions, each to extract the <li> tag of each process timeline. the configuration of the Query XML is shown below.

4. The remaining "State 1" to "State 4" branches.

The remaining 4 branches in my example shows how the data of the "ProcessState1", "ProcessState2, "ProcessState3", and "ProcessState4" could be updated to reflect the status of the state. Once a "State" is updated, the reconstruction of the "TimelineXML" could be done by the "Update XML" action to reconstruct the content by replacing it with the updated workflow variables (i.e. ProcessState1, ProcessState2, ProcessState3, and ProcessState4). The "Update XML" configuration is shown below.

We concluded these branches' with the "Set Field in Current Item" action to set/update the "Timeline" list column with the newly constructed "TimelineXML" value. As "Timeline" list column is now updated with data highlighting the status of the timeline, the Form will now show it's content instead of the initialized "Timeline" form control data. (i.e. defaulted timeline data).

8 Comments
Not applicable

When I import that .nwp file in nintex Workflow designer, it's gives an error, "Imported workflows files must have an extension of '.nwf'"

Workflow Hero

This blog post is based on Nintex for Office 365. Same concept should work on on-prem, but the sample workflow is for office 365. Looks like you will need to create one for the on-prem, can u import it to office 365 to look at required actions and create one for on-prem?

Workflow Hero

Hi Kok Koon Gan‌,

Thanks for all your great articles!

You mentioned: As it uses just CSS, the Timeline will be viewable even in Nintex Mobile app.

Is this really correct? I ask this because of the following article mention no css is supported: https://community.nintex.com/community/tech-blog/blog/2015/06/01/nintex-mobile-html-formatting-suppo...

Cheers,

Rick

Workflow Hero

Hi Kok Koon Gan,


I have a Nintex form submitted by some users. Once the form is submitted, user gets notified and list workflow will be triggered.

This list workflow has three approval stages, I have a requirement , to create a landing page for user to come and check status of their submitted form.

Eg : On landing page for Form ID : 10, Approver A approved, Pending/Not Approved at Approver B, Same with Approver C

Is there any way, can we show this on a page or Nintex Form with some graphical representation same as your example ( if possible )?

This is what I am visioning,

If I am able to show them like this pic, it would be really great. I have designed this wire frame using Visio.

Workflow Hero

if you are to show that on the request form, the solution I shared is what it does I believe. I don't see any reason not..

Workflow Hero

Great post. These sorts of visualizations can really bring a nice professional and appealing look to for.s

It would be great for Nintex to start looking at controls like this to be baked into Forms by default.

A control that reads a Status column and updates itself as a result to visualize the process to the user as a timeline like you've done here.. It only needs to be simple to start with. 

Workflow Hero

Can anyone share how to indicated a completed step in the XML?  I cannot download the workflow to see the full details and am stuck how to update the code to show things are completed.

Workflow Hero

This is Great indeed. Given this HTML/CSS we can also use this with Rich text control which will display the same timeline on the form. Also, rather than creating a workflow to update the XML (which is a bit complex i think..) we can use Javascript to add/remove classes (in timeline's 'li') while evaluating a 'status' field. Anyways, it's the idea that matters, so a big thumbs up for this!