Power Apps Gallery SharePoint [With 15+ Examples]

In this Power Apps Tutorial, we will learn how to work with SharePoint within the Power Apps gallery. We will also discuss the following topics:

  1. powerapps gallery to sharepoint list
  2. powerapps gallery sharepoint image
  3. powerapps gallery sharepoint refresh
  4. powerapps gallery sharepoint with multiple data sources
  5. powerapps gallery sharepoint list view
  6. powerapps gallery sharepoint attachments
  7. powerapps gallery sharepoint list filter
  8. powerapps gallery sharepoint with headers
  9. powerapps gallery sharepoint remove duplicates
  10. powerapps gallery sharepoint multiple filters
  11. powerapps gallery sharepoint with checkbox
  12. powerapps gallery filter sharepoint list
  13. powerapps gallery sharepoint yes no field
  14. powerapps save or submit or update gallery to sharepoint
  15. Power Apps gallery sharepoint edit
  16. Power Apps gallery upload sharepoint attachment

Before working with SharePoint, first, we have to sign in to the Power Apps with our respective office365 user ID or Microsoft ID.

Once you have logged in to the Power Apps with your user ID, next, we need to create a canvas app where we will perform all the above examples as per various requirements. To create the canvas app within the Power Apps gallery, the following steps are:

  • On the Home page of the Power Apps, click on Blank App.
  • Navigate to the Blank canvas app.
  • Click on Create.
  • Give a name to the app.
  • Select a format (Tablet or Mobile).
  • Press Create.

Now, we can see a default screen on the Power Apps. Where we can build galleries, data tables, etc and connect to them with data sources such as SharePoint, Excel, etc.

Power Apps default screen
Power Apps default screen

Also Read: Power Apps Gallery Patch [With Various Examples]

Power Apps gallery SharePoint

Here, we will see how to add a gallery to the Power Apps screen. Then we will see how to connect the gallery with SharePoint.

Before that, we prepared a SharePoint list named Products, having some random columns such as:

  1. Title (default)
  2. Image (Image)
  3. OrderDate (date and time)
  4. DeliveryDate (date and time)
  5. Price (Currency)
  6. Delivered (Yes/No)
  7. ParentCompany (Choice)
  8. Address (Single line of text)
  9. ProductNumber (Number)
powerapps gallery SharePoint
powerapps gallery SharePoint

Now, we will move to the Power Apps and add a gallery to the Power Apps screen. Navigate to the Insert tab > Gallery > Select any gallery as per your requirement.

Suppose, we have selected a vertical gallery. It will appear as a blank vertical gallery on the screen like below:

powerapps gallery use sharepoint
powerapps gallery uses SharePoint

Now, we will connect the above SharePoint list to the gallery. To do this, the following steps are:

  • On the right side gallery’s properties panel, we can find the option ‘data source’.
  • Click on that. Search Sharepoint.
  • Select the SharePoint site address.
  • Choose your site and SharePoint list i.e., Products.
  • Create.
powerapps gallery to SharePoint list
powerapps gallery to SharePoint list

This is how to add SharePoint to the Power Apps gallery.

Also, Read: Power Apps Data Table [Complete Guide]

Power Apps gallery SharePoint image

Now we will see how to display the image column in the Power Apps gallery. This feature is recently released by Microsoft in October 2021. There is an Image control in Power Apps, by which we can able to display the images from the SharePoint list.

Power Apps images can be displayed in four different sizes such as:

  • Small
  • Medium
  • Large
  • Full

Also, we can customize the Image position such as:

  • Center
  • Fill
  • Fit
  • Stretch
  • Tile

Now we will see how to display the SharePoint images on the Power Apps gallery. We are going to use the previous SharePoint list that contains an Image column. Next, we will build a horizontal gallery using the above SharePoint list as the data source.

powerapps gallery sharepoint image
powerapps gallery SharePoint image

As there is an image column inside the SharePoint list, so it displays those images without any expressions. This is how to display the SharePoint image within the Power Apps gallery.

Also check: Power Apps Dropdown Control with SharePoint

Power Apps gallery sharepoint refresh

Now we will see how to refresh a gallery within the Power Apps. We can refresh the data in the gallery manually and automatically.

To refresh the gallery manually, teh following steps are:

  • On the Power Apps, go to the Data section.
  • We can find the data source there.
  • Click on the ellipses of the data source which you want to refresh and Refresh.
powerapps gallery sharepoint refresh
powerapps gallery Sharepoint refresh

In this manner, we can manually refresh the data source on the Power Apps, and the changes will be reflected in the Power Apps gallery.

