New Number Mask Input Component

Universal Dashboard Universal Dashboard Show Off
1

Fellow dashboarders, I found this number mask input component here:-


And although I no longer use Powershell Studio since purchasing UniversalDashboard Professional Edition I did miss the input mask that I had used in previous executable GUI. Not sure about your end users, but mine would add spaces, commas, pound signs etc. Currently apart from validating the control you couldnt say disable all non-numeric keys…well you can now!

So I managed to get this built and working, but didn’t really have a clue on how to bind this to UD so you could read the values of what had been entered…so basically made the component useless…

Then a super-hero team-up involving two different nations occured. @BoSen29 came to the rescue and taught me in the sacred-art of binding to UD.

Then this beautiful component was ready to release:-

Here is a demo in action:-
NumberMask2

Here is the code that makes up the demo:-

Import-Module UniversalDashboard.Community -RequiredVersion 2.8.1
Import-Module UniversalDashboard.UDNumberMask

Get-UDDashboard | Stop-UDDashboard
$theme = New-UDTheme -Name "Basic" -Definition @{
    '::placeholder' = @{
        'color'   = "black"
        'opacity' = "1"
    }
} -Parent "Default"
$dashboard = New-UDDashboard -Title "New Component" -Theme $theme -Content {
    New-UDRow -Columns {
        New-UDColumn -size 2 -Content {
            New-UDNumberMask -Id "num1" -Format "##/##" -PlaceHolder "MM/YY" -Mask "M", "M", "Y", "Y"  -OnChange {
                Show-UDToast -Message "You have entered:-$eventData" -Position topLeft -Duration 2000
            }
            New-UDNumberMask -Id "num2" -Format "###.###.#.##" -PlaceHolder "Ip Address"
            New-UDNumberMask -Id "num3" -Format "####-####-####-####" -PlaceHolder "Formatted Card"
            New-UDNumberMask -Id "num4" -Format "+44 (#####)-######" -PlaceHolder "Phone Number"
            New-UDButton -Text "Toast" -OnClick {
                #Show-UDToast -Message "You typed $(Get-UDElement -Id 'num2')" -Duration 4000
                $val = (Get-UDElement -id "num2").Attributes.value
                Show-UDToast -Message "IP Address:- $val" -Position topLeft -Duration 4000
            }
            New-UDButton -Text "RemoveMe" -OnClick {
                Remove-UDElement -id "num2"
            }
            New-UDButton -text "ShowME" -OnClick {
                Set-UDElement -id "num2" -Attributes @{
                    hidden = $false
                }
            }
            New-UDButton -Text "ClearMe" -OnClick {
                Clear-UDElement -Id "num2"
            }

        }
    }

} 
Start-UDDashboard -Dashboard $dashboard -Port 10005

Big-up to @BoSen29 for all help and support on this component

2 Likes
2

Thanks for the shoutout!

Looking good dude! :slight_smile:

1 Like
3

Sorry I couldn’t come up with a super-hero name for you bro…seriously man cannot thank you enough for helping me out with this!

1 Like
4

Took my time to type this up, but you got the super-sidekick title in this write-up:-


Thanks again @BoSen29

4 Likes
5

Great article to see how to create a custom component (jss + ps1) for all new UD developers out there.

3 Likes
6

This is awesome and something I know I will use often. Is it possible to pass a default value to it? The use case I am thinking is we already had a telephone number for a user and they may only need to change a few digits. Pre-populating it for them would be great.

Thanks again for your work on this!

1 Like
7

Hello @dkkazak thanks for the interest in this component. I am sure what you are asking is possible, I will look into this after work today

8

Hello fella, been a tad busy lately, but I didn’t want to leave this unanswered for too long…here is a working solution of populating the IP address field:-


So this is possible…seemed to be more responsive when setting it via a button click, but this did load the data 222.222.2.22 after a few moments…could just be my old laptop though :roll_eyes:

9

Awesome, I will try that out this week and see how that works. It is always good to learn a few more tricks like this and help me expand my understanding of UD. Thanks again!

1 Like
10

OK. I have finally had a chance to do some testing on this. This is what I am seeing. Since AutoRefresh is on for the column, it means that it just keeps overwriting the value to that field. If I try to update the field, it will be replaced with the static value after the next refresh.

I guess what I was hoping for was something like what new-udinputfield has with the -defaultvalue field.

11

@dkkazak never fear help is here :roll_eyes: well seeming as I put this component out there, and having 4 young daughters gives me very limited testing time, other than the component works, and the parameters passed to it work.
So in the example I posted on github for you, yes indeed with the auto refresh it keeps setting the value back to the value being set via set-udelement…so I put my super thinking cap on :thinking:

