Citizen Developer
explore our new search
How to Design a Modern Multi-view Gallery in Power Apps
Power Apps
Apr 9, 2024 9:22 AM

How to Design a Modern Multi-view Gallery in Power Apps

by HubSite 365 about Tolu Victor

I'm Toluwalakin Victor Sanwoolu. This is a channel focused on anything regarding the Power Platform, Sharepoint, Microsoft 365 & more.

Citizen DeveloperPower AppsLearning Selection

Master Modern Multi-view Gallery Design in Power Apps: A Step-by-Step Guide

Key insights


  • Learn to design a Modern Multiview Gallery in PowerApps that switches between list and grid layouts.
  • Part of a larger series, this tutorial marks part 2 in a Modern PowerApps Design Walkthrough.
  • Introduction to creating a List Gallery Layout covered early in the video.
  • Mid-section explains implementing a Custom Toggle to switch views within the app.
  • Concludes with designing the Grid Gallery Layout, providing a visual alternative.

Exploring Modern Multiview Galleries in PowerApps

In today’s digital age, user interface (UI) and user experience (UX) have become crucial in the success of an application. PowerApps, a powerful tool provided by Microsoft, allows developers to create apps with little to no code. A trend that has been gaining popularity within the PowerApps community is the development of Modern Multiview Galleries. These galleries are versatile components that can dynamically switch between different viewing modes, such as list and grid layouts, catering to diverse user preferences.

By allowing users to toggle between different views, the Modern Multiview Gallery enhances user engagement and improves navigational ease. Creating such a gallery involves designing each layout and implementing a custom toggle mechanism. This feature enriches the application's interactivity, providing a richer user experience. Additionally, the ability to switch views seamlessly can aid in presenting information in a more organized and accessible manner, especially when dealing with vast amounts of data.

Through the walkthrough of creating a Modern Multiview Gallery in PowerApps, beginners and advanced users alike can grasp the foundational concepts and advanced techniques required. This knowledge not only enhances their design and development skills within PowerApps but also contributes to their overall understanding of application design principles focused on user-centric designs.



In the informative video by Tolu Victor, viewers are taken through a comprehensive guide on designing a modern multi-view gallery in Power Apps. This piece serves as the second installment in a series dedicated to modern Power Apps design techniques. The focus is on implementing a versatile gallery that users can easily switch between list and grid layouts, catering to different visual preferences and data presentation needs.

Multi-view galleries have revolutionized the way developers and users interact with data in application development. These dynamic galleries offer a dual-view feature, enabling a seamless transition between different data presentation formats - typically a list and a grid layout. This versatility is particularly valuable in applications where user preferences vary or where the nature of the data dictates a specific view for optimal engagement.

Developing multi-view galleries involves thoughtful design and execution to ensure both views are not only functional but also aesthetically pleasing. The ability to switch views enhances user experience, making applications more adaptable and user-friendly. It caters to users' diverse preferences, allowing them to choose the layout that best suits their needs at any given moment.

The tutorial begins with an introduction that sets the stage for what is to be expected throughout the video. As the video progresses, Tolu Victor delves into the specifics of creating a list gallery layout. This layout is particularly useful for presenting data in a traditional, linear fashion, which can be ideal for readability and straightforward navigation.

Following the list gallery layout, the video introduces a custom toggle feature. This toggle is crucial for allowing users to seamlessly switch between the list and grid layouts. The customization aspect ensures that the gallery not only functions well but also aligns with the visual identity of the app itself.

The latter part of the video focuses on the grid gallery layout. This layout offers an alternative to the list view, showcasing items in a more visually engaging, grid-like formation. It's ideal for instances where visual appeal and spatial arrangement take precedence over linear listing.

By providing a detailed walkthrough that covers both the list and grid gallery layouts, Tolu Victor empowers viewers to enhance their Power Apps development skills. The inclusion of a custom toggle feature further enriches the user experience, offering flexibility in how data is presented within an app.




People also ask

Questions and Answers about Microsoft 365

"How do I make my gallery look good in Powerapps?"

Answer: To enhance the aesthetic appeal of gallery items in PowerApps, consider employing box shadows. Moving away from the conventional blocky design characterized by flat rectangles or separator lines for dividing records, utilizing HTML text along with a div container and introducing box-shadow styling can result in a more visually appealing, cleaner separation of records.

"How do I make an editable gallery in Powerapps?"

Answer: To create an editable gallery in PowerApps, the process involves utilizing a combination of one collection and one variable within the gallery's edit mode.

"How do you create a new view in power apps?"

Answer: To craft a new view in Power Apps, initiate by selecting 'Add view' on the toolbar. Within the 'Create a view' dialog, input both a name and an optional description before hitting 'Create'. Subsequently, in the view designer, click on '+ View column' to incorporate additional columns as required for the view.

"Can we change gallery layout in Powerapps?"

Answer: Modifying the gallery layout in PowerApps can be achieved by navigating to the Properties tab on the right-hand pane, accessing the layout options list, and selecting the layout that displays solely a title. To adjust which fields are displayed, click on 'Edit' next to Fields, then use the down arrow for the title box to make the selection.



Power Apps Gallery Design, Modern Gallery Creation, Multi-View Gallery Power Apps, Design Multi-View Gallery, Beginner Advanced Power Apps, Power Apps Design Tutorial, Modern UI Design Power Apps, Advanced Gallery Tutorial Power Apps