{"id":39987,"date":"2024-12-13T15:21:29","date_gmt":"2024-12-13T09:51:29","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=39987"},"modified":"2024-12-13T15:21:29","modified_gmt":"2024-12-13T09:51:29","slug":"enhancing-microsoft-power-pages-portal-with-the-modern-list","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2024\/12\/enhancing-microsoft-power-pages-portal-with-the-modern-list\/","title":{"rendered":"Enhancing Microsoft Power Pages Portal with the Modern List"},"content":{"rendered":"

\"Enhancing<\/p>\n

A list is a configurable component designed to display a collection of records on a portal without requiring developer intervention to present the grid. It leverages Dataverse views to render records on Power Pages sites in a grid format.<\/p>\n

Lists are built from Dataverse table views, which can be created either through the Data workspace or within model-driven apps in Power Apps. These lists can be integrated with pages or paired with forms to develop comprehensive web applications.
\n
\nTo learn more about lists and how to configure them<\/a>, please refer to this document for detailed information.<\/p>\n

The modern list (<\/strong>preview) is an enhanced version of the traditional lists in Power Pages, designed to offer better visual appeal and advanced styling features. It includes shimmer loading<\/strong>, which shows an animation while data is being fetched, and infinite scrolling<\/strong>, allowing new content to load automatically as users scroll down. Inline filters<\/strong> enable quick filtering across all columns in the list view, while customizable styling options let you adjust background and font colors, apply alternating row colors, and modify margins and padding for a polished appearance.<\/p>\n

Enable Modern List Preview:<\/strong><\/h3>\n

To enable the modern list preview, simply add a list to any section of your Power Pages portal. You’ll see a toggle labeled “Try the new and improved version of this component.”<\/strong> Turn it on to activate the modern list.<\/p>\n

\"Enhancing<\/p>\n

After enabling the modern list preview, a Design Option with a paintbrush icon will appear. Click on it to access the list of design options.<\/p>\n

\"Enhancing<\/p>\n

The List Design includes three styling tabs: Standard, Header, and Row.<\/strong><\/p>\n

The Standard Style<\/strong> tab offers customization options such as Border, Height, Margin, Padding, and Shadow. Each of these settings can be expanded for detailed adjustments. For instance, in the Margin section, you can apply specific values to individual sides, as shown in the example below.<\/p>\n

\"Enhancing<\/p>\n

The Header and Row<\/strong> tabs allow you to customize properties such as background color, font family, font weight, font size, and border. Currently, the font family offers 45 different options to choose from.<\/p>\n

\"Enhancing<\/p>\n

In the Row tab<\/strong>, there is an additional option called Banded Row<\/strong>, which is turned off by default. Enabling this option allows you to apply a banded design to the rows in your list by selecting a specific color and adjusting its opacity level.<\/p>\n

\"Enhancing<\/p>\n

Copy, Paste, and Reset Options:<\/strong><\/h3>\n

At the bottom of the design modal, you’ll find three additional options: Copy Design, Paste Design, and Reset Design<\/strong>.<\/p>\n

Using the copy<\/strong> option generates the JSON data for the current style, which can then be pasted or reused. Below is an example of JSON data for a design style that has been copied.<\/p>\n

{\r\n\t\"controlType\": \"EntityList\",\r\n\t\"data\": {\r\n\t\t\"table-style\": \"{\\\"margin\\\":\\\"0px\\\",\\\"padding\\\":\\\"0px\\\",\\\"box-shadow\\\":\\\"0px 0px 0px var(--portalThemeColor1)\\\"}\",\r\n\t\t\"header-style\": \"{\\\"root\\\":{\\\"backgroundColor\\\":\\\"color-mix(in oklch, var(--portalThemeColor10), transparent 0%)\\\",\\\"color\\\":\\\"color-mix(in oklch, var(--portalThemeColor7), transparent 0%)\\\",\\\"fontWeight\\\":\\\"700\\\",\\\"border\\\":\\\"0px solid var(--portalThemeColor1)\\\",\\\"fontSize\\\":\\\"15px\\\"}}\",\r\n\t\t\"row-style\": \"{\\\"root\\\":{\\\"bandedRows\\\":\\\"color-mix(in oklch, var(--portalThemeColor3), transparent 0%)\\\",\\\"fontFamily\\\":\\\"Georgia\\\"}}\",\r\n\t\t\r\n\"table-stripes\": \"true\"\r\n\t}\r\n}\r\n<\/pre>\n
You can easily paste<\/strong> the copied design from one modern list to another. This helps save time and ensures a consistent theme across your site.<\/p>\n
Conclusion<\/strong><\/h2>\n
The modern list in Power Pages enhances record display with features like shimmer loading, infinite scrolling, and inline filters. By enabling the preview and customizing styles, users can easily create dynamic, polished grid views, streamlining data management and improving the overall portal design.<\/p>\n
\"Want<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
A list is a configurable component designed to display a collection of records on a portal without requiring developer intervention to present the grid. It leverages Dataverse views to render records on Power Pages sites in a grid format. Lists are built from Dataverse table views, which can be created either through the Data workspace\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2763],"tags":[2901],"class_list":["post-39987","post","type-post","status-publish","format-standard","hentry","category-power-pages","tag-power-pages-portal"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/39987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=39987"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/39987\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=39987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=39987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=39987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}