Stepper component in UI builder

[Nikhil55]

I have a requirement to show process flow in the CSM workspace. I added stepper component in ui builder but I could not able to sync the choices between state field and choices of stepper. can anyone help me in providing steps to sync the choices and when ever state is changed on the form the same should be reflected in stepper.

[Anusha Burri]

We are also looking for the same, Were you able to achieve this?

[WORKFLOW-COWBOY]

I am trying to do this as well. So far, I have created a Data resource of type Transform and wrote a script that returns what should be the correct data; however, when I bind it to the component it does not work. 

Here is my Data Broker Server Script:

Properties

[
  {
    "name": "table",
    "label": "Table",
    "description": "Table",
    "fieldType": "string"
  },
  {
    "name": "sysId",
    "label": "Sys ID",
    "description": "Sys Id of the record",
    "fieldType": "string"
  }
]

Script

function transform(inputs) {
    var sysid = inputs.sysId;
    var table = inputs.table;
    if (table && sysid) {
        var processFlowGr = new GlideRecord("sys_process_flow");
        processFlowGr.addQuery("table", table);
        processFlowGr.orderBy("order");
        processFlowGr.query();
        var stepperData = [];
        var recordOrder;
        var gr = new GlideRecord(table);
        gr.get(sysid);
        var count = processFlowGr.getRowCount();
        var i = 0;
        if (gr.isValidRecord()) {
            while (processFlowGr.next()) {
                i++;
                var stepperItem = {
                    "id": "",
                    "label": "",
                    //"sublabel": "",
                    "progress": "",
                    //"order": -1
                };
                var checkRecordFlag = GlideFilter.checkRecord(gr, processFlowGr.getValue("condition"));
                stepperItem["id"] = "step"+processFlowGr.getValue("order");
                stepperItem["label"] = processFlowGr.getValue("label");
                //stepperItem["order"] = processFlowGr.getValue("order");
                if (checkRecordFlag) {
                    recordOrder = processFlowGr.getValue("order");
                    stepperItem["progress"] = i == count ? "done" : "partial";
                    //stepperItem["sublabel"] = i == count ? gs.getMessage("Completed") : gs.getMessage("In progress");
                } else {
                    if (!recordOrder) {
                        stepperItem["progress"] = "done";
                        //stepperItem["sublabel"] = gs.getMessage("Completed");
                    } else {
                        stepperItem["progress"] = "none";
                        //stepperItem["sublabel"] = gs.getMessage("Upcoming");
                    }
                }
                stepperData.push(stepperItem);
            }
        }
        return {
            stepperData
        };
    }
}

[Saura Sambit]

@WORKFLOW-COWBOY @Nikhil55 @Anusha Burri 

I was able to configure the stepper component. Please refer to this article - https://www.servicenow.com/community/next-experience-articles/stepper-component-in-configurable-work...

[ShubhamR0335370]

Can we use it to create stepper on incident form