Import-Module UniversalDashboard.Community -RequiredVersion 2.8.1
Import-Module UniversalDashboard.UDNumberMask
Get-UDDashboard | Stop-UDDashboard
$theme = New-UDTheme -Name "Basic" -Definition @{
    '::placeholder' = @{
        'color'   = "black"
        'opacity' = "1"
    }
} -Parent "Default"
$dashboard = New-UDDashboard -Title "New Component" -Theme $theme -Content {
    New-UDRow -Columns {
        New-UDColumn -size 2 -Endpoint {
            New-UDNumberMask -Id "num2" -Format "###.###.#.##" -PlaceHolder "Ip Address"
            if ((Get-UDElement -Id num2).Attributes.value -eq $null) {
                Set-UDElement -Id "num2" -Attributes @{
                    value = "222.222.2.22"
                }
            }
        } -AutoRefresh
    }

}
Start-UDDashboard -Dashboard $dashboard -Port 10005

So this will set a default value of 222.222.2.22 if there is currently nothing in the field…however this now allows you to change the values and keep the changed values without over-writing the typed values, as what was happening in the github example.

This may not be the best way…the most prettiest way…or even the smartest way…but it works :crazy_face:

1 Like
12

Hi @psDevUK, sorry for bringing up an old topic. I was trying to find something like this for a dashboard I’m building. The input fields are going to be dollar amounts and I want to prevent people from entering non numbers. I tried using using the component as follows.

New-UDNumberMask -Id 'Price' -PlaceHolder 'Sale Price' -Format "###############.##"
New-UDNumberMask -Id 'Cost' -PlaceHolder 'Our Cost' -Format "###############.##"

Incorrectly thinking it would allow the user to input a “.” to jump to the decimal. Is something like this possible?

13

Hey @RamonMA don’t feel bad for bringing up an old thread, sadly I believe the # represents a literal character, so if you know the limit was $1,000.00 you could do ###.## but no it is not possible to just enter a . and skip to the end. However I did release another component https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDField but unlike the official UD version you can give each field a unique ID, then you can do some simple regex to throw a warning if the correct value not entered. I used this component for like 40+ questions on a form, some answers required yes or no and some a value…yeah I could of used a drop down yes or no, but wanted to keep the form looking consistent, same field type throughout. I can post some code if this is a work-around for you?

14

Appreciate the follow up! And sorry for the late reply, been crazy. I couldn’t get it to work the way I was hoping, so for now, I’m just handling the errors as gracefully as I can. I think the problem is what I’m trying to accomplish, lack of knowledge, but most likely both. My users will enter the price/cost of products, which is normal, but I also have an endpoint refreshing and calculating the margin and margin % and displaying it with different color font depending on the %, before they actually submit the values. I’m still getting some funky errors if someone enters a letter but it’s not breaking, they just close the modal and reopen, it’s a small set of users so I can get away with, you’re using it wrong for now.

15

Dude trust I know all about crazy…I have 4 daughters! Anyways I was thinking back in the day when I used powershell studio they had a masked input field which let you set some regex…well after reading your post instead of searching for “number field” or “numeric field” I thought I would search for “masked input” and boom I found:- https://www.npmjs.com/package/react-input-mask it’s been a while since I built a component, but I believe I could build this, and let you define the custom regex. It will be slightly different to powershell regex but if you look at the examples you should be able to get the gist of it. So I will add this on my list-of-things-to-do and let you know when it is done @RamonMA

16

That would be amazing, I greatly appreciate even you looking at it. Correct me where I’m wrong, the input would allow you to only enter characters based on the defined regex? That way I really don’t need to do any input validation when I do a Get-UDElement? Would this also allow an OnChange parameter?

17

Correct @RamonMA I like to investigate the component, and this one had a demo website, and sure enough if the “REGEX” was defined as a phone number, then it only accepted numbers from the keyboard, so I couldn’t mess it up. So indeed no need for validation. This does look cool, will try to build it over the weekend.

18

Once again, kudos to @psDevUK for another great component :clap:. I’m using the number mask component already and it works great. One thing that would be cool is to allow it to be more dynamic in the format which might be a similar thing that RamonMA was asking about.

I’m looking for a way to have a field to enter a public IP into. As public IP’s aren’t always the same length of numbers it might be a bit confusing for the user. For example:

Public IP: 123.123.123.123
Field format: ###.###.###.###

But for public IP: 213.205.240.30
The user would have to enter: 213.205.240.030

I guess it depends on the limitations of the react component but if it’s possible to have optional formats that would be amazing - Something like:

Format **# . **# . **# . **#
Where * is optional and # is required.

Great work as always :+1:

1 Like