{"id":38804,"date":"2024-08-05T18:23:13","date_gmt":"2024-08-05T12:53:13","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=38804"},"modified":"2024-08-06T17:35:32","modified_gmt":"2024-08-06T12:05:32","slug":"enhancing-power-pages-portal-with-card-gallery-control","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2024\/08\/enhancing-power-pages-portal-with-card-gallery-control\/","title":{"rendered":"Enhancing Power Pages Portal with Card Gallery Control"},"content":{"rendered":"

\"Enhancing<\/p>\n

Microsoft has introduced an exciting new feature for Power Pages, making it simpler than ever to showcase product information on websites. With the Card Gallery component, users can effortlessly display product details in a visually appealing format, eliminating the need for complex HTML, CSS, or JavaScript coding.<\/p>\n

Solving Real-Life Challenges with Ease<\/strong><\/h2>\n

We will consider a scenario where a sales company needs to display its range of products on its website, complete with essential details. Traditionally, achieving this level of presentation would entail extensive HTML, CSS, and JavaScript coding within Power Pages. However, Microsoft’s groundbreaking Card Gallery feature eliminates this need.<\/p>\n

To learn more about the Add a Card gallery <\/strong>please refer to the below link,<\/p>\n

https:\/\/learn.microsoft.com\/en-us\/power-pages\/getting-started\/add-card-gallery#style-and-configure-your-card-gallery<\/a><\/p>\n

Let’s check how to implement and use the Card Gallery in Power Pages,<\/p>\n

Step 1:<\/strong><\/p>\n

Upon accessing the Power Pages website at https:\/\/make.powerpages.microsoft.com\/<\/a>, users will find a selection of components to add. Please select the “Card gallery”<\/strong> option to insert the component into the desired section of the webpage.<\/p>\n

\"Enhancing<\/p>\n

After clicking on the option, a component will be added to the section, appearing as shown in the picture below.<\/p>\n

\"<\/p>\n

Step 2: <\/strong><\/p>\n

After successfully integrating the Card Gallery component, the next step involves applying stylistic enhancements and configuring the data to be displayed.<\/p>\n

To commence this process, users must click on the “Card gallery design”<\/strong> button at the section’s top-left corner.<\/p>\n

Upon activation, a popup window emerges, presenting two distinct tabs: “Layout”<\/strong> and “Data”<\/strong> as shown below pictures,<\/p>\n

\"Enhancing\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Enhancing<\/p>\n

In the “Layout”<\/strong> tab, users can tailor the visual presentation by selecting specific layouts for products.<\/p>\n

Meanwhile, the “Data”<\/strong> tab serves as the control center for configuring the content showcased within the Card Gallery. Here, users can define the data source and select the fields to be displayed on the cards. By leveraging this tab, users can ensure that only relevant and essential information is presented, enhancing the overall user experience.<\/p>\n

Step 3:<\/strong><\/p>\n

In the Layout<\/strong> tab, users are presented with four distinct options for configuring the card format (for now it is in preview with 4 Layouts):<\/p>\n