Now, we will see how to refresh the gallery automatically. That means when the user opens the app, the gallery data will automatically refresh. To do this, we need to insert the below expression on the screen’s OnVisible property.

OnVisible = Refresh(<Data source>)

In our case, it will be:

OnVisible = Refresh(Products)

Where, Products is the name of the SharePoint data source.

powerapps gallery refresh sharepoint
powerapps gallery refresh SharePoint

Let’s add a new item to the SharePoint list.

powerapps gallery refresh sharepoint list
powerapps gallery refresh SharePoint list

Now, close the Power Apps and again open it. We can find the item has been added to the gallery as well as the list has been refreshed.

Power Apps gallery refresh the SharePoint
Power Apps gallery refreshes the SharePoint

This is how to refresh the SharePoint list via the Power Apps gallery.

Check out: Power Apps Radio Button

Power Apps gallery SharePoint with multiple data sources

Yes, we can add multiple data sources such as SharePoint list within a single PowerApps gallery.

Let’s connect another Sharepoint list(ex– Bike Sales) to the Power Apps. Then build another another gallery to that exit screen.

powerapps gallery sharepoint with multiple data sources
powerapps gallery SharePoint with multiple data sources

We can see on the above screen that we have added 2 galleries with 2 different data sources.

Now, we want to refresh both galleries with one button click. That means when the user clicks on one button, it will refresh both the galleries at a time. To do this, the following steps are:

  • Add a button control to the screen and insert the below expression to the button’s OnSelect property.
OnSelect = Refresh(Products); Refresh(BikeSales);

Where Products and BikeSales are the names of the data sources.

powerapps gallery sharepoint multiple data sources
powerapps gallery sharepoint multiple data sources

Next, we will add a new item to each data source or SharePoint list. Then return to the Power Apps environment, save, publish, and play the app. When we click on the button, we can see that both the galleries got refreshed at the same time.

powerapps gallery with sharepoint multiple data sources
powerapps gallery with SharePoint multiple data sources

This is how we can add multiple data sources to the Power Apps gallery.

Read: PowerApps stuck on getting your data

Power Apps gallery SharePoint list view

In Power Apps, we can view the gallery in different ways. Suppose, we have created a gallery using a SharePoint list like the below.

powerapps gallery sharepoint list view
powerapps gallery SharePoint list view

The above gallery only shows the title and the order date of each product. But we can change the view of the above gallery that will display the images, parent company, address of each item, and many more.

To do this, select the gallery and click on the layout that is presented in the right-side properties panel. In List layout, we can find different types of layouts or views that can be applied to the Power Apps gallery.

powerapps gallery view sharepoint list
powerapps gallery view Sharepoint list

This is how to change the view of the SharePoint list within the Power Apps gallery.

Power Apps gallery SharePoint attachments

In our previous article, we have beautifully explained how to save attachments from the Power Apps gallery to SharePoint. We are referring you to visit that link to get the solution.

Power Apps gallery SharePoint list filter

In our previous article, we described how to filter a Power Apps gallery using a Sharepoint list and different types of scenarios. We recommend that you click on the provided link.

Power Apps gallery SharePoint with headers

Usually, when we are attaching a SharePoint list to the Power Apps, it displays the data without any headers. So in this section, we will see how to attach a SharePoint list with headers on the Power Apps gallery.

Suppose, we have prepared a Power Apps gallery like the below:

powerapps gallery sharepoint with headers
powerapps gallery SharePoint with headers

To add the headers to the gallery, the following steps are:

  • Select the screen, and insert the below expression in the screen’s OnVisible property.
OnVisible = Collect(Column_Header,{Title: "", Qty:"", Color:"", PaymentMode:"",SoldDate:""})

Where,

  • Column_Header – The name of the collection
  • Title, Qty, Color, PaymentMethod, SoldDate – The name of the columns name.
powerapps gallery sharepoint headers
powerapps gallery Sharepoint headers

Next, add a data table to the screen and place it above the gallery. In the data table’s items property, set the collection name.

Items = Column_Header

In the right-side properties panel, click on Edit Fields > Add Fields. Add all the fields. We can see all the fields will reflect in the data table.

powerapps gallery show sharepoint headers
powerapps gallery shows SharePoint headers

This is how to show the SharePoint headers within the Power Apps gallery.

Check: Power Apps in SharePoint

Power Apps gallery SharePoint remove duplicates

In this section, we’ll look at how to remove duplicate data from a Power Apps gallery that contains a SharePoint list called ‘Projects,’ which contains some repeated or duplicate values, as shown below:

powerapps gallery sharepoint remove duplicates
powerapps gallery SharePoint remove duplicates

From the above gallery, now, we will remove all the duplicate items. To do this, we need to insert the following expression in the gallery’s items property.

