how to create Process flow in service potal

[saikrishna sai]

like this process flow i need in service portal as like this

[Chetan Mahajan]

Hi Sai,

                You can create flow formatter with the help of widget, refer this Flow formatter in Service Portal

[saikrishna sai]

Is it correct  chetan 

alot of coding

[Chetan Mahajan]

Yes Sai, because there is no OOB functionality for that, we have to create it by coding itself for service portal

[Saranya Babu]

Hi,

Create a widget and put the same in the portal

HTML

<div>


<div class="visible-md visible-lg" ng-if="data.flow.length > 0">


<button ng-repeat="key in data.flow" type="button" class="btn btn-{{key.colour}} btn-arrow-right">{{key.name}}</button>


</div>


</div>

Server Script

(function() {


  var gr = $sp.getRecord();


  data.canRead = gr.canRead();


  if (!data.canRead)


  return;




  // Check the process flow query against the current job to see if the conditions match


  function getCurrentStep(step, table, id) {


  var gnr = new GlideRecord(table);


  gnr.addEncodedQuery(step);


  gnr.addQuery('sys_id', id);


  gnr.query();




  if (gnr.next()) {


  return 'warning';


  } else {


  return 'primary';


  }


  }



  // Set the previous steps in the flow to success if the current step is further down the order


  function retoActiveSuccess(items) {


  var i = 0;


  for (var key in items) {


  var value = items[key];


  if (value.colour == 'warning') {


  var index = i;


  for (var j = 0; j<i; j++) {


  items[j].colour = 'success';


  }


  if (index == items.length) {


  value.colour = 'sucess';


  }


  break;


  }


  i++;


  }


  return items;


  }




  function createProcessFlow() {


  var table = gr.getTableName();


  var id = gr.getUniqueValue();




  var gf = new GlideRecord('sys_process_flow');


  gf.addActiveQuery();


  gf.addQuery('table', table);


  gf.orderBy('order');


  gf.query();




  var items = [];


  while (gf.next()) {


  var item = {};


  item.name = gf.name.toString();


  item.colour = getCurrentStep(gf.condition.toString(), table, id);


  items.push(item);


  }




  items = retoActiveSuccess(items);


  return items;


  }




  data.flow = createProcessFlow();




})();

CSS.

btn {


      margin-bottom: 5px;


}


.btn-arrow-right,


.btn-arrow-left {


      position: relative;


      padding-left: 18px;


      padding-right: 18px;


}


.btn-arrow-right {


      padding-left: 36px;


}


.btn-arrow-left {


      padding-right: 36px;


}


.btn-arrow-right:before,


.btn-arrow-right:after,


.btn-arrow-left:before,


.btn-arrow-left:after { /* make two squares (before and after), looking similar to the button */


      content:"";


      position: absolute;


      top: 5px; /* move it down because of rounded corners */


      width: 22px; /* same as height */


      height: 22px; /* button_outer_height / sqrt(2) */


      background: inherit; /* use parent background */


      border: inherit; /* use parent border */


      border-left-color: transparent; /* hide left border */


      border-bottom-color: transparent; /* hide bottom border */


      border-radius: 0px 4px 0px 0px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */


      -webkit-border-radius: 0px 4px 0px 0px;


      -moz-border-radius: 0px 4px 0px 0px;


}


.btn-arrow-right:before,


.btn-arrow-right:after {


      transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */


      -webkit-transform: rotate(45deg);


      -moz-transform: rotate(45deg);


      -o-transform: rotate(45deg);


      -ms-transform: rotate(45deg);


}


.btn-arrow-left:before,


.btn-arrow-left:after {


      transform: rotate(225deg); /* rotate left arrow squares 225 deg to point left */


      -webkit-transform: rotate(225deg);


      -moz-transform: rotate(225deg);


      -o-transform: rotate(225deg);


      -ms-transform: rotate(225deg);


}


.btn-arrow-right:before,


.btn-arrow-left:before { /* align the "before" square to the left */


      left: -11px;


}


.btn-arrow-right:after,


.btn-arrow-left:after { /* align the "after" square to the right */


      right: -11px;


}


.btn-arrow-right:after,


.btn-arrow-left:before { /* bring arrow pointers to front */


      z-index: 1;


}


.btn-arrow-right:before,


.btn-arrow-left:after { /* hide arrow tails background */


      background-color: white;


}