Flow formatter in Service Portal

PrashantLearnIT
Giga Sage

‎09-25-2017 11:30 PM

Hi All,

I want to use flow formatter in Service Portal. How can we do that.

Can someone help me on this?

Thanks

Prashant

********************************************************************************************************
Please appreciate the efforts of community contributors by marking the appropriate response as the correct answer and helpful. This may help other community users to follow the correct solution in the future.

********************************************************************************************************
Cheers,
Prashant Kumar
ServiceNow Technical Architect


Community Profile LinkedIn YouTube Medium TopMate
********************************************************************************************************
0 Helpfuls
  • 5,966 Views
4 REPLIES 4

sndangibbard
Mega Guru

‎09-27-2017 04:58 AM

There is no support for the Flow formatter in the baseline Form Widget - you will need to create your own custom Widget to recreate the functionality


0 Helpfuls

PrashantLearnIT
Giga Sage
In response to sndangibbard

‎09-27-2017 08:50 PM

Hi Dan,



Can you provide anything like a sample code for this so that i can try that, because i am not getting the way to do that for widget?



Thanks & Regards


Prashant Kumar


********************************************************************************************************
Please appreciate the efforts of community contributors by marking the appropriate response as the correct answer and helpful. This may help other community users to follow the correct solution in the future.

********************************************************************************************************
Cheers,
Prashant Kumar
ServiceNow Technical Architect


Community Profile LinkedIn YouTube Medium TopMate
********************************************************************************************************

ryanwoodburn
Kilo Expert

‎04-18-2018 01:58 AM

I have created a widget similar to the flow formatter, although there is a lot of hard coding based on status of Change.


May be of help..

find_real_file.png

html

<div class="container" ng-if="data.request_type == 'CHG'">

  					<!--Logging - Change Stage = 10 -->
            <div ng-if='data.changeStage == 10' class="row bs-wizard" style="border-bottom:0;">              
                <div class="col-xs-2 bs-wizard-step active">
                  <div class="text-center bs-wizard-stepnum">Logging</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <div class="bs-wizard-dot"></div>
                </div>                
                <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Initial Approval</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>                
                <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Scoping</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">CAB</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>    
    					 <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Implementing</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Closed</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
     				</div>
  
    					<!--Initial Approval - Change Stage = 20 -->
            <div ng-if='data.changeStage == 20' class="row bs-wizard" style="border-bottom:0;">              
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Logging</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <div class="bs-wizard-dot"></div>
                </div>                
                <div class="col-xs-2 bs-wizard-step active">
                  <div class="text-center bs-wizard-stepnum">Initial Approval</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>                
                <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Scoping</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">CAB</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>    
    					 <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Implementing</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Closed</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
     				</div>
  
      					<!--Scoping - Change Stage = 30 -->
            <div ng-if='data.changeStage == 30' class="row bs-wizard" style="border-bottom:0;">              
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Logging</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <div class="bs-wizard-dot"></div>
                </div>                
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Initial Approval</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>                
                <div class="col-xs-2 bs-wizard-step active">
                  <div class="text-center bs-wizard-stepnum">Scoping</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">CAB</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>    
    					 <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Implementing</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Closed</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
     				</div>
  
      					<!--CAB - Change Stage = 50 -->
            <div ng-if='data.changeStage == 50' class="row bs-wizard" style="border-bottom:0;">              
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Logging</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <div class="bs-wizard-dot"></div>
                </div>                
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Initial Approval</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>                
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Scoping</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step active">
                  <div class="text-center bs-wizard-stepnum">CAB</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>    
    					 <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Implementing</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step disabled">
                  <div class="text-center bs-wizard-stepnum">Closed</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
     				</div>
  
            <!--Implementing - Change Stage = 60 -->
            <div ng-if='data.changeStage == 60' class="row bs-wizard" style="border-bottom:0;">              
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Logging</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <div class="bs-wizard-dot"></div>
                </div>                
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Initial Approval</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>                
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Scoping</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">CAB</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>    
    					 <div class="col-xs-2 bs-wizard-step active">
                  <div class="text-center bs-wizard-stepnum">Implementing</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step disabled"><!-- disabed -->
                  <div class="text-center bs-wizard-stepnum">Closed</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
     				</div>
  
              <!--Closed - Change Stage = 300 -->
            <div ng-if='data.changeStage == 300' class="row bs-wizard" style="border-bottom:0;">              
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Logging</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <div class="bs-wizard-dot"></div>
                </div>                
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Initial Approval</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>                
                <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Scoping</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">CAB</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>    
    					 <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Implementing</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
               <div class="col-xs-2 bs-wizard-step complete">
                  <div class="text-center bs-wizard-stepnum">Closed</div>
                  <div class="progress"><div class="progress-bar"></div></div>
                  <a  class="bs-wizard-dot"></a>
                </div>              
     				</div>
  
  
</div>

 

CSS

.bs-wizard {margin-top: 20px; margin-bottom: 20px; display: block; float: left; width: 75%;}

/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e2e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #A32020; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%; border: solid 1px #A32020;} //outter circle
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 12px; height: 12px; background: #fff; border-radius: 50px; position: absolute; top: 8px; left: 8px; } //inner dot
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0; background-color: #fff;} //left to go on bar
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #A32020; border-bottom: solid 1px #A32020; border-top: solid 1px #A32020;  }  //bar progress
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot { }
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0; }
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;margin-left:-0.111111% }
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; background-color: #fff; border: solid 1px #fff;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-stepnum {opacity: 0.5;}
.bs-wizard > .bs-wizard-step.complete > .bs-wizard-stepnum {opacity: 0.5;}
.bs-wizard > .bs-wizard-step.active > .bs-wizard-stepnum {font-weight: bold;}
/*END Form Wizard*/

.co-xs-3 {
  position:relative;min-height:1px;padding-right:15px;padding-left:15px
}

 

Client

function() {
  /* widget controller */
  var c = this;
}

 

Server

(function() {
 
	var close_code;
	// Get table & sys_id
	data.table = input.table || $sp.getParameter("table");
	data.sys_id = input.sys_id || $sp.getParameter("sys_id");
 
	// Valid GlideRecord
	gr = new GlideRecord(data.table);
	if (!gr.isValid())
		return;
	
	gr.get(data.sys_id);
	if (!gr.canRead())
		return;
	data.state = gr.getValue('state');
	data.changeStage = gr.getValue('u_change_stage');
	data.request_type = gr.getDisplayValue('number').substring(0,3);
	close_code = data.closeCode;
		
	// Valid sys_id
	if (!gr.get(data.sys_id))
		return;
 
})();
Preview file
9 KB

poojasubhas
Tera Contributor
In response to ryanwoodburn

‎06-25-2024 12:19 AM

Hello @ryanwoodburn ,

 

Used the above code to create the flow formator but it seems like its not working .

0 Helpfuls