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).
