Note: This article covers the configuration instructions related to Share Project "Stage/Process Formatter on ServiceNow Similar to native forms"

How to configure ?

Step1 : Install the Update set from Servicenow Share "https://developer.servicenow.com/connect.do#!/share/contents/7932564\_stage\_formatter\_on\_servicenow\_similar\_to\_native\_forms?t=PRODUCT\_DETAILS"

Step2: Navigate to the widget where you want to configure the directive

Step 3: Add Widget Dependency "Stage Flow CSS"

Step 4: Add Angular provider to widget "nvRecordStages"

Step 5: Add custom element into html as shown below

<nv_record_stages config="data.config"></nv_record_stages>

Step 6: Certain configuration is required as input to directive in order to display stages on portal , Sample configuration provided below

{
   "current_stage":"-4" ,
   "stage_config":{
      "stages":[
         {
            "label":"New",
            "value":"-5",
            "order":100,
            "is_completed":false,
            "is_current":false,
            "css_class_name":""
         },
         {
            "label":"Assess",
            "value":"-4",
            "order":200,
            "is_completed":false,
            "is_current":false,
            "css_class_name":""
         },
         {
            "label":"Authorize",
            "value":"-3",
            "order":300,
            "is_completed":false,
            "is_current":false,
            "css_class_name":""
         },
         {
            "label":"Scheduled",
            "value":"-2",
            "order":400,
            "is_completed":false,
            "is_current":false,
            "css_class_name":""
         },
         {
            "label":"Implement",
            "value":"-1",
            "order":400,
            "is_completed":false,
            "is_current":false,
            "css_class_name":""
         },
         {
            "label":"Review",
            "value":"0",
            "order":400,
            "is_completed":false,
            "is_current":false,
            "css_class_name":""
         },
         {
            "label":"Closed",
            "value":"3",
            "order":400,
            "is_completed":false,
            "is_current":false,
            "css_class_name":""
         }
      ]
   }

Attributes and their Purpose

current_stage	Indicates the current state to be displayed in Portal
stages	Should be an array with all the state values
label	Label to to be displayed on portal
value	Indicates value of stage, current_statge will be compared with value , inorder to render stages.
order	Indicates stage order , lowest will be displayed first
is_completed,is_current,css_class_name	Can be ignored , used internally by directive

Note: This configuration can be either static or dynamic. Its more of generate the configuration as required and give that as input to custom directive.

Additional Information:

This share project also include demo widget and page with sample configuration. You can view at https://INSTANCE NAME.service-now.com/sp?id=stage_formatter_demo.

Mark "Helpful" if this is useful.

Comment if you have any questions.

Thanks.