![\"Web](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/04\/image.png\")
<\/p>\n<\/p>\n
In this blog, we\u2019ll show you how to create a reusable, dynamic review card component in Power Pages using custom web templates. This allows you to display customer reviews in a visually engaging way\u2014perfect for product pages, homepages, or testimonial sections.<\/p>\n
In the world of e-commerce, showcasing product reviews effectively is key to building trust with customers. Power Pages<\/a>, a part of Microsoft’s Power Platform, enables users to build professional-grade websites quickly and with minimal coding effort.<\/p>\n One powerful way to enhance the user experience is by displaying product reviews as visually engaging cards. Using custom web templates, you can create dynamic review components that not only look great but are also reusable across different pages of your portal.<\/p>\n With just one well-structured template, you can show different reviews on your homepage, product pages, or testimonial sections \u2014 simply by configuring different property values such as reviewer name, text, rating, and profile image. This approach streamlines content management and ensures design consistency across your site.<\/p>\n Prior to implementing the code, please confirm that the following setup has been completed:<\/p>\n 1. Set up a custom table <\/strong>within your environment. 2. Add a few sample records<\/strong> to your new table so you can see how the reviews will appear on the page.<\/p>\n 3.<\/strong> In the Security workspace, grant read access by adding a table permission <\/strong>and assigning it to the relevant web roles<\/strong>.<\/p>\n 4. Copy the logical name<\/strong> of your custom table (e.g., cr90b_review). You\u2019ll use this in the FetchXML and throughout the template.<\/p>\n Navigate to the Power Pages Management App, select “Web Templates<\/strong>” from the site map, create a new web template in your environment, and paste the following HTML + Liquid code.<\/p>\n Below the HTML, add the manifest to define template properties:<\/p>\n Replace all instances of cr90b_review and its attribute prefixes (cr90b_) with the schema name from your custom table. Then, add this code to the source field of the web template record. Users can also edit this code by opening it in VSCode for the web<\/strong>.<\/p>\n You can now embed this component on any page using either Visual Studio Code for the Web<\/strong> or the Design Studio<\/strong>. Your template will be available in the Custom Components<\/strong> section.<\/p>\n This web template is designed with reusability in mind. It can be seamlessly integrated across multiple pages of your website<\/strong>, allowing you to maintain a consistent layout while showcasing different content.<\/p>\n By clicking on “Edit Custom Component”<\/strong>, you can easily configure the properties<\/strong> of the review card.<\/p>\n In Visual Studio Code<\/strong>, you can add the following snippet:<\/p>\n {% include ‘Reviews’ name:’Product Reviews’ count:’6′ columns:’6′ cutoff:’6′ load_more_label:’Load more entries’ %}<\/p>\n To test and reuse the template, navigate to the page where it’s embedded, and the reviews will appear in a card layout using Bootstrap’s panel component. You can easily reuse the component across different pages by updating the include parameters. For a better user experience, consider adding additional styling, animations, or icons, and plan to implement pagination with a “Load More” button in the future.<\/p>\n Custom web templates in Power Pages provide a versatile and reusable solution for showcasing product reviews in a card-style layout. With configurable properties, you can use the same template across multiple pages while showing different content. This approach ensures consistency, saves time, and enhances the overall user experience.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" In this blog, we\u2019ll show you how to create a reusable, dynamic review card component in Power Pages using custom web templates. This allows you to display customer reviews in a visually engaging way\u2014perfect for product pages, homepages, or testimonial sections. In the world of e-commerce, showcasing product reviews effectively is key to building trust\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,2848,2361],"tags":[2743],"class_list":["post-41062","post","type-post","status-publish","format-standard","hentry","category-power-pages","category-power-platform","category-technical","tag-power-pages"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/41062","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=41062"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/41062\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=41062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=41062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=41062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Preparation<\/strong><\/h2>\n
\nInclude the following columns:<\/p>\n\n
![\"Web](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/04\/1Web-Template-in-Power-Pages.png\")
<\/p>\n![\"Web](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/04\/2Web-Template-in-Power-Pages.png\")
<\/p>\nSet Up the Web Template<\/strong><\/h3>\n
Web Template Code<\/strong><\/h3>\n
{% fetchxml postsQuery %}\r\n\r\n<fetch mapping='logical'>\r\n\r\n<entity name='cr90b_review'>\r\n\r\n<attribute name='cr90b_name' \/>\r\n\r\n<attribute name='cr90b_content' \/>\r\n\r\n<attribute name='cr90b_rating' \/>\r\n\r\n<attribute name='createdon' \/>\r\n\r\n<order attribute='createdon' descending='false' \/>\r\n\r\n<\/entity>\r\n\r\n<\/fetch>\r\n\r\n{% endfetchxml %}\r\n\r\n{% assign posts_count = count | integer %}\r\n\r\n{% assign column_count = columns | integer %}\r\n\r\n{% assign cutoff = cutoff | integer %}\r\n\r\n<h2>{{ name | default: \"Feedback entries (default)\" }}\r\n\r\n<\/h2>\r\n\r\n<span>Showing {{ posts_count }} out of {{ postsQuery.results.entities.size }}<\/span>\r\n\r\n{% if postsQuery.results.entities.size > 0 %}\r\n\r\n<div class=\"col-sm-12\">\r\n\r\n<ul style=\"list-style:none\" class=\"grid\">\r\n\r\n{% for post in postsQuery.results.entities limit: posts_count %}\r\n\r\n<li class=\"col-md-{{ 12 | divided_by: column_count }}\">\r\n\r\n<div class=\"panel panel-{% if post.cr90b_rating < cutoff %}danger{%elsif post.cr90b_rating == cutoff%}warning{%elsif post.cr90b_rating == 10%}success{% else %}default{% endif %}\">\r\n\r\n<div class=\"panel-heading\">{{ post.cr90b_name }}\r\n\r\n<span class=\"badge\" style=\"float:right\">{{ post.cr90b_rating }}<\/span>\r\n\r\n<\/div>\r\n\r\n<div class=\"panel-body\" style=\"height:150px\">\r\n\r\n<p>{{ post.cr90b_content }}<\/p>\r\n\r\n<\/div>\r\n\r\n<div class=\"panel-footer\" style=\"height:55px\">\r\n\r\n<span>{{ post.createdon }}<\/span>\r\n\r\n{% if post.cr90b_rating < cutoff %}\r\n\r\n<button\r\n\r\ntype=\"button\"\r\n\r\nclass=\"btn btn-danger\"\r\n\r\nstyle=\"float:right\"\r\n\r\nonclick=\"alert('Flagging this review!')\">\r\n\r\n<span class=\"glyphicon glyphicon-flag\" aria-hidden=\"true\"><\/span>\r\n\r\n<\/button>\r\n\r\n{% endif %}\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/li>\r\n\r\n{% endfor %}\r\n\r\n<\/ul>\r\n\r\n<\/div>\r\n\r\n{% if postsQuery.results.entities.size > count %}\r\n\r\n<hr\/>\r\n\r\n<button\r\n\r\nonclick=\"alert('Not yet implemented :)')\"\r\n\r\nclass=\"button1\"\r\n\r\nstyle=\"margin: 0 auto; display:block\">{{ load_more_label | default: \"Load More\" }}<\/button>\r\n\r\n{% endif %}\r\n\r\n{% endif %}<\/pre>\nManifest Block<\/strong><\/h3>\n
{% manifest %}\r\n\r\n{\r\n\r\n\"type\": \"Functional\",\r\n\r\n\"displayName\": \"Posts\",\r\n\r\n\"description\": \"Shows all posts\",\r\n\r\n\"tables\": [\"cr90b_review\"],\r\n\r\n\"params\": [\r\n\r\n{\r\n\r\n\"id\": \"name\",\r\n\r\n\"displayName\": \"Title\",\r\n\r\n\"description\": \"Let's give it a title\"\r\n\r\n},\r\n\r\n{\r\n\r\n\"id\": \"count\",\r\n\r\n\"displayName\": \"Count\",\r\n\r\n\"description\": \"No. of items\"\r\n\r\n},\r\n\r\n{\r\n\r\n\"id\": \"columns\",\r\n\r\n\"displayName\": \"# of Columns\",\r\n\r\n\"description\": \"less than 12\"\r\n\r\n},\r\n\r\n{\r\n\r\n\"id\": \"cutoff\",\r\n\r\n\"displayName\": \"Limit for review\",\r\n\r\n\"description\": \"Number between 1 and 10\"\r\n\r\n},\r\n\r\n{\r\n\r\n\"id\": \"load_more_label\",\r\n\r\n\"displayName\": \"Load more label\",\r\n\r\n\"description\": \"\"\r\n\r\n}\r\n\r\n]\r\n\r\n}\r\n\r\n{% endmanifest %}<\/pre>\n![\"Web](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/04\/3Web-Template-in-Power-Pages.png\")
<\/p>\nUse the Web Template<\/strong><\/h3>\n
![\"Web](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/04\/4Web-Template-in-Power-Pages.png\")
<\/p>\nReusability & Flexibility<\/strong><\/h3>\n
![\"Web](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/04\/5Web-Template-in-Power-Pages.png\")
<\/p>\n![\"Web](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/04\/6Web-Template-in-Power-Pages.png\")
<\/p>\n![\"Web](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/04\/7Web-Template-in-Power-Pages.png\")
<\/p>\nConclusion<\/strong><\/h3>\n