Microsoft has introduced a new tool for Power Pages that makes it much easier to show product details on websites. The new Card Gallery feature helps users easily display product details in a nice and organized way. You don’t need to know complicated coding languages like HTML, CSS, or JavaScript to use it, so it’s easier for more people to create great-looking pages.
How Does the Card Gallery Simplify Web Design?
Microsoft empowers users to focus on delivering high-quality content and improving user experience, making website creation more intuitive and efficient than ever before. This innovation is a game-changer for those looking to quickly and professionally display product details without getting bogged down by technical complexities.
Real-Life Application: Simplifying Property Listings for Real Estate Agencies
Let's consider a scenario where a real estate agency needs to showcase property listings on its website with key details like location, price, and features. Traditionally, this would require extensive coding with HTML, CSS, and JavaScript. However, with Microsoft’s Card Gallery feature, the need for custom coding is eliminated. The agency can now easily display property listings in a visually appealing format, allowing buyers to browse seamlessly without the technical complexity of traditional web design. This saves time and lets agents focus on curating listings and improving the user experience.
Let’s explore how to implement and make the most of the Card Gallery feature in Power Pages.
1. After navigating to the Power Page site at you'll be presented with a variety of components to choose from. To insert the Card Gallery into your webpage, simply select the "Card Gallery" option and place it in the desired section of your site.
Once you click on the "Card Gallery" option, the component will be added to the selected section of your webpage, displaying as shown in the image below.
2. Once the Card Gallery component is successfully integrated, the next step is to apply stylistic enhancements and configure the data for display.
To start, click the "Card Gallery Design" button located in the top-left corner of the section.
This action will trigger a popup window with two tabs: "Layout" and "Data," as shown in the images below. These tabs allow you to customize the gallery's design and select the data to be displayed.
In the "Layout" tab, users can customize the visual presentation by choosing from various layouts for the products.
The "Data" tab acts as the control centre for configuring the content displayed in the Card Gallery. In this section, users can specify the data source and choose which fields to show on the cards. By utilizing this tab, users can ensure that only relevant and essential information is highlighted, thereby enhancing the overall user experience.
3. In the Layout tab, users can choose from four distinct options for configuring the card format (currently available in preview mode with these four layouts):
Layout 1
Layout 2
Layout 3
Layout 4
This selection allows users to pick a layout that best fits their website's design and enhances the visual attractiveness of the Card Gallery.
In the Data tab, two key configurations need to be completed. First, users must select the Data Source, identifying the entity from which the data will be sourced to populate the cards. This step is essential for ensuring that the information displayed is both accurate and relevant to the user’s requirements.
Next, users should specify the View, which determines which fields will be shown on the cards. This selection is vital for customizing the content to align with specific objectives. Within this tab, users can choose from five options for displaying data.
In the scenario described below, we have selected the Product for subscriptions entity as the Data Source, using the Active Product view, which includes all the necessary fields to be shown on the card. There are five customization options available for the card, each allowing users to select specific field types, as detailed below:
Image:
For the Image, users can select a field of the Image type. This chosen field will be displayed as an option, such as “Product Image.”
Description:
In the Description section, all Text type fields will be available for selection (note that Lookup type fields will not be accessible).
Button:
Users must select two fields for the Button option:
Label (a single-line text field available for selection)
Hyperlink (a URL type field available for selection)
Text Hyperlink:
Similar to the Button option, the Text Hyperlink option requires users to choose two fields:
Label (a single-line text field available for selection)
Hyperlink (a URL type field available for selection)
Styling the Card Gallery
Once all configurations are complete, users can style the Card Gallery by clicking the Styling button on the component.
After clicking the Styling button, a window will appear with three tabs: Gallery, Cards, and Style.
Gallery Tab: In this tab, users can apply CSS to the gallery, allowing them to set the background colour, borders, and other styles.
Cards Tab: This tab enables users to apply CSS for styling individual cards within the gallery.
Style Tab: Here, users can apply CSS to the content of the cards, including images, buttons, and text displayed on each card.
Additionally, in the Gallery tab, there is a toggle labelled "Enable Search." When activated, this option adds a search bar to the gallery, enabling users to search for specific products by name or description.
Moreover, the Styling window features two buttons:
Copy Design & Paste Design
These buttons offer convenience for users managing multiple card galleries on the website. Users can design one card gallery, copy the design, and effortlessly paste it onto another gallery, removing the need to manually apply the design to each gallery.
Below is a screenshot of the website after completing all the steps:
In conclusion, the Card Gallery feature in Power Pages simplifies showcasing product information on websites, making it accessible for both developers and non-technical users. It allows for easy customization of gallery appearance and data selection, while features like search functionality enhance user experience. The ability to copy and paste designs across multiple galleries adds convenience. Ultimately, the Card Gallery improves product presentation and helps businesses focus on their core offerings, boosting user engagement and satisfaction.
Frequently Asked Questions (FAQs)
1. What types of data sources can be integrated with the Card Gallery?
The Card Gallery can integrate with various data sources, including Common Data Service entities, SharePoint lists, and external APIs, allowing users to pull in relevant information for display.
2. Are there any limitations on the types of fields that can be displayed in the Card Gallery?
Yes, while users can display a variety of field types, certain fields like Lookup type fields are not accessible in the Description section. It's essential to choose compatible field types to ensure proper display.
3. Can I preview the Card Gallery design before publishing it?
Users can preview their Card Gallery design in real time while configuring it. This feature allows for adjustments to be made on the fly, ensuring that the final appearance meets expectations before publishing.
4. How does the Card Gallery improve mobile responsiveness?
The Card Gallery is designed to be responsive out of the box, automatically adjusting to different screen sizes. This ensures a seamless user experience across various devices, including smartphones and tablets.
5. Can I customize the CSS for individual cards within the gallery?
Yes, the Styling options in the Cards tab allow for unique CSS customization for individual cards. This feature enables users to create distinct styles for different products, enhancing visual differentiation.
6. What support resources are available for troubleshooting issues with the Card Gallery?
Microsoft provides extensive documentation, tutorials, and a community forum for Power Pages users. Additionally, users can access technical support for specific issues related to the Card Gallery through Microsoft support channels.
