Create and Customize a Card Gallery in Microsoft Power Pages

Create and Customize a Card Gallery in Power Pages

A Card Gallery is a data-driven component in Microsoft Power Pages that displays records from Dataverse tables and views using visually appealing cards. Card galleries provide a modern and responsive way to present information such as products, services, employees, events, and business records.

Tip: Card Galleries automatically create responsive layouts that improve user experience across desktop, tablet, and mobile devices.

What is a Card Gallery?

A Card Gallery displays data from Dataverse records as individual cards. Each card can contain images, titles, descriptions, buttons, hyperlinks, and other information, allowing users to browse records in a visually engaging format.

Add a Card Gallery

Open Power Pages Design Studio.
Select the page where you want to add the gallery.
Choose the section where the gallery should appear.
Hover over an editable area on the canvas.
Select Card Gallery from the component panel.
Configure the gallery settings.
Save and publish your changes.

Choose a Layout

After adding a Card Gallery, select Card Gallery Design to choose the layout that best fits your website design and user experience requirements.

Grid Layout
Image-Focused Layout
Content-Focused Layout
Custom Styled Layouts

Configure Data

The Data configuration section allows you to connect the gallery to Dataverse tables and views.

Select the Data tab.
Choose the Dataverse table.
Select the Dataverse view.
Bind card elements to table columns.
Configure images, titles, descriptions, and actions.
Rearrange or disable elements as needed.

Supported Column Types

Element	Supported Data Types
Title	Single Line Text
Phone	Phone, Whole Number, Decimal
Description	Rich Text, Text Area, Phone, Number, Date/Time
Image	File (Image)
Button	Label: Text, URL: URL/Webpage
Text Hyperlink	Label: Text, URL: URL/Webpage
Custom Text	Single Line Text

Customize Card Elements

Each card can be customized by binding Dataverse columns to visual elements.

Display record images.
Show titles and descriptions.
Add action buttons.
Create navigation links.
Display custom text fields.
Control element visibility.
Reorder card elements.

Add a Card Gallery Using Liquid Code

Developers can add Card Galleries programmatically using Liquid templates. This approach provides greater flexibility and allows galleries to be embedded within custom page layouts.

Note: A new Card Gallery can be created without data binding or configuration using the default Liquid tag provided by Power Pages.

Add an Existing Card Gallery

To display an existing Card Gallery, use the corresponding Liquid tag and replace the gallery identifier with the ID of the gallery you want to display.

Replace:
{your card gallery id}

With:
The ID of your existing Card Gallery record.

Benefits of Card Galleries

Modern and responsive layouts.
Improved user engagement.
Easy Dataverse integration.
Visual representation of business data.
Mobile-friendly experience.
Low-code configuration using Design Studio.
Advanced customization using Liquid code.

Best Practices

Use high-quality images.
Keep card content concise.
Choose layouts that match your branding.
Use meaningful action buttons.
Optimize Dataverse views for performance.
Test responsiveness on multiple devices.

Summary

Card Galleries in Microsoft Power Pages provide a powerful and visually appealing way to display Dataverse data. With support for responsive layouts, customizable card elements, and Liquid code integration, they help organizations build engaging and professional web experiences.