Dynamics CRM-like status bar

Inspiration

Webcon Day 2019 is behind us. This is the largest event organized by WEBCON, dedicated to the digital transformation in practice.

As a year ago, people interested in the WEBCON solutions met together at the ICE Krakow Congress Center to share their ideas.

This year at the conference I was very intrigued by the implementation of stage bar functionality such as can be found in Dynamics CRM software. In the original it looks something like this:

I decided to try to implement a similar solution by myself. Below is a description of my approach.

Disclaimer

I would describe my CSS skills as “below average”. I am aware that it can certainly be done much better than my implementation. That is why I strongly encourage constructive criticism in the comments and share your opinions and thoughts. And now we can start!

Solution Implementation

First, I prepared an SQL query that will return the necessary HTML to display the steps on the form. The assumption I made:

• Display only steps that are displayed on the form in the status panel
• Do not display final negative steps and flow control steps

Below is a query that returns the appropriate HTML:

select cast (replace(replace((select  '<div class="' + case
when {STP_ID} = STP_ID then
'activestep' else 'nonactivestep' end
 + '"><div class="center">' + STP_Name + '</div></div>' from (
Select top 100 STP_ID, STP_Name from wfsteps 
where STP_WFID = {WF_ID}
and STP_ShowInDiagram = 1
and STP_TypeId not in (6, 7)
order by STP_Order
)subquery
for XML PATH('')
), '<', '<'), '>','>') as nvarchar(max)) as Column1

Query is used in data row form field just like this:

If you face any error in form field advanced configuration, try this method.

Then I prepared the appropriate CSS, which will allow a nice presentation of the information returned in the data row form field. To apply style I suggest append additional style in head section using JavaScript on page load.

$('head').append('<style>  .center { width: 100%; text-align: center; padding: 13px;  } .activestep { zoom: 1.2; -moz-transform: scale(1.2); font-size: 16px; line-height:1.5; font-weight: bold; color: white; text-align: right; min-width: 200px;  height: 50px; position: relative; background-color:#409455; display: inline-block; margin-left: 20px; margin-right: 20px; } .activestep:after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: 25px solid white; border-top: 25px solid transparent; border-bottom: 25px solid transparent; } .activestep:before { content: ""; position: absolute; right: -25px; bottom: 0; width: 0; height: 0; border-left: 25px solid #409455; border-top: 25px solid transparent; border-bottom: 25px solid transparent; }  .activestep:hover { -webkit-box-shadow: 0px 10px 13px -14px #000000, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -14px #000000, 5px 5px 15px 5px rgba(0,0,0,0);  }  .nonactivestep {  font-size: 16px; lineheight:1.5; text-align: right; color: white; min-width: 200px;  height: 50px; position: relative; background-color:#7b8f80; display: inline-block; margin-left: 25px; margin-right: 20px; } .nonactivestep:after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: 25px solid white; border-top: 25px solid transparent; border-bottom: 25px solid transparent; } .nonactivestep:before { content: ""; position: absolute; right: -25px; bottom: 0; width: 0; height: 0; border-left: 25px solid #7b8f80; border-top: 25px solid transparent; border-bottom: 25px solid transparent; }  .nonactivestep:hover { -webkit-box-shadow: 0px 10px 13px -14px #000000, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -14px #000000, 5px 5px 15px 5px rgba(0,0,0,0);  }   </style> ');

To achieve this, I packed the code shown above in one form rule, which I named “Stage Bar Style”. And used on page load:

Finally, just add a style for the field name and field value like below. In addition the status panel may be hidden in field matrix if there is no need to display it.

Summary

This short proof confirms that you can create a generic component that displays the current status of the workflow element. Of course, this is only a simple proof that requires refinement, but you can expand the idea presented by me on your own. As part of the extension, you may:

• improve CSS to get better look and behavior
• add links on buttons (for example to historical form view on chosen step)
• improve SQL command (for example left join to translations table and return step name in user language context variable “{USERLAN}”)