#DYNAMIC PROCESSES HOW TO#
#DYNAMIC PROCESSES CODE#

To avoid renumbering steps at run time, rather than adding or removing steps, show all the steps in the Stepper and disable any steps that aren’t required. Alternatively, you can “omit” steps without actually removing them and, as a result,Īvoid renumbering the following steps. If you have logic that’s drivenīy the bound field, then you’ll need to adjust that logic for any steps that you’re adding or removing.Īs I’ll discuss in my next post, using the StepperStep’s ValueChanged event can give you another way of dealing with this problem. Now, when the user selects that step, currentStep will be set to 0. On the other hand, if the Overview step isn’t displayed, then the “Pick Date Range” step becomes the first step. When all the steps are displayed (i.e., including the Overview step), then, when the user selects the second step (the one labeled “Pick Date Range”), In my sample code, for example, I’veīeen binding my Blazor Stepper UI component to a field called currentStep. It might be obvious to say this but, when you skip a step in your process, that step is no longer part of the process … and that changes the numbering that you’ve been using to identify your steps. Now the user can decide if they want to see the Overview by selecting the checkbox. To empower the user to decide whether to display the Overview step, you might add a checkbox like this to your component: Show Overview: (though when steps are added using this technique, they are always appear at the end of the Stepper). You can, for example, provide the user with a one or more checkboxes that allow the user to add or remove the steps they want in the process In fact, this feature gives you the ability to turn the problem of configuring the process over to the user. Effectively, I’m configuring the process before the user starts it. Process when they open the component, it’s just that the first step may be different. Here, though, I’m using this option to control the initial display of the process: The user still gets a well-defined

#DYNAMIC PROCESSES CODE#

In my code section, all I need is a collection of strings that will be used as the labels in each step: string Labels protected override Task OnAfterRenderAsync ( bool firstRender ) Configuring the ProcessĪs I said, I’d be uncomfortable with making a step appear or disappear while the user is performing the process. This example just uses a collection of strings to set the Label attribute on the StepperStep elements it creates (I’ve also used the StepType attribute on the TelerikStepper element to configure the stepper Holding the data you need to configure a StepperStep.

You could, for example, retrieve a set of objects from some data source with each object Generating the Steps at Runtimeįor complete freedom in building your process in Blazor apps, you can build your Stepper dynamically at run time by adding its StepperSteps from code. And, in fact, there’s at least a couple of common UI design patterns where you do want to be able to dynamically alter the steps in the process. If the user’s mental model supports adding or removing steps, well, then, you have a compellingĪrgument for supporting that in your Stepper. Having said that, your goal in creating a process is to match the user’s mental model of how the “difficult” task should be handled. This stepper, for example, gives the user an overview of the process and, thanks to the labels, a clue about what happens in each step:Ĭhanging the process while the user is performing the task may actually make the process harder to understand: Not only is the task volatile but, now, so is the process. The point of breaking a difficult task down into steps is to not just to simplify the task but to give the userĪ map of the process. Creating Dynamic Processes With the StepperĬhanging the process while the user is performing isn’t something that you should do without considering the impact on the user.

#DYNAMIC PROCESSES HOW TO#

In this post, we’ll look at changing the process (thus renumbering our steps), when that might make you want to disallow users from choosing what step they go to next, and how to integrate process code no matter what the user is allowed to do. One of the benefits of using the Stepper component from the Telerik UI for Blazor components is that it allows you to add or remove steps from your processĮither at the start of the process or even while the user is working through the process. Task is volatile-the items involved in the task change while the user is performing the task. See how to do that, how to disallow users from jumping around, and how to integrate process code.Īs I discussed in an earlier post, one of the characteristics that make a task “difficult” is that the Some of our difficult tasks involve volatile processes where we add or remove steps.

Dynamic processes