Numberpad

[dyee4613]

Hi.  I'm trying to build an app that uses a numberpad to fill everything out. 
Example:

Favorite Number: ______
Second Favorite Number: ______

1 2 3

4 5 6

7 8 9

The users would click the favorite number field then select the number from the keypad to fill it in.  The same thing would happen for the second favorite number field.  I hope that makes sense!

[RandyHayes]

@dyee4613 

There is nothing out of the box that would give you that control, but it is easly created.

We do this for a lot of Dialer type apps where we want the person to enter the number to call.

In our case we use a Horizontal Gallery with a Vertical Gallery in it to build the number pad.

Then when the user selects a number, we're just adding it to a variable.

I hope this gives you some insight on your next steps.  If you're stuck, just post back.

[timl]

Hi @dyee4613 

I'd recommend that you check out the excellent project that @KickingApps shared here.

https://powerusers.microsoft.com/t5/Community-Apps-Gallery/Numeric-Keypad/m-p/175267

This provides you with the UI for your numeric keypad. Then through the OnSelect property of each button, you can append the number that the user entered with the UpdateContext (or Set) function. Like @RandyHayes says, post back if you need help on the specific syntax.

[dyee4613]

@timl Thank you!  I saw his awesome app.  That looks a little beyond me ability but I reached him to him to see if he could help prior to making this thread.  

@RandyHayes Could you point me to an example or some fake code to give me an idea how this would work? I'm having trouble visualizing this.

[dyee4613]

double post. delete please.

[RandyHayes]

@dyee4613 

Check out some of the samples mentioned here.

Two galleries were to make the grid of numbers with, really, only one button to work with.  If you spread a bunch of buttons, you will be dealing with formulas for each one of them.  That can get out of control quickly.  Much easier to work with just one.

I will get back with you later on some specifics, but in the meantime, check the samples mentioned.

[KickingApps]

@dyee4613 Sent you a Skype invite; hopefully we can get you all set up this evening! Thanks for the mentions @RandyHayes @timl 

[RandyHayes]

@KickingApps I finally got a chance to download and look at that template...pretty cool.  I like the slide up and down feel.

@dyee4613 I did mention that I would throw some specifics at you later, and as promised.  I have attached a NumPad sample that we've used in Apps.  

You asked why the two galleries - that was my approach to horizontal rows and vertical columns.  And doing so, instead of having buttons for each number and an endless positioning and updating OnSelect's...this solution has 4 primary controls in it - 2 galleries, a label and a circle.  Plus 5 other controls - 1 for erase, 1 for cancel, and 3 to make it look pretty.

There are two variables it uses: one is showNumPad, which shows or hides the pad, and one is numberEntered, which is the number that has been entered. No other variables or collections needed.

Feel free to use all or parts of it if you'd like.

Hope this helps some.

[dyee4613]

@KickingAppsYep.  I accepted.  I'm excited to meet you!  I think I'm getting pretty close.

@RandyHayesI was playing around with your app and it's exactly what I was looking for.  The only thing left is to add in functionality for multiple input fields instead of one.  From there, all I have to do is layer my existing app logic on it and it should be good to go!

[RandyHayes]

@dyee4613 

For the multiple fields, that gets a little tricky.  

I just went off on an adventure to make this Numberpad a Component and try to use the new component feature.  This all went very well - until I attempted to add a second Numberpad component to the screen.  At that point things went bad.  @Mr-Dang-MSFT is there an issue with having two (or more) of the same component on a screen?  Seems that when there is, the screen gets its values from the wrong component.  I need to experiment more with that concept, but that would be Awesome if it worked.

So, doing it for multiple fields would involve switching aroung the variable that is "responding" to the input.  I have not put this to the test because I was really banking on the Components being the home run, but basically you would need to set a variable when a user clicks on one input over the other.  Then using a switch or If statement, you could fill in the value based on that variable.  If you and @KickingApps don't get it sorted out and need more on that, I can put that together a little better.