Dynamic Wizard tabs

Forms
1

I am trying to dynamically populate the tabs in the Wizard Container with html content. What is the best way for pushing a new tab with html content into the wizard tabs?

2

Hello @goseinthemachine,

Welcome to Plumsail Community!

Could you please provide more details about what you want to design.

What content do you want to add? Do you want to hide/show wizard tabs dynamically?

3

I got my concept working and am wondering if there is a better way to do this. What I am doing is grabbing a list of items from another list and I am doing something like this:

var wizard = fd.container('Wizard1');
list.items.filter('ApproverId eq ' + _spPageContextInfo.userId + " and Status eq 'Pending'").get().then((response) => {
    console.log(response)
    items = response;
    for(var i = 0; i < items.length; i++){            
        wizard.steps.push(items[i].Title);
    }
});

This works on creating the steps in the wizard. To create the content I am injecting HTML into the wizard when the step index changes.

wizard.widget.$on("update:startIndex", function(pageIndex) {        
   $( "#" + title + pageIndex ).html(content); //So this matches the div id of the generated step     
});

Is this the best way to dynamically enter HTML into the wizard? I need this because any number of steps will need to be added to the wizard depending on how many documents need to be approved.

4

Hello @goseinthemachine,

This is a good way to insert HTML to wizard step. Nice job!