Conditional Formatting a View in Power Portal using Javascript

-

 Hi Readers,

Conditional formatting in Power Portals allows you to dynamically style or format rows in a view based on certain criteria. Here's a step-by-step guide on how to achieve this.

  • In the Power Apps Maker portal, navigate to the web page where you want to condition formatting.







  • Open Entity for Add hyperlink into "Options" tab.














  • Update Javascript as mentioned below in "Custom/javascript" box
$(document).ready(function (){
    var entityList = $(".entitylist.entity-grid").eq(0);
    entityList.on("loaded", function () {
        entityList.find("table tbody > tr").each(function (index, tr) {
            var td = $(tr).find('td[data-attribute="statecode"]');
            var primaryColumn = $(tr).find('td[data-attribute="statecode"]').text();
            if(primaryColumn == "Fulfilled")
            {
               
                $(td).css("background-color", "#E1FCEF");
                $(td).css("color", "green");
            }
            if(primaryColumn == "Active")
            {
                $(td).css("background-color", "#BBDEF4");
                $(td).css("color", "#284198");//#3F74C6
            }
            if(primaryColumn == "Submitted")
            {
                $(td).css("background-color", "#FCF2E6");
                $(td).css("color", "#C97A20");
            }
            if(primaryColumn == "Canceled")
            {
                $(td).css("background-color", "#E9EDF5");
                $(td).css("color", "#43454A");
            }
            if(primaryColumn == "Invoiced")
            {
                $(td).css("background-color", "#BC8F8F");
                $(td).css("color", "#191970");
            }
           
        });
    });
});

Note: Change data attribute and value for the text.

Save the changes to the web page.

If you add some CSS like below it's very useful.

[data-attribute="statecode"]
{
    text-align: center;
    display: flex;
    width: 85px;
    height: 23px;
    border-radius: 6px;
    flex-direction: column;
    justify-content: center;    
}


Navigate to the relevant page on your portal and check that the background and font colors are working as expected.

Regards,
Dharmendra Chavda

Comments

Post a Comment

Popular posts from this blog

Data Upload into CRM from Excel Using Power Automate

-
Image
When managing a CRM like Microsoft Dynamics 365, uploading data from an Excel file can be a tedious manual task, especially when working with large datasets. You can automate this process using Power Automate (formerly known as Microsoft Flow), saving time and ensuring data consistency. Step 1: Prepare Your Data in Excel Ensure that your Excel file is well-organized, the  first row contains the Header names, and check incorrect values to prevent upload issues. Step 2: Create a table in Excel or based on the requirement.            Import Contact Template Step 3: Upload Your Excel File to OneDrive. Power Automate needs access to your Excel file. Store your file in a cloud-based location like OneDrive for Business or SharePoint: Upload the file to your OneDrive. Take note of the file path, as you will need it in Power Automate. Step 4: Set Up Power Automate to Upload Excel Data to CRM Now, we will set up a flow to automate the data upload process. Log in...
Read more

Run a Dynamics 365 Plugin from JavaScript on Button Click

-
Image
Trigger a Dynamics 365 Plugin from JavaScript on Button Click In Dynamics 365, plugins usually run when system events happen — like creating, updating, or deleting a record. But in some cases, you might want to run a plugin only when the user clicks a button on a form. This blog will guide you step by step on how to trigger a Dynamics 365 plugin from JavaScript using a Custom Action and a Plugin. Steps to call a plugin from JavaScript   Create a Custom Action Open Advanced Settings → Solutions (or open the specific solution where you want to add the action). Click New in the top menu. Choose Automation → Process. From the process types, pick Action — use an Action when you want to call plugins or custom logic from JavaScript, workflows, or Power Automate. Once you click on Action a Quick Create Process form will open and fill details. After that below form is open and you can update process argument as below. And Activate process. 2. Register the Plugin on the Acti...
Read more

Update a Lookup Field value using PowerAutomate

-
Image
 Hello Readers, Update a Lookup Field value using PowerAutomate. Step 1: Create a New Flow and add the below trigger to the update field. Select the Entity Assignment to update when another field in modified or updated. Step 2: Add another trigger to fetch the value from another entity Contact to update data in the Assignment entity. Row ID: Select from the Assignment entity field to match with the contact entity. Step 3: Add the Update trigger and select the same entity Assignment. Row ID: select from Assignement unique entity. Supervisor: Select the update field based on our requirements. Regards, Dharmendra Chavda
Read more