Create A Dropdown With An Other Option In Power Apps

Dropdown menus allow app users to select a pre-defined value from a list of options. But sometimes you want the user to fill-in their own value using a text input their selection cannot be found in the list. In this article I will show you how to create a dropdown with an other option in Power Apps.

Expense Claims App

The Expense Claims App is used by employees at a company to request repayment for business expenses such as travel and office supplies. Employees enter the date an expense occurred, a short description, the expense amount & currency and after submitting the claim they receive a cheque.

Currency is a choices column that includes the most popular options (US, Euro, Canada) but sometimes payment in another currency is necessary.

Open Power Apps and start a blank app from scratch. Connect to the Expense Claims SharePoint list and insert an Edit Form on the canvas. It will include a currency dropdown (technically called a combo box) with the options USD, Euro and CAD.

To add an ‘Other’ option change the Items property of the dropdown to this code.

Ungroup(
     Table(
         {DropdownOptions: Choices('Expense Claims'.Currency)},
         {DropdownOptions: ["Other"]}
     ),
     "DropdownOptions"
 )

Now when we click on the dropdown an ‘Other’ option is included at the bottom.

Allow A Fill-in Option With A Text Input

When an employee selects ‘Other’ from the dropdown a text input should appear where a custom value can be filled-in. Create a text input called txt_Currency and place it directly over top of the dropdown cmb_Currency.

The text input should only be visible when the dropdown is not. Put this code in the Visible property of txt_Currency.

!cmb_Currency.Visible

Likewise, the dropdown should only be visible when the selected value does not equal ‘Other’. Use this code in the Visible property of cmb_Currency.

Self.Selected.Value<>"Other"

Test the feature we just created by selecting ‘Other’ from the dropdown. Make sure it behaves just like the image below.

Next, we will create a way for employees to return to the dropdown if they no longer want to use a custom value. Insert a cancel icon called ico_Currency on the right side of the text input.

Clicking the button will reset both the dropdown and the text input to show blank values. Write this code in the OnSelect property of the icon.

Reset(cmb_Currency);
Reset(txt_Currency);

The icon must only appear when the text input is also showing. Use the same code as the text input in the Visible property of the icon.

!cmb_Currency.Visible

Pressing the icon will now reset the currency field.

Saving The Custom Value To SharePoint

Some additional code is needed to tell Power Apps which value to update the Expense Claims SharePoint list with. Highlight the Currency card in the Edit Form…

…and write this code in the Update property.

If(
    cmb_Currency.Selected.Value="Other",
    {Value: txt_Currency.Text},
    cmb_Currency.Selected
)

One last step: to submit the form make sure the ‘Submit’ button has this code with the name of your form.

SubmitForm(frm_ExpenseClaims)

Fill-in the form and choose an ‘Other’ value, then click submit…

…and your custom value will appear in SharePoint just as expected.

Questions?

If you have any questions or feedback about Create A Dropdown With An Other Option In Power Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.