Microsoft Power Apps

Power Apps: State Management

Why do we need state? We use state in our applications to preserve values, to preserve user set values. We use state to preserve user choices, to preserve app settings and more.

Disclaimer


WebDev By The Bay is not affiliated with nor is this post endorsed by any company mentioned in this post. 

All opinions belong to the author of this post.

All Copyrights and Trademarks belong to their respective owners.

State management refers to the management of the state of one or more user interface controls such as text fields, OK buttons, radio buttons, etc. in a graphical user interface. In this user interface programming technique, the state of one UI control depends on the state of other UI controls.

https://en.wikipedia.org/wiki/State_management

There are several ways to maintain state in our Power Apps.

References: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/formula-reference

  1. Create a Global variable using the Set function. This will be available to all of your screens.
  2. Create a Context variable using the UpdateContext function. Context variables are only available to the current screen.
  3. Create a Collection using the ClearCollect function. The collection will be available to all screens in your Power App.
  4. Store values in a data source such as SharePoint, SQL Server, Excel files and more.

If you wish to use a Data Source, please take a look at my series on the Power Apps Community Blog. In this series I walk through building a custom Theme Component for Power Apps and how to you can use a SharePoint list to preserve user choices.

Part 1 – Basic Overview

Part 2 – Connect to SharePoint

In this post let’s talk about scenarios 1-3, starting with the Global Variable.

Keep State with a Global Variable!

Step 1 – Add 3 check boxes to an empty screen.

Power Apps - Maintaining State
Power Apps – Maintaining State

Set the Text property of each of the checkboxes accordingly:

  1. Pending
  2. Approved
  3. Rejected

Step 2: Create the Global Variable

In the screen’s OnVisible property or in the App OnStart property create a global variable using the Set function and set it’s value to the string “Pending”.

Set(cbState,”Pending”)

Step 3: Change cbState

Check Box: PendingSet(cbState, “Pending”)
Check Box: ApprovedSet(cbState, “Approved”)
Check Box: RejectedSet(cbState, “Rejected”)

Step 4: Change the Default value of each Check Box

Change each Check Box’s Default property accordingly:

Check Box: PendingIf(cbState = “Pending”,true, false)
Check Box: ApprovedIf(cbState = “Approved”,true, false)
Check Box: RejectedIf(cbState = “Rejected”,true, false)

You’ll find you can only select one check box at a time. Global Variables are available to the entire application.

Keep State with a Context Variable!

Step 1 – Create a Context Variable.

In the screen you placed the 3 check boxes, in the OnVisible property comment out the Set function.

// Set(cbState,”Pending”)

Just below the Set function create the Context variable and set it’s default value to “Pending”

UpdateContext( { cbState: “Pending” } )

Step 2: Change the OnCheck property of each check box

Check Box: Pending :UpdateContext({cbState: “Pending”})
Check Box: Approved :UpdateContext({cbState: “Approved”})
Check Box: Rejected:UpdateContext({cbState: “Rejected”})

Comment out the Default property of each check box and add the following:

As with the Set function, you’ll find you can only select one check box at a time. Context Variables are only available to the current screen.

Keep State with a Collection!

Step 1: Set the onVisible Property

In the screen you placed the 3 check boxes, in the OnVisible property comment out the Set and UpdateContext functions. Or you can create the Collection in the App OnStart property.

// Set(cbState,”Pending”)

// UpdateContext( { cbState: “Pending” } )

If in the OnVisible property, just below the UpdateContext function create the Collection and set it’s field values: ClearCollect( cbState, {Pending: true}, {Approved: false}, {Rejected: false})

Next for each check box, set it’s default value to:

Check Box: PendingLookUp(cbState, Pending).Pending
Check Box: ApprovedLookUp(cbState, Approved).Approved
Check Box: RejectedLookUp(cbState, Rejected).Rejected

Step 2: Set the onCheck Property

Then for each check box, set it’s onCheck property to:

Check Box: PendingClearCollect( cbState, {Pending: true}, {Approved: false}, {Rejected: false})
Check Box: ApprovedClearCollect( cbState, {Pending: false}, {Approved: true}, {Rejected: false})
Check Box: RejectedClearCollect( cbState, {Pending: false}, {Approved: false}, {Rejected: true})

As with the Set and UpdateContext functions, you’ll find you can only select one check box at a time.

Collections are available to the entire application.