Custom Step by Step Widget Usage

Custom Widgets
1

Team, I have a query regarding the utilization of the custom Step by Step widget. It’s fantastic for tracking progress sequentially. However, when I navigate between completed or future steps, the widget prematurely marks all previous steps as completed, even though we haven’t reached them yet. Additionally, when I navigate backward, it incorrectly marks completed steps as unchecked, essentially treating them as unexecuted steps. Is there a solution to modify the behavior of this widget so that it only marks a step as “Completed” when the next button is clicked, leaving completed and unexecuted steps unchanged?

Custom widget
Custom widget1003×491 175 KB

2

Hi,

It is going to need to you to get into the code to make some changes. You would need some JS/coding experience. But not too big lift. Could get chatGPT to help you as well.

You could go with the follow approach;
-Add prop called “completed steps” - this would be a text list. You could add the completed steps to that array as you complete them

  • Change the if statements in line 59-65 in the renderWidget() function. ( At least that is where it is located in my version. This is current if statement that is being used
    let status = "incomplete";
    if (idx < currentStepIndex) {
      status = "complete";
    }
    if (idx === currentStepIndex) {
      status = "active";
    }

You would want to replace this with an if statement that looks to see if the current step is in the “completed steps” array and if so mark it completed otherwise don’t.

3

Thanks, Eddy; I will try this and let you know.