If you are operating a PowerApp on a touch device where you have to input Numbers in a frequent manner, you might drive users crazy if they have to tap on a textinput field and wait for the touch device to load the native keyboard for each input cycle.

In order to improve the input experience in a current PowerApps project, I decided to design a NumPad for touch devices. If you are facing same requirements the following tutorial might be worth reading.

Preview

Preview of the NumPad we are going to build

Adding the Target Field

First of all let’s add a target field. As I want to make it also accessible for non-touch devices, I’ll use a textinput field. You might also use a label field to display the result.

Added New Target Field

Of course we don’t want the field to show “Text input” but our entered value. To allow that, we’ll

  • initialize a text variable (varNumPadValue) using the “OnVisible” property of our actual screen
  • set the “Default” property of our target field to use the text variable

Screen’s OnVisible Property

UpdateContext({varNumPadValue: "0"})

Target Field’s Default Property

varNumPadValue

Result

Set Target Field to Text Variable

Preparing the NumPad

As you might have realized in my last blog post about creating flexible menus PowerApps gallery controls can be used for more than just listing table items.

In this case, I’d also like to take advantage of the gallery functionality. To have items for display, we will start collecting our NumPad’s values and add the following to our Screen’s “OnVisible” property

ClearCollect All Gallery Values

Code For Collecting Gallery Items

UpdateContext({varNumPadValue: "0"});
ClearCollect(
    col_NumPad,
    {Label: "1"},
    {Label: "2"},
    {Label: "3"},
    {Label: "4"},
    {Label: "5"},
    {Label: "6"},
    {Label: "7"},
    {Label: "8"},
    {Label: "9"},
    {Label: "."},
    {Label: "0"},
    {Label: "DEL"}
)

Basically we are using the ClearCollect function, to build a collection of items to display in our gallery control. Finally you might want to reload the screen in order to start the ClearCollect.

Creating the Gallery for NumPad Control

We add a gallery control and set up the following

  • set gallery name to galNumPad
  • set gallery’s “Items” property to our collection (col_NumPad)
  • set “Wrap Count” property to 3 (Line break each 3 items)
Prepare Gallery – “Items” and “Wrap Count” property

In the next step we are going to shape the gallery template and add a label field.

To shape the gallery template, you have to click on the small pencil in the upper left corner of the gallery.

Shape the Gallery Template

Once you clicked the pencil, you might drag the frame to fit your desired format. Now perform the next steps as follows

  • add a label field
  • adjust the label’s size to completely cover the gallery template
  • set the label’s “Border style” property to “solid”
  • set the label’s “Border color” property to your prefered color
  • set the label’s “Text alignment” property to “center”

Result After Shaping the Template and Adding the Label Field

Finished Gallery Layout

Bonus: Add Hover and Press Colors to the Gallery Items.

As we all like things neat we are going to satisfy the users with some visual feedback. To achieve this, we are

  • laying a rectangle over the label field
  • make the rectangle to fill the complete gallery template
  • edit “Fill” property
  • edit “Pressed fill” property
  • edit “Hover fill” property

Fill Property

//Invisible
RGBA(0, 0, 0, 0)

Pressed Fill Property

//20% transparency if pressed
RGBA(0, 188, 242, 80%)

Hover Fill Property

//70% transparency if hovered
RGBA(0, 188, 242, 30%)
Bonus: Hover and Press Effect

Just launch the app and see how nice it looks when you hover or press a number on your new NumPad 🙂

Adding Logic: Make the NumPad Control the Textinput

Now as we have both prepared in our PowerApp, the NumPad and the target field, we are going to do the magic – we’ll start to setup the “OnSelect” property of our gallery.

On first sight, it might seem a lot of code, but in detail it’s really straight forward.

Gallery Items “OnSelect” Property

In detail, we are doing the following steps to make our PowerApps NumPad work

  • First, we need to separate functionality from “adding” values and “substracting” values, therefore we switch functionality if the pressed button is “DEL” or any other button on our NumPad
  • If the item is “DEL” we want to substract the last value
    • As we don’t want the target field to be blank, we set it to “0” if delete the last number
    • If it’s not the last number, we just shorten the value by the last number by reading the actual content and setting the variable to the actual value minus the last number
  • If the item is not “DEL” we want to add values
    • As we don’t want to produce values like “0324” but “324” we check if the actual value is “0” and if it is, we completely replace it with the first, pressed number.
    • If the value is not “0”, we use the “Concatenate” function to set the variable to a join of the actual value & the pressed value
//Switch Function, depending on pressed item
Switch(
    //If the item is "DEL"
    ThisItem.Label,
    "DEL",
    If(
        //Check if lenght of target field is 1
        Len(TargetField.Text) = 1,
        //If true, set the variable to "0"
        UpdateContext({varNumPadValue: "0"}),
        //If false, get the length of the targetfield text, take all characters from left with reduced length by 1 and set the variable to this value
        UpdateContext(
            {
                varNumPadValue: Left(
                    TargetField.Text,
                    Len(TargetField.Text) - 1
                )
            }
        )
    ),
    //If the item is not "DEL"
    If(
        //Check if the variable is = "0"
        varNumPadValue = "0",
        //If true, set the variable to the value of the clicked item
        UpdateContext({varNumPadValue: ThisItem.Label}),
        //If false, set the variable to a join of the actual target field value & the value of the clicked item
        UpdateContext(
            {
                varNumPadValue: Concatenate(
                    TargetField.Text,
                    ThisItem.Label
                )
            }
        )
    )
)

Final Result

Our Working NumPad