Stage / Process Formatter on Service Portal

[Naveen Velagapu]

States can be rendered as similar to native ServiceNow forms on Service Portal:

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.

[Bhawanjit Sing2]

Hi,

There is no update set XML file.

[Brook3]

Hello Naveen,

It's a great widget!

Just one question.. where can I add the configuration on "Step 6"?

[Naveen Velagapu]

Hey Brook,

1. The directive <nv_record_stages config="data.config"></nv_record_stages> should be used as any html element so it has to be in the widget HTML side of the widget.

2. In order to render the stages properly it require some input "config="data.config" you can generate that in the server script of widget.

3. you can refer to sample widget "stage formatter sample widget"

Hit "Helpful" if this answers your question.

Thanks,

Naveen

[Mi4]

Hi,

I am very happy that this feature was born.

Does this widget only support Change Request?

I want to use it for other than change Request.

Regards,

[Naveen Velagapu]

hi Mi,

Yes absolutely, you can use for any where by sending the input configuration accordingly.

Thanks,

Naveen  

[Mi4]

Hi,
Okay, Thank you!

[Ceanna]

@Naveen Velagapudi 

 Have you done this for other tables,  like Tasks?

[Evren Yamin]

Hello @Naveen Velagapu, is there any restrictions if I do this one on a scoped app? the reason is I have done all the configs on my instance using a scoped app and sadly it's not working.

Appreciate if you can help. Thank you.

[Naveen Velagapu]

Hey @Evren Yamin , 

One thing I can quickly think of is, that the directive that renders the form requires a macro that's created in global scope. I would suggest having a look at accessing macro from the scoped application where you have used this capability. If that doesn't work, just copy the macro in the local scope and append the directive with the newly created macro in the directive ("getTemplateUrl")

[Naveen Velagapu]

Hey @Ceanna ,

this directive is pretty flexible , it can be associated with any table provided right configuration is given as input for it to render.

[Nickell]

Hi @Naveen Velagapu ,

for each stage, we have a button on widget. once click on each button, should be moved to next stage on portal and then flow formatter should be highlighted with associated state on click of button.

Kindly help me.

Thanks in Advance!

Best Regards,