Steps – Symphonix

A wizard that indicates where the user is in a flow. But the steps are not clickable. Stepper is used in displaying the progress through logical or numbered steps.

With the Summer'22 release, the steps are now clickable so that a user can quickly navigate to any of the previous steps. For more information on how to make a step clickable, see below links.

Clickable Steps and Sub-steps
Configure the Number of Steps Visible at a Time
Dynamic current for Tabs/Steps
Dynamic Tabs/Steps
Hide Step Titles
Vertical Stepper with Sub-steps
Visible Tab/Step Indexes

Clickable Steps and Sub-steps

Note

This configuration is MUI-specific and applies to both horizontal and vertical steppers.

The steps are now clickable so that a user can quickly navigate to any of the previous steps. However, a user can only navigate to the steps that a user has previously navigated. Future steps that were previously started are navigable if there were no changes to any preceding steps (no dirty forms will be supported). For example, in a five steps process, if a user is on the fourth step, the user can navigate to any of the steps between and four.

Substeps that are hidden are not directly navigable. As such, clicking on a previous step will display the substeps. However, the user will always be dropped off at the first substep within the selected step. For example, in the previous example of the five steps process, if Step 2 has four sub-steps from a to d. When a user clicks on Step 2, the user is navigated to sub-step a, and then the user can navigate between sub-step a and d.

To make steps clickable, add the below configuration in the stepper actor appearance config:

Example 160. Code JSON

{
  "navigable": true
}

When a user clicks on any of the previously navigated steps, it is highlighted with the step number, and the rest of the navigated steps are highlighted with a tick mark.

Status

Release Available	Status	Framework Name
3.9	Current	MUI

Configure the Number of Steps Visible at a Time

Note

This configuration is MUI-specific.

General

When there are many steps in a Mui Stepper, you can configure the number of visible steps at a time, which is pretty useful in the mobile view.

Example 161. Code JSON

"appearance": {
  "numberOfVisibleTitles": 3,
  ...
}

Status

Release Available	Status	Framework Name
3.2	Current	MUI

Dynamic current for Tabs/Steps

General

Current can be set from URL or internal state.

Status

Release Available	Status	Framework Name
2.8	Current	TBC

Example 162. Code JSON

https://c.na53.visual.force.com/apex/TaurusM2Test?startStep=3

"global": {
  "startStep": "$url(startStep);"  
}
"actors": {
  "Steps": {
    "category": "container",
    "type": "steps",
    "appearance": {
      "current": "$global.attr(startStep);",
      ...
      
    }
    
  }
  
}

Example 163. Code JSON

{
  "current": "$state(Steps123Control).attr(currentStep);",
  "titles": [...]
  
}

{
  "structureName": "...",
  "sections": [{
    "fields": [{
      "id": "764a",
      "fieldName": "currentStep",
      "fieldUi": {
        "fieldType": "number",
        "label": "Current Step",
        "defaultValue": 1
        
      }
      
    }]
    
  }]
  
}

Dynamic Tabs/Steps

Tabs can be conditionally rendered and enabled; steps can be conditionally rendered.

Note

Not in the actor definition panel yet.

Status

Release Available	Status	Framework Name
2.7.1	Current	TBC

Example 164. Code JSON

{ "current": 1,
  "titles": [
    "Foo",
    {"title": "Bar", "render": "$state(SampleStepControl).attr(hideBar); != true"},
    {"title": "Baz", "render": "$state(SampleStepControl).attr(hideBaz); != true"},
    {"title": "Qux", "render": "$state(SampleStepControl).attr(hideQux); != true"},
    {"title": "Corge", "render": "$state(SampleStepControl).attr(hideCorge); != true"},
    {"title": "Waldo", "render": "$state(SampleStepControl).attr(hideWaldo); != true"}
  ]}

{ "titles": ["Wibble", "Wobble",
    {"title": "Wubble",
     "render": "$state(SampleTabControl).attr(hideWubble); != true",
     "enable": "$state(SampleTabControl).attr(disableWubble); != true"},
    {"title": "Flob",
     "render": "$state(SampleTabControl).attr(hideFlob); != true",
     "enable": "$state(SampleTabControl).attr(disableFlob); != true"}
    ]}

Two special step values can be assigned tocurrent:nextandprevious

next: go to the next visible step. If the current step is the last visible step, stay at the current step.
previous: go to the previous visible step. If the current step is the first visible step, stay at the current step.

Example 165. Code JSON

"assignments": [
  {"field": "$nav(SampleSteps).appearance(current);",
   "value": "previous"}
]
 
"assignments": [
  {"field": "$nav(SampleSteps).appearance(current);",
   "value": "next"}
]

Hide Step Titles

Status

Release Available	Status	Framework Name
3.3	Current	TBC

Example 166. Code JSON

"appearance": {
  "hideTitles": true
}

Vertical Stepper with Sub-steps

Note

This configuration is MUI-specific.

General

Sub-steps are still normal steps. Only change their look and feel.

Example 167. Code JSON

"appearance": {
  "titles": [{
    "title": "Search accounts"    
  }, {
    "title": "Applicant information", "subTitle": "Personal"    
  }, {
    "title": "Applicant information", "subTitle": "Business"    
  }, {
    "title": "Applicant information", "subTitle": "Financial"    
  }, {
    "title": "Pre-approval decision"    
  }, {
    "title": "Consent & verify", "subTitle": "Consent"    
  }, {
    "title": "Consent & verify", "subTitle": "Verify"    
  }, {
    "title": "GDS decisioning"    
  }],
  "titleOrientation": "vertical", "titleWidth": "250px"}

Status

Release Available	Status	Framework Name
3.4	Current	MUI

Visible Tab/Step Indexes

Status

Release Available	Status	Framework Name
2.8	Current	TBC

Example 168. Code JSON

{
  "titles": [
    "Foo",
    { "title": "Bar", "render": "$state(StepControl).attr(hideBar); != true" },
    { "title": "Baz", "render": "$state(StepControl).attr(hideBaz); != true" },
    "Qux"    ],
    "visibleIndexes": [ "I", "II", "III", "IV" ]
   
}