PowerApps: Displaying Multiple Email Fields via ComboBox

Welcome to our guide on displaying multiple email fields using PowerApps ComboBox. Many of you might have faced a situation where you wanted to create an interface for users to save multiple email addresses within a single field. Here, we will break down an efficient way to achieve this. For those who encounter any challenges or require technical guidance on this or related topics, do not hesitate to contact us.

Storing Multiple Email Addresses

When constructing a data entry interface in PowerApps, one might wish to allow users to save several email addresses in one field. This tutorial guides you on how to save a semi-colon-separated list of email addresses in a SharePoint list. Moreover, it explains how to set up a ComboBox control to facilitate the entry and display of these addresses.

Furthermore, we’ll delve into the creation of a data entry interface that allows users to input multiple email addresses via a ComboBox. This ComboBox is linked to the Office365 connector. With this connection, we can set up the ComboBox to display the email addresses of all users within an organization.

Sample App Data Structure

To illustrate, we will create a form that empowers users to generate an email distribution list. The underlying data source will have the following structure:

The list includes a column named “EmailRecipients“. This column will have a semi-colon-separated (;) compilation of email addresses.

Starting, we’ll craft an auto-generated app rooted in this list. Note: It’s essential to incorporate the ‘Office365Users‘ data source beforehand.

Displaying Office 365 Email Addresses in a ComboBox

In the edit form, the default text input control within the ‘EmailRecipients‘ card should be removed. Subsequently, integrate a ComboBox control. Ensure that any errors related to the removal of the text input control are resolved.

Field is Text-Type:

here i will unlock the “EmailRecipients” field datacard and insert a ComboBox and put it on top of textinput (leave the textinput behind) 

now in the ComboBox items property will use this code given below

To ensure the ComboBox displays relevant email addresses as users type, modify the items property of the ComboBox with the formula:

Office365Users.SearchUserV2({searchTerm:Self.SearchText}).value

This command invokes the SearchUsersV2 method, transmitting a searchTerm that echoes the search text users input into the ComboBox.

It’s recommended to keep the default SelectMultiple property value as “true“. This configures the ComboBox to permit the entry of an array of email addresses.

For tailored results, adjust the display fields and search field properties accordingly. For instance, set them to “Mail” to exhibit the email address.

Saving Multiple Email Addresses

Revise the form to correctly save email addresses by altering the update property of the card to:
change the “” datacards ‘Update’ Property with the below code (remember ‘comboEmails’ will be changed with your combobox name)

Concat(comboEmails.SelectedItems, Mail & ";")

Reference: Concat and Concatenate functions

Displaying Stored Email Addresses

To ensure the form accurately presents the stored email addresses, assign the DefaultSelectedItems property of the ComboBox control the following:

RenameColumns(Split(ThisItem.EmailRecipients, ";"), 
              "Result", 
              "Mail")

As the DefaultSelectedItems property anticipates a table value, we invoke the split function. This splits the semi-colon-separated list of email addresses into a table. For our case, the ComboBox control expects a column labeled “Mail“. Consequently, we use the RenameColumns function to change the column name from “Result” to “Mail“.

Testing Your Configuration

With these steps completed, you can execute the app. This enables users to save and retrieve multiple email addresses through a ComboBox seamlessly.

Conclusion

Creating a PowerApps data entry interface for storing multiple email addresses in one field is a streamlined process. By saving these addresses as a semi-colon-separated list and leveraging a ComboBox control, users can efficiently input and view these addresses. This tutorial provided a step-by-step guide to realize this functionality. Should you have any further questions or require assistance on this topic, please don’t hesitate to reach out to us. We’re here to help, and our team is equipped to provide solutions tailored to your needs.