Saura Sambit
Tera Expert

Process flow formatters in ServiceNow’s native view offer a visual representation of a record’s state progression. While not interactive, they can be prominently displayed at the top of the record. However, as we began migrating to workspaces, these visuals became less configurable in the new UI.

 

native_view_process_flow_formatter.png

 

In this article, we will detail the steps to configure a component that performs the same function within workspaces - the stepper component.

 

workspace_stepper_component.png

 

Configuration steps

 

To add the stepper component to Change Request record page in CSM/FSM configurable workspace, follow the steps listed below.

 

Modify the record page for Change

 

    1. Set the application scope to ‘CSM Configurable Workspace’.
    2. Navigate to UI builder.
    3. From the ‘Experiences’ list, look for and open the 'CSM/FSM Configurable Workspace' record. https://instance.service-now.com/now/builder/ui/experience/c4e321a3530210102c30ddeeff7b12f6

 

csm_workspace_experience_record.png

 

 

       4. Under the ‘Pages and variants’ list, look for and open the ‘CSM default record page’ record. Notice that the page is read-only.

 

 

csm_default_record_page_ui_builder.png

 

csm_default_record_page_open.png

 

 

        5. Use the hamburger menu present at the top left corner to create a duplicate of this OOB page.

 

 

csm_default_record_duplicate.png

 

 

       6. Give the page variant a desired name, condition needs to be set as 'table=change_request' as we want it to be visible for Change Requests only.

 

record_page_variant_change_request.png

       

       7. The new variant will be ready in a few seconds and open up on your screen. Notice that the page is now editable.

       8. The body section of the page would initially be blank, we can fill it up by applying test values from the top left.

 

uib_test_values_change_request.png

 

uib_change_request_page.png

 

 

Add the Stepper Component

 

       9. Using the components panel on the left, look for 'Top Container' and select it.

       10. Using the three dots beside the component, click on 'Add after' and select the 'Stepper' component from the popup.

       11. Save the UIB configurations using the 'Save' button at the top right.

 

uib_add_after_stepper_component.png

 

 

uib_stepper_component_added.png

 

       12. The stepper component comes with a set of static values which can be viewed in the 'Config' tab on the right panel. Next, we need a data resource to dynamically set the 'Items' array based on the record that is on screen.

  • 'Items' array -
[
    {
        "id": "step1",
        "label": "Not started",
        "progress": "none"
    },
    {
        "id": "step2",
        "label": "Active",
        "progress": "partial"
    },
    {
        "id": "step3",
        "label": "In progress",
        "progress": "partial"
    },
    {
        "id": "step4",
        "label": "Complete",
        "progress": "done",
        "disabled": true
    }
]

 

Create a Transform Data Resource

 

       13. From the bottom left section of UIB, proceed to create a new data resource of type 'Transform'.

 

uib_create_data_resource_transform.png

 

       14. Alternatively, navigate to the table 'sys_ux_data_broker_transform' to create the data resource.

       15. Set the values as below and save the record.

  • Name - 'GetStateSchema' (any unique name should be fine)
  • Properties - JSON of inputs available to the data resource
  • Script - server script to process the input and return an output for the stepper component
  • Properties (refer to OOB data resources to understand the format).
[
  {
    "name": "table",
    "label": "Table",
    "description": "Table name of the record.",
    "readOnly": false,
    "fieldType": "string",
    "mandatory": true,
    "defaultValue": ""
  },
  {
    "name": "sys_id",
    "label": "Sys Id",
    "description": "Sys Id of the record.",
    "readOnly": false,
    "fieldType": "string",
    "mandatory": true,
    "defaultValue": ""
  }
]

 

  • Script (write logic to use the 'table' and 'sys_id' inputs and return an array with the format shown in Step 12).

 

data_broker_script_image.png

 

 

Create an ACL for the Data Resource

 

       16. Elevate role to 'security_admin'.

       17. Navigate to Access Control [sys_security_acl] and create a new ACL record as below.

 

