PowerApps, Power Automate, SharePoint, Dynamics 365, Azure, C#: PowerApps: Dropdown (Pre select the text OnLoad)

Tuesday, October 5, 2021

PowerApps: Dropdown (Pre select the text OnLoad)

Hello Friends,

Welcome back with another post on PowerApps. Today, we will see how to show a text as selected in Dropdown. Normally, we bind a dropdown with Display Text and it's relative value (in most cases, an ID). If we save the display text to our data source then there is no issue in binding back on display/edit screen. But, if we are saving the ID of selected item of dropdown to data source then we face issues in binding back on screen. Let's see, how we can do this-

Create a blank PowerApp.
Add a Button-

Name: btnLoadData
Display Text: Load Data

Add a Dropdown-

Name: ddlCountries

Now we need a collection which can be linked with dropdown.
For that, we will use OnSelect property of "btnLoadData".
Add below function on OnSelect property of button-

ClearCollect(
    collCountries,
    {
        ID: 1,
        Name: "India"
    },
    {
        ID: 2,
        Name: "Japan"
    },
    {
        ID: 3,
        Name: "Russia"
    },
    {
        ID: 4,
        Name: "Brazil"
    },
    {
        ID: 5,
        Name: "South Korea"
    },
    {
        ID: 6,
        Name: "Israel"
    }
)

Assign this collection to dropdown Items property.
First part has been completed. where we had make a setup.
Now the actual part comes where we have to show any random text as selected. Let's say we have to show "South Korea" as selected.
Let's add another button-

Name: btnSelectItem
Display Text: Show Selected

Now update the OnSelect property of this button as below-

UpdateContext({varSelectedID:"South Korea"});

It will assign the text to a variable.
Now, we will bind this variable with dropdown Default property.
As you can see, the moment we linked the variable to dropdown, the selected value changed.
As we have to show the default value as selected which was saved in data source, therefore it will work only when the screen loads (because we are using Default property). Once you will change the value of dropdown manually, the purpose of Default gets over.
Now, the main issue: Here we have used text to bind the default property. What if, we were having the ID of item? Then how do we bind this text.
Ha Ha Ha. It's simple. As we have used a collection to bind with dropdown, we will use the same to find the text from ID.
Replace the above code line written on btnSelectItem >> OnSelect property with belwo one-

UpdateContext({varSelectedID:First(Filter(collCountries,ID=3)).Name});

Here we are setting Russia as default selected.
You will be surprised that the selected value is still Japan. The reason is the default value in not getting reset.
For this, we will add one more single line function on btnLoadData >> OnSelect.
```
UpdateContext({varSelectedID:""});
```
It will reset the default selected value of dropdown. Now when we click on "Show Selected" button, Russia will appear as default selected.
Now, play the PowerApp-
Click on Load Data button.
Click on Show Selected button.
This way we can bind the default selected text using value also in dropdown.