Use controls and functions to create a dynamic formula

Completed

The following exercise uses the Button control and the UpdateContext function to create a dynamic formula for changing the DisplayMode of a button.

  1. Navigate to Power Apps.

  2. Select + Create > Blank app > Create (from under Blank canvas app). Name your app and select Create.

  3. Select the Insert menu option and add a Button.

  4. Change the Text property of the button to Add.

    Tip

    You can quickly change the text property of a button control by double clicking on the control itself while in edit mode.

  5. Insert another Button control and change the Text to Clear.

  6. Add one Text label and one Text input to the canvas.

  7. Rename the text input control tiAmount, and in the Default property delete "Text input". For the Format,** enter TextFormat.Number. (Refer to the image below for placement of the controls. The image shows the completed exercise.)

    Screenshot of the controls arranged.

  8. Select the Add button (Button1), and set the OnSelect property to:

    UpdateContext({RunningTotal: RunningTotal + Value(tiAmount.Text)})
    
  9. Select the Clear button (Button2), and set the OnSelect property to:

    UpdateContext({RunningTotal: 0}); Reset (tiAmount)
    
  10. Set the DisplayMode property for the clear button to:

    If(RunningTotal > 0, DisplayMode.Edit, DisplayMode.Disabled)
    

    Notice that after you've updated the DisplayMode property, it appears greyed out.

  11. Select the Label (Label1) and update the Text property to our context variable: RunningTotal

  12. Test the app in Preview mode. In the text input, enter a positive number and select the Add button.

    As soon as you select the Add button, the Clear button is selectable again.

  13. Select the Clear button to clear the input field and the RunningTotal.

    For this example, we've used an If function to evaluate whether the RunningTotal is greater than 0. If it's greater than 0, the Clear button becomes editable (DisplayMode.Edit). If the variable has no value or is 0, our button is disabled (DisplayMode.disabled).

    Another way you could achieve the same functionality is to eschew the context variable in the formulas. In this case, you could name a control in the DisplayMode formula. For example, we could use the value from our label control in the formula.

  14. Put the app back in edit mode and select your Clear button. Select the DisplayMode property and change the formula to the following:

    If(Value(Label1.Text) > 0, DisplayMode.Edit, DisplayMode.Disabled) 
    

    Because our label control is storing information as text, don't forget to use the Value function. The Value function converts a numerical string of text into a number. If you attempt to evaluate text against a value, you'll see an error in the formula. Wrapping the label's text property in a Value function assures that Power Apps interprets it as a number.

As you continue to learn, develop, and deploy more apps, you'll see there are usually at least a few ways to create the same functionality by using different controls, functions, and properties.