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

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

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

Add Java Script and CSS in PowerApps Portal

-
Image
Hi Readers, In PowerApps Portals, you can use JavaScript and CSS to customize the appearance and behavior of your portal, including blog content. Here's a general guide on how you can add JavaScript and CSS to a PowerApps Portal for a blog: Open the Powerapps Portal and go to the particular form to Add Javascript and CSS. Copy " owner-operator-compare-survey " to this text form link as mentioned below. Open portal Management form PowerApps and jump to "Web Pages" as below. After that click on the "Partial URL" field and select Filter by option. Paste "owner-operator-compare-survey" into the blank box below and click  "Apply" . Once it's filtered we can see only one record on the web page. Open Record and Click on the "Advance" option.   Add Custom Javascript and Custom CSS based on requirements. Navigate to the " owner-operator-compare-survey" page on your portal and check that javascript and CSS are working...
Read more