UX Patterns: Multi-select

In many scenarios, you would want to enable certain columns as multi-select. In this blog, let’s look at an example on how to achieve this using PowerApps.

Example: Let’s build a simple application to create Job Profiles. In this application, the user will have to enter Job Title, Description, Job ID, required years of Experience & required skillsets (multi-selectable list).

Backend: I’m going to use SharePoint online as my backend here.

Here is how the end result would look like!

Step 1: Create the following SharePoint Lists

Jobs:

• ID – Integer(auto-generated)
• Title – Text
• Description – Multiline(Plain text)

SkillSets:

• ID – Integer(auto-generated)
• Title – Text
• Description – Multiline(Plain text)

JobProfiles:

• ID – Integer(auto-generated)
• Title – Text
• Description – Multiline(Plain text)
• YearsOfExperience – Text
• JobID – LookUp column to Jobs list

ProfileSkillSets: This list is used to store the Skillsets selected for each Job Profile.

• ID – Integer(auto-generated)
• ProfileID- Integer
• SkillsetID – Integer
• Skillset– Text

You can populate some sample data into Jobs & SkillSets list as in the screenshot above:

Step 2: Create a PowerApps application using the list JobProfiles.

Click on the PowerApps Icon, create an application. Give the application a name – ProfileUploadApp. This creates an application with 3 screens of basic layout to get started with.

                            

Step 3: Add additional data sources for your application.

• Click on View->Data sources. You should be able to see data sources on the right-hand side.
• Click on Add data source, SharePoint connection & enter the SharePoint list URL or select from the list of available links you may have.
• Once you select the URL, choose the lists to add – SkillSets, Jobs, ProfileSkillsets. Click connect and you should see your data sources on right-hand side.

 

Step 4: Modify Edit screen to allow Skillset selection.

Select EditScreen1 from the left pane. Select the EditForm1 control.

Reorder the cards on the form control as below. Rename the header JobProfiles to “Enter your Profile Info.”

Select the Form, and click on Add Custom field under options.

You will see a custom card on the form. Click on Insert->Label, and rename “Text” to “Skillset”.

  

Click on the form, go to Insert tab, select Gallery control and insert a Blank Vertical gallery

Select & move the gallery under the Skillset card. Move it to the bottom and Resize to fit on the screen.

Click the Edit icon on the gallery & Select Insert-> Checkbox. Resize the gallery template and you should see more items on the gallery

    

Select the gallery and set the Items property to “SkillSets” List.

Having the gallery selected, set the Wrap count to 2 using the advanced section on right-hand side.

Step 5: Updating the ProfileSkillSets list

Select the EditForm1, and on the OnSuccess event, write the following code.

RemoveIf(ProfileSkillSets,ProfileID=EditForm1.LastSubmit.ID);

ForAll(Filter(Gallery1.AllItems,Checkbox1.Value = true), Patch( ProfileSkillSets, Defaults(ProfileSkillSets) ,{ ProfileID:EditForm1.LastSubmit.ID, SkillsetID:ID, Skillset:Title }))

Navigate(BrowseScreen1,Fade)

           

Let me explain the above formula. We are doing three steps here.

• Step 1 is to remove the Skillsets already associated with the ProfileID, if any from ProfileSkillSets list. Here we are comparing ProfileID against the EditForm1’s last submitted Record’s ID. It is useful to delete the records, when you are editing an existing Profile and updating the skillsets.
• Step 2 is to write all the new Skillsets selected, into the ProfileSkillSets list, for the newly created Profile. The formula ForAll consists of two parts. First part is the table to be acted upon. Second part is the formula to evaluate for all records on the table. Here is the link for more documentation on using ForAll. In this scenario, we are filtering the checked items on the gallery in the first part. In the second part, we are using  a Patch to create new records on ProfileSkillsets list, for each checked item in the first part.
• Navigate back to BrowseScreen1 once the form data is submitted and is successful.

Step 6: Run the application and create new Profiles.

Fill in the data on the form and submit the form using the Submit Icon on right top.

 

You will be navigated to the Browse screen with new Profile created. Check the data written back onto your SharePoint lists as well.

Step 7: Display Skillsets on all screens

BrowseScreen1:

Click the edit icon on the gallery and insert a new label. Set the Text property to the following formula.

“Skillsets: |”& Concat(Filter(ProfileSkillSets,ProfileID=ThisItem.ID),Skillset&”| “)

In this formula, we are filtering ProfileSkillSets, based on each Profile, and concatenating the skillsets using a Vertical bar separator.

DetailScreen1:

Reorder the cards as below. And click on add custom field under options.

Insert two labels, one for header and one for skillsets chosen. Set the label text to the following code:

“|”& Concat(Filter(ProfileSkillSets,ProfileID=BrowseGallery1.Selected.ID),Skillset&”| “)

Here, we are populating the skillsets for selected profile on the gallery using the same formula as before.

EditScreen1:

Select the Checkbox control in the gallery, and set the Default property as follows:

If(!IsBlank(LookUp(ProfileSkillSets,ProfileID=BrowseGallery1.Selected.ID && SkillsetID=ThisItem.ID)),true,false)

In this code, we are checking if each Skillset listed in the gallery is already added in the ProfileSkillSets list, for the selected ProfileID. This code is written on the Default property of the checkbox. Hence, if the expression evaluates to true, then the checkbox will be marked as Checked, making it easier for the user to edit the skillsets.

Your application is ready with a multi-select pattern! Do reach out to me with any questions or suggestions.