A form with a multi-select dropdown with additional information collected for each selected option in Power Apps

Yesterday I was asked on the chat here, if it is possible to use a multi-select dropdown in a form and then ask for each selected option some additional information. In this post the pattern that you could follow.

Use case

In my example I will have a form where I’m asking for working days and then for each working day I will ask for a range of working hours.

The development of the solution all starts with data. In this case SharePoint is used. So I am goin to create two SharePoint lists.

The first list is the My working days list, with the out of the box Title field and a Working days multi select field that will have an option for each of the days of the week.

For the Working days column I’m making sure that the Allow multiple selections is set to Yes.

Now I’m adding a second list. This list will be called Working times.

In this list I’m simply adding 3 text fields. Start Time, End Time and a Person’s Name. These fields are all just simple text fields. We could make the solution slightly more complicated by using different type of fields. But simplicity makes these kind of posts easier to follow.

Building the app with a multi-select dropdown in a form

We can now add a form to the app and make the form have two fields. The Title and the Working days. I’m going to use the Title field to collect the person’s name. When you develop a real app you might want to do some renaming of these fields. But Once again, I’m just making it work. I’m not making this app look pretty.

So how do we now collect the working hour for each of the working days that is selected. We can’t have that form ask for additional information.

Adding an extra gallery

I’m now adding a Gallery to the screen with the form and I’m adding a button, two text inputs and three labels.

After a bit of reorgnising I should end up with the following setup.

For this to work it is important that the Items property of our gallery is set to the SelectedItems of out dropdown control in the form. Now as items are selected the number of items in the gallery will grow.

Ok, that is easy.

Now we have a few save buttons to sort out.

Saving your data

The first save button is on the form. I’m just doing a Patch( I don’t like using the Subm itForm, but you probably could use that in this case too) here to create a new item in the My Working Days list.

Patch(
    'My working days',
    Defaults('My working days'),
    {
        Name: DataCardValue1.Text,
        'Working days': DataCardValue2.SelectedItems
    }
);

Then we get to the save buttons for each of the lines of data in the Gallery.

Patch('Working times', 
         Defaults('Working times'), { Title:  DataCardValue1.Text & "-" & ThisItem.Value,
                                      'Persons Name': DataCardValue1.Text, 
                                    'Start Time': TextInputFrom.Text, 
                                    'End Time': TextInputUntil.Text} )

Once again we are just creating an item in the list using the Patch function. But just imagine if we had to hit that save button multiple times. That is not a particularly nice user experience.

And also the save button will create new items all the time. This is also not what we want. Just imagine if someone changed the time in either of the input boxes, we would now want to update an existing item instead of creating a new one.

Improving the user experience

To improve the user experience we could move the code to the OnChange of the Input Boxes, but that is not a good idea!

Instead we are going to press that button when the data changes:

With the Select(ButtonSave), the code will run when updates are entered. Then we can now hide the Save button to reduce the clutter on the screen, but for the purpose of clarity I will kept them in the above screenshot.

Handling updates and creation of new records

So, the code behind the buttons will need to handle the update of an existing record the creation of a new record if there is no records for a certain person on a certain day.

In my data I’m using the Title field as a unique key that will link the two lists together. Yes, this could be done with lookups or it could be done with any specific key field that you want to use.

With a simple “If” checking if the item already exists, I can now do that update or creation of the record in the Working times list.

If( IsBlank(LookUp('Working times', Title =  DataCardValue1.Text & "-" & ThisItem.Value)),
Patch('Working times', 
         Defaults('Working times'), { Title:  DataCardValue1.Text & "-" & ThisItem.Value,
                                      'Persons Name': DataCardValue1.Text, 
                                    'Start Time': TextInputFrom.Text, 
                                    'End Time': TextInputUntil.Text} ),
                                    Patch('Working times', 
         LookUp('Working times', Title =  DataCardValue1.Text & "-" & ThisItem.Value), { Title:  DataCardValue1.Text & "-" & ThisItem.Value,
                                      'Persons Name': DataCardValue1.Text, 
                                    'Start Time': TextInputFrom.Text, 
                                    'End Time': TextInputUntil.Text} )

)

So now we have a solution, that will give a form where you can select days and a section of the form that displays fields for each selected day. I’m sure that you will find some improvements to make on the above pattern. Feel free to share them in the comments below.