Items = ForAll(Distinct(Projects,Title),LookUp(Projects,Title = Result))

Where,

  • Projects– The name of the Sharepoint data source.
  • Title– The name of the column.

Once the expression is applied, we can see the duplicate items are removed from the Power Apps gallery.

powerapps gallery sharepoint remove duplicates items
powerapps gallery SharePoint removes duplicated items.

This is how to remove the duplicate items from the Power Apps gallery.

Power Apps gallery SharePoint multiple filters

Previously, we published an article where we described how to use multiple filters within a single Power Apps gallery with different types of scenarios. Kindly check out this link to get the solution.

Power Apps gallery SharePoint with checkbox

Here, we will see how to save SharePoint items from the Power Apps gallery via checkboxes. Suppose we have a SharePoint list named “Vendors” with 2 columns such as Title(Default) and Status(Choices i.e., Will Update Soon, Delivered, Declined).

powerapps gallery sharepoint with checkbox
powerapps gallery SharePoint with checkbox

Also, we have prepared a Power Apps gallery using the above SharePoint list. On that app, we have inserted a dropdown control and three check box controls for choices like the below:

sharepoint with powerapps gallery checkbox
SharePoint with powerapps gallery checkbox

As per the scenario, when the user selects any items from the dropdown list and checks any choices from the check box control, then the item with status value will be updated in the SharePoint list.

To do this, the following steps are:

  • Select a checkbox (i.e., Will Update Soon Check box), and insert the below expression within the OnCheck property.
OnCheck = Patch(
    vendors,
    Defaults(vendors),
    {
        Title:VendorsDropdown.Selected.Value,
        Status:{
           '@odata.type':"#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference",
            Value: WillUpdateSoonCheckbox.Text
        }
    }
)

Here,

  • Vendors – The name of the SharePoint list
  • Title, Status – The name of the SharePoint column
  • VendorsDropdown – The name of the dropdown control
  • WillUpdateSoonCheckbox – The name of the checkbox control.
powerapps gallery using checkbox to update sharepoint list
powerapps gallery using the checkbox to update the SharePoint list

Similarly, insert the below expression in another checkbox’s OnCheck property. Select the Delivered check box and insert the expression in the OnCheck property.

OnCheck = Patch(
    vendors,
    Defaults(vendors),
    {
        Title:VendorsDropdown.Selected.Value,
        Status:{
           '@odata.type':"#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference",
            Value: DeliveredCheckbox.Text
        }
    }
)

Here, the DeliveredCheckbox is the name of the check box control.

Again, we will insert the following expression in the last checkbox’s OnCheck property. Select the Declined check box and insert the expression in the OnCheck property.

OnCheck = Patch(
    vendors,
    Defaults(vendors),
    {
        Title:VendorsDropdown.Selected.Value,
        Status:{
           '@odata.type':"#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference",
            Value: DeclinedCheckbox.Text
        }
    }
)

Here, the DeclinedCheckbox is the name of the check box control.

Now, the app is ready to play. So save and publish it. Play the app in preview mode. We can see when we select any item from the dropdown and check any checkbox, it will save that item to teh SharePoint list.

Suppose, we have selected the item i.e., Gilli from the dropdown and checked the Delivered check box.

powerapps gallery with checkbox update sharepoint
powerapps gallery with checkbox update SharePoint

We can see the item is updated in both the SharePoint list as well as in the Power Apps gallery. This is how to update a SharePoint using the Power Apps gallery with checkboxes.

Also, read: Power Apps SharePoint Button

Power Apps gallery filter SharePoint list

Recently, we published an article where we described the Power Apps gallery filter using various types of examples. We recommend you follow the link to get the solutions.

Power Apps gallery Sharepoint yes no field

Now, we will see how to update SharePoint yes/no field via the Power Apps gallery. Suppose, we have a simple Sharepoint list named ‘Voters list’ having some random columns along with a ‘Yes/no’ column that is shown below:

powerapps gallery sharepoint yes no field
powerapps gallery Sharepoint yes no field

Using the above SharePoint list, we have prepared a Power Apps gallery like the below:

update sharepoint yesno field using powerapps gallery
Update SharePoint yes no field using powerapps gallery

Here, we have used a check box control on the above gallery. When the user checks the check box, the SharePoint list is updated as yes; otherwise, it is updated as no.

To do this, the following steps are:

  • Select the check box control, and set the below expression within the OnCheck property.
OnCheck = Patch('Voters list',ThisItem,{IsEligibleForVoting:true})

Where IsEligibleForVoting is the name of the SharePoint yes/no column.

  • Next, insert the below expression inside the checkbox’s OnUnCheck property.
