0

In my web form I am using fuelux wizard (link: http://getfuelux.com/javascript.html#wizard ) and I have different roles of people coming to this page. What I need is to be able to "disable" certain steps of the wizard based on some data I obtain at page load. I believe it will have something to do with styling of it but I haven't had any luck in finding what I need.

For example,

I have steps 1-6, and say a user comes to the page. I identify him as a Data Architect, thus I need to disable steps 4 and 6. I have a few specific roles which I need to disable certain combinations of tabs for each individual role.

Could this be done by calling some javascript for fuel ux based on what role I identify the user as in code behind? And what changes would I need to a specific step to make user not able to access it?

Edit:

Here are my steps:

    <ul class="steps">

            <li data-step="1" data-name="Documentation" class="active"><span class="badge">1</span>Documentation<span class="chevron"></span></li>
            <li data-step="2" data-name="Business"><span class="badge">2</span>Business<span class="chevron"></span></li>
            <li data-step="3" data-name="Application"><span class="badge">3</span>Application<span class="chevron"></span></li>
            <li data-step="4" data-name="Data"><span class="badge">4</span>Data<span class="chevron"></span></li>
            <li data-step="5" data-name="Infrastructure"><span class="badge">5</span>Infrastructure<span class="chevron"></span></li>
            <li data-step="6" data-name="Security"><span class="badge">6</span>Security<span class="chevron"></span></li>

     </ul>

My question really is, is there a way to disable certain data-steps from the code behind?

dskoda1
  • 109
  • 10
  • please share some relevant code so that we can help you in better way – Bhushan Kawadkar Jul 14 '15 at 14:12
  • Does that help @BhushanKawadkar ? – dskoda1 Jul 14 '15 at 14:33
  • Please share the plugin link or share jsfiddle link with your problem statement. – Bhushan Kawadkar Jul 14 '15 at 14:35
  • Is my problem statement above not clear? If not, I'll attempt to rephrase it. – dskoda1 Jul 14 '15 at 14:37
  • The wizard is designed for a linear user flow. You can though jump around and override the next and previous buttons based on logic. This would allow you to "skip" steps, but there is no disabled steps logic. You could write your own disabled styles and apply them to the steps you want, but it's certainly extending it's current functionality. You may want to reconsider your UX and disable the contents of the step instead of the stop, or change the steps. You could remove steps, based on user input, to make the steps list shorter or longer. – Interactive Llama Jul 14 '15 at 15:06
  • Yes, @InteractiveLlama , removing steps based on some custom logic is exactly what worked for me. – dskoda1 Jul 14 '15 at 15:25

1 Answers1

0

I've figured out a way to do it by declaring int arrays in my code behind, and then accessing them directly under where I initialize my array in javascript. It looks like this:

Code behind:

//Check which steps to disable
            if (role.Contains("Data"))
            {
                disabledSteps = new int[] {5, 5};
            }
            else if (role.Contains("Infra"))
            {
                disabledSteps = new int[] {4, 5};
            }
            else if (role.Contains("Security"))
            {
                disabledSteps = new int[] { 4, 4 };
            }

Then, using a javascriptserializer which I also declared in my code behind, the javascript looks like:

var disabledSteps = <%= serializer.Serialize(disabledSteps) %>;
        for(var i in disabledSteps){
            alert(disabledSteps[i]);
            $('#myWizard').wizard('removeSteps', disabledSteps[i], 1);
        }
dskoda1
  • 109
  • 10