How to show Process Flow in Service Portal?

[saptashwa_chakr]

I have created a process flow for incident table. I have also created a custom form for incident submission in service portal. Now how can I apply the process flow in that form or make same conditional Process Flow while I am viewing the record which I just inserted?
Please help me out.

[Sardar shaik2]

Create a new custom widget 

Under HTML :-

<div class="container">
<div class="process">
<div class="process-row">
<div class="process-step" ng-repeat="d in c.data.choices">
<button type="button" disabled="disabled" class="btn btn-default btn-circle" ng-if="c.data.state!=d"><i class="fa fa-check fa-3x" aria-hidden="true"></i></button>
<button type="button" disabled="disabled" class="btn btn-success btn-circle" ng-if="c.data.state==d"><i class="fa fa-check fa-3x" aria-hidden="true"></i></button>
<p>{{d}}</p>
</div>
</div>
</div>
</div>

Under CSS :-

.btn-circle {
width: 40px;
height: 40px;
text-align: center;
padding: 6% 0;
font-size: 6px;
line-height: 0.6;
border-radius: 100%;
}

.process-row {
display: table-row;
}

.process {
display: table;
width: 100%;
position: relative;
}

.process-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}

.process-row:before {
top: 20px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;

}

.process-step {
display: table-cell;
text-align: center;
position: relative;
padding-left: 0%;
padding-right: 5%;
}

.process-step p {
margin-top:10px;

}

.btn-circle.active {
border: 2px solid #cc0;
}

Under Server Side :-

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */

data.choices=[];
data.recId = $sp.getParameter('sys_id');

var ar=new GlideRecord("incident");
if(ar.get(data.recId))
{
data.state=ar.getDisplayValue('state');
}

var gr = new GlideRecord('sys_choice');
gr.addEncodedQuery("name=incident^element=state^orderBysequence");
gr.query();
while(gr.next())
{
var _choiceLabel = gr.getValue('label');
data.choices.push(_choiceLabel);
}

})();