Create a pills-like effect in Power Apps galleries from multiple SharePoint lists

15-May-2024 15-May-2024 558 words 3 minutes

/powerplatform/PP-pills-like-effect-POST.png

Contents

Today, we’ll create something visually useful for our galleries 😁 How about “something” that would make us recognize what type of training we’re looking at, quickly, and at a glance? Sounds great BUT we may have a couple of possible scenarios depending on how our source data is structured.

Let me explain.

Scenario 1

Let’s imagine our company built an Power Apps app for users to browse trainings available and we display the catalogue over a gallery.

If every training session is located in the same SharePoint list, then we could simply have a choice column with either the training provider, or the technology focused on for this training. Then we retrieve the values directly. But how could we do it IF the values are located in multiple lists?

Scenario 2

Same app as described above in scenario 1, but the data will be in three (3) different SharePoint lists (one for each type of training / technology):

Microsoft Teams
SharePoint
Power Apps

The pills-like effect will be a great addition for this kind of visual reference with multiple lists, so let’s do it!

SharePoint lists

Our SharePoint data is organised as follows.

The fields (columns) for each list are the same.

Power Apps

In our Power Apps app, let’s first connect to our data source (SharePoint) and add our three (3) lists mentioned above. Then, create your Collections and a main Collection so we can use this data into a single gallery. The items property of the gallery will be my main Collection called colAllReqsLists.

What we can observe when we plug everything in, is that we cannot identify what the training type is about. In our case, the technology we focus on during the course.

So how can we add an “identifier” in the gallery?

SharePoint Trick

The trick here will be to add another column in SharePoint to store the technology. This column will be of type text for simplicity, and will look like this:

You can hide this column later, as it has no other purpose than just being a “helper” for our gallery. Make sure to refresh your data sources in your Power Apps app AND refresh your Collections for this column to be taken into account!

SharePoint Default Value

When you create this text column, make sure to add the value as Default value. Why? Because it’ll be inserted BY SHAREPOINT when creating a new item. And SharePoint will do the work instead of adding manually this value when you create a new item from inside your Power Apps!

Add a Pills-Like Effect

Now let’s go back to our gallery and add that famous effect!

Select the first row in your gallery (aka the template row) and give yourself some space. Then:

Add a button
Set its Display Mode property to View
Set the Border radius to 50
Adjust the Font size to your preference

The results at this point should look like this:

Now select the button in the first row again, and in its Text property, add the following formula:

If( ThisItem.Technology = "SharePoint", "SharePoint", ThisItem.Technology = "Teams", "Teams", ThisItem.Technology = "Power Apps", "Power Apps" )

You can also improve visuals by adding the products color in the Fill property! 😎

If( Self.Text = "SharePoint", ColorValue("#016a71"), Self.Text = "Teams", ColorValue("#4c52b8"), Self.Text = "Power Apps", ColorValue("#8d2c85") )

Thanks for reading! 🙂