Canvas Apps Controls

How to reset the people picker control?

People queuing outside a Louis Vuitton store
People queuing outside a Louis Vuitton store

Introduction - People picker control

People picker is one of the several Fluent UI controls that are part of the Creator Kit released by the Microsoft Power CAT team. Follow the instructions here to install the Creator Kit. To learn more about the control, click here.

Problem in resetting the control

There are a lot of properties that Power Apps makers have gotten used to with the classic controls, that are missing from most of the modern / Fluent UI controls. The people picker control has no Reset property. This means that once a user selects a bunch of records, there is no way to programmatically clear the selections. You also cannot use the Reset() function. It throws the following error:

Error when using the Reset function on a people picker control
Error when using the Reset function on a people picker control

Key properties of the people picker control

The following are some of the key properties:

  1. Suggestions_Items - List of Suggested members to pick from (e.g. Users, Accounts Dataverse tables etc.)
  2. Items - The pre-selected Persona(members) to appear on the control (a subset of the above table to have records pre-selected)
  3. PersonaName - The column to be used as the display name of the selected records
  4. SuggestionName - The column to be used as the display name for the suggestions

How to reset the people picker control

Since the Items property represents the list of pre-selected records, the idea is to clear that out when the reset happens. To illustrate this, I am using the following properties of the people picker control:

  1. Suggestions_Items -
    Accounts
  2. SuggestionName -
    "name"
  3. PersonaName -
    "name"
  4. Items -
    If(
        gblReset,
        colAccounts
    )

I then set the OnSelect property of a button used to reset the control as follows:

Set(
    gblReset,
    true
);
ClearCollect(
    colAccounts,
    First(Accounts)
);
Clear(colAccounts);

If you want to reset the control when the users navigates to the screen, use the same code as the OnSelect property of the Reset button above.

Here is a quick demo:

A demo of resetting the people picker control
A demo of resetting the people picker control

I added a gallery just to show the output of the people picker control. Thus, with a simple tweak, you can reset the control although there is neither a Reset property nor does the Reset() function work.

Recent articles

  1. How to add PDF Viewer to a scrollable screen?
  2. Use a timer across screens!
  3. Fix common iOS UX issues

 

3 thoughts on “How to reset the people picker control?”

Leave a Reply