data_broker_acl_record.png

 

       18. For roles, any role like 'itil' or 'snc_internal' should be fine.

 

Add the Data Resource to the page

 

       19. Navigate back to the UIB page we created earlier to add the 'GetStateSchema' data resource to the page.

 

 

add_data_resource_record.png

 

 

       20. Select the newly added data resource and use data binding to configure the input values under the 'Config' tab.

  • Table - '@context.props.table'
  • Sys Id - '@context.props.sysId'

 

getstateschema_configure.png

 

       21. Select the 'Record' data resource from the list.

       22. To ensure that our data resource is refreshed for every record update, under the 'Events' tab -

  • add a new event mapping for 'Form submit completed'.
  • search for and add the event handler 'REFRESH' listed under 'GetStateSchema'.

 

record_add_event_mapping.png

 

record_event_form_submit.png

 

record_event_form_refresh.png

 

       23. Save the UIB configurations using the 'Save' button at the top right.

 

Update the Stepper Component config

 

       24. Using the search bar on the top left, search for the component 'Stepper' that we added in Step 10 and select it.

stepper_component_selection.png

 

       25. Navigate to the 'Config' tab on the right panel.

       26. Use data binding to set the value of 'Items' to '@data.getstateschema.output' (value may vary and depends on the name of the data resource that was created).

       27. Use script to set the value of 'Selected item' as below.

 

/**
  * @param {params} params
  * @param {api} params.api
  * @param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
  return api.data.record.form.fields.state.value + '_';
}

 

stepper_conponent_config.png

 

       28. Save the UIB configurations using the 'Save' button at the top right.

       29. Clean the cache with ‘cache.do’.

 

 

Verify the configuration

 

If all the steps have been followed accurately, then Change Request records when opened via the CSM workspace would display a dynamic stepper component with state transitions as below.

 

workspace_stepper_component.png

 

If the functionality is not working as expected, backtrack on the mentioned steps and verify whether all of them were executed correctly, else we can always start from the scratch.

 

Next steps

 

Figure out what is the best way to replicate the component for other Task records such as Incidents, Problems, etc.

Comments
vishalambedare
Tera Contributor

Hi @Saura Sambit I have tried but the stepper not coming with the dynamic values. Can you help me here please?

harshaa0567
Tera Contributor

Hi @Saura Sambit  is there any video to achieve the stepper dynamically wrt to the value. I was not able to configure.It would be of great help if there is a video. Thanks in advance

MGOPW
ServiceNow Employee
ServiceNow Employee

Thanks for the idea @vishalambedare @harshaa0567 - We should have a tutorial on this coming out some time either in late may or june. Keep an eye out on the blogs for future installments 😄 https://sn.Works/BytesArticles

spike
Mega Sage

This seems to be missing the bit in setting up the data broker that tells you how to output the contents of the script. While I can see there's an Output Scheme field, for whatever reason, I'm not able to craft something that goes into to it and works. Any pointers would be appreciated..

MonzaniWill
Tera Contributor

Hi @MGOPW,

Do we have the tutorial for that already?

jamesnovotny4
Tera Explorer

@spike 

 

I ran into this as well and want to try to help you not have the same headache as myself.

 

There does not necessarily need to be anything in the output schema, it seems it's defined automatically based on the object passed in the return statement based on other data broker script records in the system.

 

I messed up by not having the ACL written correctly, but in UIB it tells you the data script was not fully configured. Maybe something similar? 

 

My approach and what I'd suggest for resolution included taking the 'Check Table Access Transform' record, and copying it over and working backwards.

 

This way you can see the output get built and can utilize values from the data resource.

 

Then update the script to what was provided as it does work.

 

I'd suggest doing the same so you can ensure that the server script is even able to run in UI builder.

 

 

 

Version history
Last update:
‎07-22-2024 09:30 PM
Updated by:
Contributors