Create A Dropdown With An Other Option In Power Apps

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/create-a-dropdown-with-an-other-option-in-power-apps/. Author: Matthew Devaney.

Create A Dropdown With An Other Option In Power Apps Posted by - Matthew Devaney on - December 20, 2020 88 Comments

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 " ) Code language: CSS ( css )

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 Code language: CSS ( css )

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 " Code language: CSS ( css )

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 Code language: CSS ( css )

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 ) Code language: JavaScript ( javascript )

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. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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. Choices column ComboBox control RESET function SharePoint UNGROUP function Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps