How to Display Multiple Columns in Power Apps Dropdown?

Do you know how to display multiple columns in Power Apps Dropdown? This Power Apps tutorial will explore everything about Power Apps dropdown multiple columns.

Here, we will discuss two ways to display multiple columns in the Power Apps dropdown. Such as:

• How to display multiple columns in the Power Apps dropdown from the SharePoint list
• Display multiple columns in the Power Apps dropdown from the collection.

How to Display Multiple Columns in Power Apps Dropdown [From SharePoint List]

We will discuss how to display multiple columns in the Power Apps dropdown from the SharePoint list here.

Example 1:

1. I have a SharePoint Online List named “Employee Task List“. This list contains the below fields.

Column Name	Data Type
Task	It is a default single line of text, I just renamed it as “Task”
Employee Name	A single line of text
Status	Choice

2. In Power Apps, there is a Dropdown control. This dropdown displays two columns [Single line and Choice], i.e., [Task and Status], with respected records from the SharePoint Online list, as in the screenshot below.

To achieve the above example, follow the below-mentioned steps. Such as:

3. Open Power Apps -> Create a Power Apps canvas app -> Connect the SharePoint list to the app, i.e., [Employee Task List]. Once you connect, it will look like the screenshot below.

4. Insert a Dropdown control [drp_EmployeeTasks] -> Set its Items property code as:

Items = AddColumns(
    'Employee Task List',
    "Task And Staus",
    Concatenate(
        Title,
        " - ",
        Status.Value
    )
)

Where,

• AddColumns() = This Power Apps AddColumns() function helps us to add columns to the table.
• ‘Employee Task List’ = SharePoint Online List
• “Task And Staus” = New Column Name
• Concatenate() = This function concatenates a mix of individual strings and a single-column table of strings.
• Title, Status. Value = SharePoint Columns
• ” – “ = This delimiter used to separate the columns

5. Save, Publish, and Preview the app. The dropdown control will display the two columns from the SharePoint list, as shown below.

Example 2:

1. I will take the same SharePoint Online list [Employee Task List] for this example.

2. In Power Apps, there is a Dropdown control. This dropdown displays two columns [single line of text columns], i.e., [Task and Employee Name], from the SharePoint Online list, as in the screenshot below.

Refer to the below image:

To work around this example, follow the below steps.

3. On the Power Apps Screen -> Insert a Dropdown control and set its Items property as:

Items = Concatenate(
    'Employee Task List'.Title,
    " - ",
    'Employee Task List'.EmployeeName
)

Where,

• ‘Employee Task List’.Title = SharePoint Text Field
• ‘Employee Task List’.EmployeeName = SharePoint Text Field

4. Save, Publish, and Preview the app. The dropdown control will display the two columns from the SharePoint list as shown below.

This is how we can add multiple columns in a Power Apps dropdown from the SharePoint list.

Power Apps Dropdown Multiple Columns [From Collection]

Let’s see how to add multiple columns in the Power Apps dropdown from the collection.

Example:

1. I manually created a Power Apps collection, i.e., [colTravel]. This collection contains the below columns with respective records.

Trip Title	Destination	Airline	Estimated Airfare
Company anniversary trip	Indiana,UK	Alaska Air	6000
Research interviews	Bengaluru,India	SouthWest	800
Design sprint	New York,UK	British Airways	5500
Sales team conference	Georgia,UK	Emirates	6500
Event and conference travel	Indiana,UK	Alaska Air	6000

2. In Power Apps, there is a Dropdown control. This dropdown displays three columns from the collection, i.e., [Trip Title, Destination, Airline], as in the screenshot below.

To do so, follow the below steps. Such as:

3. On the Power Apps Canvas app -> Set the App’s OnStart property code as:

OnStart = ClearCollect(
    colTravel,
    {
        TripTitle: "Company anniversary trip",
        Destination: "Indiana,UK",
        Airline: "Alaska Air",
        EstimatedAirfare: 6000
    },
    {
        TripTitle: "Research interviews",
        Destination: "Bengaluru,India",
        Airline: "SouthWest",
        EstimatedAirfare: 800
    },
    {
        TripTitle: "Design sprint",
        Destination: "New York,UK",
        Airline: "British Airways",
        EstimatedAirfare: 5500
    },
    {
        TripTitle: "Sales team conference",
        Destination: "Georgia,UK",
        Airline: "Emirates",
        EstimatedAirfare: 6500
    },
    {
        TripTitle: "Event and conference travel",
        Destination: "Indiana,UK",
        Airline: "Alaska Air",
        EstimatedAirfare: 6000
    }
)

Where,

• colTravel = Power Apps Collection Name
• TripTitle, Destination, Airline, EstimatedAirfare = Collection Columns/Headers
• “Company anniversary trip”, “Indiana,UK”, “Alaska Air”, 6000 = CollectionRows/Records

4. On the Power Apps Screen [TravelRequestsScreen] -> Set its OnVisible property as:

OnVisible = ClearCollect(
    colTripDetails,
    DropColumns(
        AddColumns(
            colTravel,
            "TripDetails",
            TripTitle & " - " & Destination & " - " & Airline
        ),
        "TripTitle",
        "Destination",
        "Airline"
    )
)

Where,

• colTripDetails = New Power Apps Collection Name
• DropColumns() = This function excludes columns from the collection table
• AddColumns() = This function helps us to add columns to the table
• colTravel = Power Apps Source Collection Name
• “TripDetails” = New Column Name
• TripTitle & ” – ” & Destination & ” – ” & Airline = Collection columns which we want added on the dropdown

5. Then, insert a Dropdown [drp_TravelRequests] control and set its Items property as:

Items = colTripDetails 

Where,

• colTripDetails = Power Apps Collection Name

6. To get the Power Apps collection records -> Click on the App’s Run OnStart option as shown below.

7. Save, Publish, Reload, and Preview the app. The dropdown control will display three columns from the collection, as shown below.

This is all about the Power Apps dropdown multiple columns from the collection.

Conclusion

I hope this Microsoft Power Apps tutorial taught in detail information about how to add multiple columns in the Power Apps dropdown.

Here, we discussed two ways to add multiple columns in the Power Apps dropdown. Such as:

• Add multiple columns in the Power Apps dropdown from the SharePoint list
• How to add multiple columns in the Power Apps dropdown from the collection

Also, you may like some more Power Apps tutorials:

• Display Column Names in Power Apps Dropdown
• Power Apps Dropdown Values Not Showing
• Bind Power Apps Dropdown Items From Collection
• Bind SharePoint Lookup Column in Power Apps Dropdown
• Bind Power Apps Dropdown Control From SharePoint Yes No Column
• Set Default Value in Power Apps Dropdown Control from SharePoint list
• Filter Power Apps Gallery By Multiple Dropdowns