Stepper component in UI builder

Nikhil55
Tera Contributor

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.

 

4 REPLIES 4

Anusha Burri
Tera Contributor

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

WORKFLOW-COWBOY
ServiceNow Employee
ServiceNow Employee

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
        };
    }
}

--------------------------------------------------
Workflow Cowboy
LinkedIn: https://www.linkedin.com/in/dalestubblefield/
YouTube: https://www.youtube.com/@starlordnow

Can we use it to create stepper on incident form