Ability to validate a UDStepper Step

Universal Dashboard
1

Hey adam,

I have build a UDStepper that consists of 4 Steps

  1. Step: Provide Customer Info
  2. Step: Provide some settings for the first application
  3. Step: Provide some settings for the second application
  4. Step: A summary of what was provided in the all the steps.

I want to have the ability to validate each control in a UD Stepper page.
For example are all textboxes filled with a value. If not do not continue
to the next step. Show the errors.

At the moment if I want to have validation I wrap all controls into a form.
But in A UDStepper control It does not make sense to wrap every step into a form,
because I then have buttons for submitting the form and I have the buttons
for continuing to the next page.

That’s very confusing for the user and for me as well, because I do not know witch button to click and if I submit the form I have to click next to proceed to the next step.

Furthermore the buttons for the stepper control are not correctly aligned. I think they are missing some margin from the left of the screen.

Do you have a date when the validation of the stepper control will be implemented?
Do you have any plans to implement a validation parameter on the control itself?

If you need sample code for review the stepper please tell me.

Greetings
Constantin

2

Hey @constantinhager,

What I’m thinking of for the Stepper is something like:

New-UDStepper -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep1' 
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep2' 
    } -Label "Step 2"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep3' 
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -OnValidate {
    # Stepper data so far 
    $Input = $Body | ConvertFrom-Json
    
    if ($Input.username -ne 'valid) 
    {
           New-UDStepValidationResult -ValidationError 'User name is not valid.'
    } 
}

The UI experience would be that the user would click next and then the validation script block would run. If the validation result was not successful, then an error would be shown on the current step and the user would not be able to advance.

In terms of date, I think we could make this a 1.3 thing and have it released sometime this month.

1 Like
3

Hey adam,

LGTM. Very consistent.
UDv3 is more user frienldy than UDv2 was.

That would be great. I’m happy to test that with a nightly release (or something else) If you need someone to test the functionality.

4

Thanks for the feedback. Glad to hear you are finding UDv3 more user friendly. I’ll let you know when we have a nightly with this feature included.

5

can this nightly build be integrated into Universal. Do I have to add a framework?

6

It will be a nightly Universal build that will include this update. You’ll be able to just upgrade Universal. If you don’t want to upgrade Universal completely, the framework will be part of the Universal ZIP file and you’ll be able to add that framework to your existing Universal instance for testing.

7

Nice. Thank you.

8

Tonight’s nightly build will have stepper validation. Here’s an example:

New-UDDashboard -Title "Hello, World!" -Content {
    New-UDStepper -Id 'stepper' -Steps {
        New-UDStep -OnLoad {
            New-UDElement -tag 'div' -Content { "Step 1" }
            New-UDTextbox -Id 'txtStep1' 
        } -Label "Step 1"
        New-UDStep -OnLoad {
            New-UDElement -tag 'div' -Content { "Step 2" }
            New-UDElement -tag 'div' -Content { "Previous data: $Body" }
            New-UDTextbox -Id 'txtStep2' 
        } -Label "Step 2"
        New-UDStep -OnLoad {
            New-UDElement -tag 'div' -Content { "Step 3" }
            New-UDElement -tag 'div' -Content { "Previous data: $Body" }
            New-UDTextbox -Id 'txtStep3' 
        } -Label "Step 3"
    } -OnFinish {
        New-UDTypography -Text 'Nice! You did it!' -Variant h3
        New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
    } -OnValidate {
        $Context = $Body | ConvertFrom-Json
        if ($Context.Context.txtStep1 -eq 'good')
        {
            New-UDValidationResult -Valid 
        }

        New-UDValidationResult -ValidationError 'Nooooo! Bad!'
    }
}
9

Hi Adam,

I used the nightly Build from Fri, 24 Jul 2020 06:00:10 GMT

If I copy your code I can’t see anything on the webpage.

If I remove the OnValidate Block, the stepper Appears.

I created a brand new dashboard with UD v3 beta 7.

10

Looks like a test failed. I will get that fixed and publish a new nightly.

11

The latest nightly is now published.

12

I used this link to download:

https://imsreleases.blob.core.windows.net/universal-nightly/94011/PowerShellUniversal.1.3.0.msi

But It still does not work. Am I using the wrong build?

13

That’s the right build. Did you delete the existing frameworks out of %ProgramData%\PowerShellUniversal? Nightly builds don’t increment the framework version so it won’t deploy the new assets.

More info here: https://docs.ironmansoftware.com/getting-started/upgrading#dashboard-components-and-frameworks

14

I deleted the PowerShellUniversal Folder. That did the trick thank you.

I will try that out

1 Like
15

I looked at the validation. There is not so much to test. Looks good to me.
Thank you for your quick work on that feature.

I would say ship It :smiley:

1 Like
16

I’m trying to figure out the logic to get this validation to work on latter steps. For example, I am wanting the validation to occur on Step 3. When I put in the validation code, though, it doesn’t let me get past step one. I’m sure there is something logical I can do around this, but for some reason just don’t know the best way to accomplish it.

Any ideas?

17

The context provides the current step so you should be able to return Valid for any step but the third one.

  $Context = ConvertFrom-Json $Body
    if ($Context.CurrentStep -eq 3 -and $Context.Context.MyValue -eq 'Not a good one')
    {
        New-UDValidationResult 
    }
    else
    {
        New-UDValidationResult -Valid 
    }