Dynamic Background color change based on the column values

0
Could you please assist me in changing the background color of a list view dynamically based on a specific attribute? I'd like to achieve this by reading the value of a particular column in the list view. If the column value matches a hex code, such as '#000000', I want the container's background color to change accordingly. For instance, if the column value contains '#000000', I'd like the background color to turn black.
asked
1 answers
1

Hi Thangaselvan,

 

You can implement this requirement with a couple of widgets

  1. Use Custom Javascript Snippet(Data Source)
    • Add the container to your list view and place class name to the container 
    • Next place the container in your hex code text attribute 
    • Place the widget inside the list view
    • add the hexcode attribute snippet data source

listview.png

attribute.png

Place this Jquery in the snippet

 

(function ($) {

    $(document).ready(function () {

        $(".mx-name-container3 .mx-text").each(function () {

            var hexCode = $(this).text().trim(); // Get the hex code from text

 

            var parentContainer = $(this).closest(".changehexcode"); // Find the parent container

 

            // Validate the hex code format and apply the background color dynamically

            if (/^#[0-9A-F]{6}$/i.test(hexCode)) {

                parentContainer.css("background-color", hexCode);

            }

        });

    });

})(jQuery);

       2. You can use this widget for adding dynamic color container https://marketplace.mendix.com/link/component/215411 

 

answered