🔹 Using Galleries for Data Display in Power Apps – A Complete Guide

📌 Introduction

A Gallery in Power Apps is a control used to display and interact with multiple records from a data source. It allows users to scroll through data, select items, and apply filters, sorting, and search functions.

✅ Why Use Galleries?

📋 Displays multiple records in a structured way.
🔄 Supports filtering, sorting, and searching.
📱 Works dynamically with different data sources (SharePoint, SQL, Dataverse, etc.).
🎨 Customizable layout and design.

🔹 Step 1: Adding a Gallery Control

1️⃣ Open Power Apps Studio.
2️⃣ Click Insert → Gallery.
3️⃣ Choose a gallery type:

Vertical (default, for lists).
Horizontal (for carousels).
Flexible Height (for items with variable text sizes).
4️⃣ Connect to a data source:
Select the gallery.
Click Properties → Items.
Set Items = DataSourceName (e.g., Items = Employees).

📌 Now, your gallery is connected and displays data!

🔹 Step 2: Customizing the Gallery Layout

1️⃣ Select the Gallery → Click Edit Layout.
2️⃣ Choose a pre-defined layout (Title, Title & Subtitle, Image & Title, etc.).
3️⃣ Add or remove controls (Labels, Images, Icons) as needed.
4️⃣ Bind controls to data fields:

Select a Label inside the gallery.
Set Text = ThisItem.ColumnName (e.g., Text = ThisItem.Name).

📌 Now, each record displays correctly inside the gallery!

🔹 Step 3: Formatting and Styling the Gallery

✅ Changing Colors & Fonts

Select Gallery → Format using the Properties pane.
Customize Fill, Border, Font, Color, Padding, etc..
Example: TemplateFill = If(ThisItem.IsSelected, RGBA(0, 120, 215, 0.5), White)

✅ Adjusting Gallery Size

Set the Width and Height dynamically: Width = Parent.Width Height = Screen.Height * 0.6

📌 This ensures the gallery fits the screen dynamically!

🔹 Step 4: Adding Search & Filter to the Gallery

✅ Adding a Search Box

1️⃣ Insert a Text Input (txtSearch).
2️⃣ Modify the gallery’s Items property:

Filter(Employees, StartsWith(Name, txtSearch.Text))

📌 Now, users can search for records dynamically!

✅ Adding a Dropdown Filter

1️⃣ Insert a Dropdown (ddlDepartment).
2️⃣ Set its Items property:

Distinct(Employees, Department)

3️⃣ Modify the gallery’s Items property:

Filter(Employees, Department = ddlDepartment.Selected.Value)

📌 Now, users can filter records by department!

🔹 Step 5: Sorting the Gallery Data

1️⃣ Insert a Sort Icon (icoSort).
2️⃣ Create a Sort Order Variable in OnSelect:

UpdateContext({sortOrder: If(sortOrder="Ascending", "Descending", "Ascending")})

3️⃣ Modify the gallery’s Items property:

Sort(Employees, Name, If(sortOrder="Ascending", Ascending, Descending))

📌 Now, clicking the icon toggles sorting order!

🔹 Step 6: Displaying Images in the Gallery

1️⃣ Add an Image Control inside the gallery.
2️⃣ Set its Image property:

ThisItem.Photo

📌 Now, each record displays its associated image!

🔹 Step 7: Handling Item Selection

1️⃣ Add a Label outside the gallery (lblSelectedName).
2️⃣ Set its Text property:

"Selected: " & Gallery1.Selected.Name

📌 Now, clicking an item updates the label with the selected record’s name!

🔹 Step 8: Adding Navigation from the Gallery

1️⃣ Insert a Button inside the gallery (btnViewDetails).
2️⃣ Set its OnSelect property:

Navigate(DetailsScreen, ScreenTransition.Fade, {selectedItem: ThisItem})

3️⃣ On the Details Screen, set a Label:

Text = selectedItem.Name

📌 Now, clicking the button opens a details screen for the selected item!

🔹 Step 9: Optimizing Performance for Large Datasets

✅ Use Delegable Functions:

Use Filter(), Sort(), and Search() with SharePoint, SQL, Dataverse.
Avoid First(), Last(), CountRows() on large datasets.

✅ Enable Pagination for Large Data:
1️⃣ Add Next and Previous buttons.
2️⃣ Use collections to load data in chunks:

ClearCollect(PageData, Filter(Employees, ID > currentPage * 100 && ID <= (currentPage + 1) * 100))

📌 This improves performance when handling large datasets!

🔹 Step 10: Testing and Deploying the Gallery

✅ Test on Different Devices

Preview (F5) and resize the app window.
Use Power Apps Mobile to check layout.

✅ Publish the App

Click File → Save & Publish.

📌 Now, your gallery is fully functional and ready for users!

🔹 Conclusion

A well-designed Gallery in Power Apps enhances data visibility, user interaction, and app performance.

💡 Key Takeaways:
✅ Use dynamic properties for responsive design.
✅ Add search, filters, and sorting for better usability.
✅ Optimize performance using delegation and pagination.
✅ Allow navigation from the gallery for detailed views.

🚀 Now, your Power Apps gallery is ready to display data efficiently!