{"id":42586,"date":"2025-10-16T12:24:46","date_gmt":"2025-10-16T06:54:46","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=42586"},"modified":"2025-10-16T12:24:46","modified_gmt":"2025-10-16T06:54:46","slug":"enhancing-data-presentation-with-conditional-formatting-in-power-pages","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2025\/10\/enhancing-data-presentation-with-conditional-formatting-in-power-pages\/","title":{"rendered":"Enhancing Data Presentation with Conditional Formatting in Power Pages"},"content":{"rendered":"

\"Enhancing<\/p>\n

You can enhance Microsoft Power Pages list views using conditional formatting with JavaScript. This approach lets you visually highlight records such as \u201cQualified\u201d or \u201cCancelled\u201d leads based on their status field, improving readability, prioritization, and overall data presentation.<\/p>\n

What Is Microsoft Power Pages?<\/strong><\/h3>\n

Microsoft Power Pages is a low-code platform that allows users to build secure, responsive, and data-integrated web portals connected to Dataverse \u2014 all without extensive coding. It enables organizations to share business data and processes with external users (customers, partners, vendors) while providing powerful tools for design, automation, and customization.<\/p>\n

Why Use Conditional Formatting in Power Pages Lists?<\/strong><\/h3>\n

Conditional formatting allows you to automatically change the appearance of list items based on their underlying values.<\/p>\n

For example:<\/p>\n

    \n
  • Highlight \u201cQualified\u201d leads in green<\/li>\n
  • Mark \u201cCancelled\u201d leads in red<\/li>\n
  • Use orange for \u201cCannot Contact\u201d leads<\/li>\n<\/ul>\n

    By visually differentiating rows, users can identify important records instantly \u2014 making lists more intuitive and user-friendly.<\/p>\n

    In Power Pages, lists are often used to display data such as leads, contacts, or opportunities. However, without formatting, all rows look identical, making it hard to spot priority items.<\/p>\n

    \"Conditional<\/p>\n

    Due to this uniform appearance, it can be challenging for users to identify important items quickly.<\/p>\n

    Let\u2019s consider scenario below:<\/p>\n

    In many Power Pages implementations, list components are used to display critical business data such as leads, opportunities, or service requests. However, without visual cues, users are often left to interpret raw data manually \u2014 a process that is both time-consuming and error-prone.<\/p>\n

    There would be the following challenges faced by a sales or support team:<\/p>\n

      \n
    • Qualified leads and cancelled leads appear identical<\/strong> in the list view, making it difficult to prioritize follow-ups.<\/li>\n
    • High-priority opportunities fail to stand out<\/strong>, buried among dozens of other records with no visual distinction.<\/li>\n
    • Users must read each row carefully<\/strong> to identify statuses or flags, increasing the risk of oversight and reducing productivity.<\/li>\n<\/ul>\n

      These issues not only slow down decision-making but also increase the likelihood of missing critical updates or misinterpreting data. This is where conditional formatting<\/strong> becomes a game-changer \u2014 enabling you to apply visual logic that highlights what matters most. By automatically changing the background colour, text colour, or style of rows based on specific values, such as the status of a lead, users can instantly identify important items.<\/p>\n

      For instance:<\/p>\n

        \n
      • Green for \u201cQualified\u201d leads<\/li>\n
      • Red for \u201cCancelled\u201d leads<\/li>\n
      • Orange for \u201cCannot Contact\u201d leads<\/li>\n<\/ul>\n

        With conditional formatting, lists become visually intuitive, allowing users to make quicker decisions and work more efficiently on the portal.<\/p>\n

        Step-by-Step Guide: Implementing Conditional Formatting in Power Pages<\/strong><\/h2>\n

        Step 1: Setting up the List in Power Pages<\/strong><\/h3>\n

        Before writing any code, confirm that your Power Pages site includes a Leads list and that the Status field is displayed. You\u2019ll also need permission to inject custom JavaScript through a Web File or the page\u2019s script editor.<\/p>\n

        For this time, we are using the custom script on the Target Page.<\/p>\n

        Step 2: Adding Custom JavaScript<\/strong><\/h3>\n

        Power Pages allows you to add custom JavaScript using Web Files or Page Custom Scripts.<\/p>\n

        For this example, we will use jQuery to make it easier to select and style HTML elements.<\/p>\n

        1. Navigate to the Power Pages Design Studio<\/strong><\/p>\n

        2. Lead List Page<\/strong><\/p>\n

        3. Click on the Edit Code<\/strong><\/p>\n

        \"Conditional<\/p>\n

        4. Click on Open Visual Studio<\/strong><\/p>\n

        \"Conditional<\/p>\n

        5. Make sure you click on the Sync<\/strong> on the Power Pages Design Studio.<\/p>\n

        \"Conditional<\/p>\n

        6. Select the JS file<\/strong> of the page and paste the JavaScript Code<\/p>\n

        \"Conditional<\/p>\n

        Complete JavaScript code that applies conditional formatting:<\/strong><\/h2>\n

        Update the code with proper column nodes for selecting the appropriate elements. Also, you can change the formatting options to just change the font colour, or it can be extended further.<\/p>\n

        $(document).ready(function () {\r\n\r\nlet targetElement = $(\".entity-grid.entitylist\")[0];\r\nif (!targetElement) return;\r\n\r\n\/\/ Declaring an observer object\r\nlet observer = new MutationObserver((mutationsList, observer) => {\r\n\/\/ This function runs whenever the DOM inside targetElement changes\r\nconsole.log(\"List updated or re-rendered!\");\r\napplyConditionalFormatingOnstatus();\r\n});\r\n\r\n\/\/ Observer configurations for target Element\r\nlet config = {\r\nchildList: true,\u00a0 \/\/ detect added\/removed child nodes\r\nsubtree: true\u00a0\u00a0\u00a0\u00a0 \/\/ observe all descendants\r\n};\r\n\r\n\/\/ Start observing\r\nobserver.observe(targetElement, config);\r\n\r\n\/\/ Function to format the List\r\nfunction applyConditionalFormatingOnstatus() {\r\n$(\".entity-grid.entitylist\").find('td[data-attribute=\"statuscode\"]').each(function () {\r\nlet status = $(this).text().trim();\r\nlet styles = {\r\n\r\n\"text-align\": \"center\",\r\n\r\n\"vertical-align\": \"middle\",\r\n\r\n\"font-weight\": \"600\",\r\n\r\n\"border-radius\": \"20px\",\r\n\r\n\"box-shadow\": \"0 2px 8px rgba(0, 0, 0, 0.3)\",\r\n\r\n\"padding\": \"6px 12px\",\r\n\r\n\"display\": \"inline-block\",\r\n\r\n\"width\": \"100%\",\r\n\r\n\"text-transform\": \"capitalize\"\r\n\r\n};\r\n\r\nswitch (status) {\r\ncase \"Canceled\":\r\nstyles[\"background-color\"] = \"rgb(255, 0, 0)\";\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Red\r\nstyles[\"color\"] = \"white\";\r\nbreak;\r\n\r\ncase \"Cannot Contact\":\r\nstyles[\"background-color\"] = \"rgb(255, 165, 0)\";\u00a0\u00a0\u00a0 \/\/ Orange\r\nstyles[\"color\"] = \"white\";\r\nbreak;\r\n\r\ncase \"Lost\":\r\nstyles[\"background-color\"] = \"rgb(255, 255, 0)\";\u00a0\u00a0\u00a0 \/\/ Yellow\r\nstyles[\"color\"] = \"black\";\r\nbreak;\r\n\r\ncase \"Qualified\":\r\nstyles[\"background-color\"] = \"rgb(0, 128, 0)\";\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Green\r\nstyles[\"color\"] = \"white\";\r\nbreak;\r\n\r\ncase \"new\":\r\nstyles[\"background-color\"] = \"rgb(0, 0, 255)\";\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Blue\r\nstyles[\"color\"] = \"white\";\r\nbreak;\r\n\r\ncase \"No Longer Interested\":\r\nstyles[\"background-color\"] = \"rgb(128, 0, 128)\";\u00a0\u00a0\u00a0 \/\/ Purple\r\nstyles[\"color\"] = \"white\";\r\nbreak;\r\n\r\ndefault:\r\nstyles[\"background-color\"] = \"rgb(211, 211, 211)\";\u00a0 \/\/ Light Gray\r\nstyles[\"color\"] = \"black\";\r\nbreak;\r\n}\r\n\r\n$(this).css(styles);\r\n});\r\n}\r\n\r\n\/\/ Running the function to apply the Formatting on load\r\napplyConditionalFormatingOnstatus();\r\n});\r\n\r\n<\/pre>\n
        Step 3: Understanding the Code<\/h3>\n
        1. Document Ready<\/p>\n
        $(document).ready(function () { … }); Ensures the code runs after the page fully loads.<\/p>\n
        2. Select the List<\/p>\n
        let targetElement = $(“.entity-grid.entitylist”)[0]; Selects the HTML table representing the lead list. Stops if the list doesn\u2019t exist.<\/p>\n
        3. MutationObserver<\/p>\n
        let observer = new MutationObserver((mutationsList, observer) => { applyConditionalFormatingOnstatus(); }); The observer re-triggers the formatting logic whenever the list refreshes, ensuring consistent styling even after filtering or sorting.<\/p>\n
        4. Observer Configuration<\/p>\n
        let config = { childList: true, subtree: true }; observer.observe(targetElement, config); Watches all child elements of the list to detect updates.<\/p>\n
        5. Apply Conditional Formatting<\/p>\n
        $(“.entity-grid.entitylist”).find(‘td[data-attribute=”statuscode”]’).each(function () {…}); Loops through each Status cell, reads its value, and applies CSS styles based on the status.<\/p>\n
        6. Styles by Status The switch statement assigns background and text colors for each status. For example, \u201cQualified\u201d leads are green, and \u201cCanceled\u201d leads are red.<\/p>\n
        7. Initial Formatting<\/p>\n
        applyConditionalFormatingOnstatus(); Applies formatting immediately on page load.<\/p>\n
        Step 4: Highlighting Qualified Leads<\/h3>\n
        In the code, the \u201cQualified\u201d status has special styling: case “Qualified”: styles[“background-color”] = “rgb(0, 128, 0)”; styles[“color”] = “white”; break;<\/p>\n
        This ensures all qualified leads and other statuses are highlighted, making it easy to identify important leads at a glance. You can further tailor color schemes to match your organization\u2019s visual identity.<\/p>\n
        \"Conditional<\/p>\n
        Testing the Configuration and Enhancing Visual Consistency<\/strong><\/h3>\n