OnUnCheck = Patch('Voters list',ThisItem,{IsEligibleForVoting:false})
  • Make sure to set the default property of the checkbox as below:
Default = ThisItem.IsEligibleForVoting
using powerapps gallery update sharepoint yesno field
using powerapps gallery update sharepoint yesno field

That’s it! Now save, publish, and play the app in preview mode. We can see that when we check or uncheck an item in the Power Apps gallery, it will be updated in the SharePoint list. Suppose, we have checked the items like below:

Sharepoint YesNo field in Power Apps gallery
Sharepoint YesNo field in Power Apps gallery

We can see the items got updated in the SharePoint yes/no column.

powerapps gallery upadate items in sharepoint yes no field
powerapps gallery upadate items in sharepoint yes no field

Similarly, if we unchecked any item in Power Apps gallery, then it will be reflect in the SharePoint list. This is how to operate SharePoint yes/no column within the Power Apps gallery.

Power Apps save or submit gallery to sharepoint

In this section, we’ll look at how to save or submit a Power Apps gallery item to SharePoint.

There is a SharePoint list having some columns like Title, Age, Address like below:

powerapps save gallery to sharepoint
powerapps save gallery to sharepoint

Using the above SharePoint list, we have prepared a Power Apps gallery.

powerapps gallery save items to sharepoint
powerapps gallery save items to sharepoint

According to the scenario, we will insert three text inputs to insert data, namely Title, Age, and Address, as well as a button on that app. So that when the user clicks the button, the item is submitted or saved in both the gallery and the SharePoint list.

To work with this, the following steps are:

  • First, we will insert 3 text inputs and a button control to the above app like below:
powerapps gallery sharepoint list update
powerapps gallery sharepoint list update
  • To save the gallery items to SharePoint, insert the below expression within the button’s OnSelect Property:
OnSelect = Patch('Voters list', Defaults('Voters list'),{Title: 'Title Txt'.Text, Age: Value('Age Txt'.Text),Address:'Address Txt'.Text}); Reset('Title Txt');Reset('Age Txt');Reset('Address Txt');

Where,

  • Voters list – The name of the SharePoint data source
  • Title, Age, Address – The name of the SharePoint columns
  • Title Txt, Age Txt, Address Txt – The name of the textinputs
powerapps submit gallery to sharepoint list
powerapps submit gallery to sharepoint list

We used Reset() in the above expression to reset each text input once the button is clicked. Save and publish the app now. In preview mode, run the app. Let’s enter some information into the text inputs shown below:

powerapps submit gallery item to sharepoint list
powerapps submit gallery item to sharepoint list

We can see teh item is updated in the SharePoint list as well as in the gallery, once we click on the Save button.

update sharepoint list using Power Apps gallery
update sharepoint list using Power Apps gallery

This is how to update SharePoint list using Power Apps gallery.

Check: How to use Power Apps Gallery Dropdown

Power Apps gallery sharepoint edit

According to the topic, when a user clicks on any gallery item, it will take them to an edit form. So that the user can edit the item and then re-save it to SharePoint.

We already published an article on how to edit Power Apps gallery items in SharePoint to work with this scenario. We recommend that you click on that link to get the solution.

Power Apps gallery upload sharepoint attachment

Recently, we have published an article where we have beautifully explained how to upload attachment(s) from Power Apps gallery to SharePoint list. We recommend you to follow this above link and get the solution as well.

Also, you may like some below Power Apps Tutorials:

Conclusion

From this above Power Apps tutorial, we had learned all about Power Apps gallery with SharePoint and how to work with SharePoint via Power Apps gallery with different types of scenarios. Alos, we have covered below topics such as:

  • How to attach the SharePoint list to the Power Apps gallery?
  • How to show the SharePoint image fields in the Power Apps gallery?
  • How to refresh SharePoint within the Power Apps gallery?
  • How to work with multiple data sources within a single Power App?
  • What are the different types of SharePoint list views available in Power Apps?
  • How to save attachments from Power Apps to SharePoint list?
  • How to filter a sharepoint list in powerapps gallery?
  • How to add sharepoint with headers in powerapps gallery?
  • How to remove sharepoint duplicates from powerapps gallery?
  • How to perform sharepoint multiple filters within the powerapps gallery?
  • How to update the sharepoint list via powerapps gallery with checkbox?
  • How to filter sharepoint list within the powerapps gallery?
  • How to update the sharepoint yes no field via powerapps gallery?
  • How to save or update or submit a gallery item to SharePoint directly from the Power Apps?
  • How to edit an item from the Power Apps gallery?
  • How to upload an attachment(s) from Power Apps gallery to SharePoint?
>