locked
Color Coding LS HTML Tiles by related entity value RRS feed

  • Question

  • Hello!

    I am trying to work through this link as it is achieving exactly what I need to do...

    https://msdn.microsoft.com/en-us/magazine/dn160191.aspx

    But I cannot get it to work. 

    I have a Browse Screen for a table called 'Device'. There is a related table called 'Status' with values such as 'Active', 'Inactive', 'Salvage', etc etc.

    I would like to color code the tiles on the Browse Device screen based on the value of the 'Status'  table. The Browse Device screen is my Home Screen.

    I would tell you what I have done but I am really not sure where exactly to use the code from the link... I also am not sure what the element or contentItem should be in this case. I think learning these will help a great deal moving forward.

    If anyone can help me with this scenario based on the link provided I would really appreciate it!!

    Thank you!

    Friday, November 13, 2015 6:25 PM

Answers

  • Hello

    I am not fully up to speed on the HTML client side but I think that Ian E has got it very close for you. The part that you are thinking should be this.property.value is what the contentItem is.....if that makes sense. What you need to do is something like the following:-

    myapp.BrowseDevices.RowTemplate_postRender = function (element, contentItem) {
         // Write code here.
    		var entity = contentItem.value;
            var $element = $(element).parent(); // li item;
    		
    		if (entity.Status == "SCRAP")	//If you have multiple choices I would do a Switch Statement here!
    		{
    			$element.css({ background: 'red' });
    		}
    		else
    		{
    			$element.css({ background: 'green' });
    		}
    };

    There are a lot of assumptions on this but by declaring the entity variable from the contentItem.Value should give you enough Intellisense to solve the issue you are having.


    If you found this post helpful, please mark it as helpful. If by some chance I answered the question, please mark the question as answered. That way you will help more people like me :)

    • Marked as answer by CreedCor Monday, December 14, 2015 7:22 PM
    Wednesday, November 25, 2015 9:08 AM

All replies

  • Here is a way:

    In your row template post render function:

    myapp.BrowseJobs.RowTemplate_postRender = function (element, contentItem) {
    	var entity = contentItem.value;
    	var color = dsl.convertHex(entity.Order.Priority.DisplayColour);
    	$(element).closest("li").css("background", color);
    };

    In this case the Priority entity has a string field called DisplayColour with values that can 6 (RGB) or 8 (RGBA) characters. i.e.  "#60FFCC00" (Roughly 50% transparency) or "#FFCC00" (No Transparency). In this case the Priority names are REGULAR, RUSH, SPECIAL etc, an Order has a Priority a Priority has a Name and an associated DisplayColour.

    I have a helper that converts the hex colour to an RGB or RGBA string:

    dsl.convertHex = function (hex) {
    	hex = hex.replace('#', '');
    	if (hex.length == 6) {
    		r = parseInt(hex.substring(0, 2), 16);
    		g = parseInt(hex.substring(2, 4), 16);
    		b = parseInt(hex.substring(4, 6), 16);
    		return 'rgb(' + r + ',' + g + ',' + b + ')';
    	} else {
    		a = parseInt(hex.substring(0, 2), 16) / 256;
    		r = parseInt(hex.substring(2, 4), 16);
    		g = parseInt(hex.substring(4, 6), 16);
    		b = parseInt(hex.substring(6, 8), 16);
    		return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    	}
    }

    You will need to refactor the convertHex function as I extracted it from a JavaScript Extension library I use for all my Lightswitch apps. 

    Hope this helps.





    • Edited by Ian E Friday, November 13, 2015 8:46 PM
    Friday, November 13, 2015 8:38 PM
  • Here is a way:

    In your row template post render function:

    myapp.BrowseJobs.RowTemplate_postRender = function (element, contentItem) {
    	var entity = contentItem.value;
    	var color = dsl.convertHex(entity.Order.Priority.DisplayColour);
    	$(element).closest("li").css("background", color);
    };

    In this case the Priority entity has a string field called DisplayColour with values that can 6 (RGB) or 8 (RGBA) characters. i.e.  "#60FFCC00" (Roughly 50% transparency) or "#FFCC00" (No Transparency). In this case the Priority names are REGULAR, RUSH, SPECIAL etc, an Order has a Priority a Priority has a Name and an associated DisplayColour.

    I have a helper that converts the hex colour to an RGB or RGBA string:

    dsl.convertHex = function (hex) {
    	hex = hex.replace('#', '');
    	if (hex.length == 6) {
    		r = parseInt(hex.substring(0, 2), 16);
    		g = parseInt(hex.substring(2, 4), 16);
    		b = parseInt(hex.substring(4, 6), 16);
    		return 'rgb(' + r + ',' + g + ',' + b + ')';
    	} else {
    		a = parseInt(hex.substring(0, 2), 16) / 256;
    		r = parseInt(hex.substring(2, 4), 16);
    		g = parseInt(hex.substring(4, 6), 16);
    		b = parseInt(hex.substring(6, 8), 16);
    		return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    	}
    }

    You will need to refactor the convertHex function as I extracted it from a JavaScript Extension library I use for all my Lightswitch apps. 

    Hope this helps.





    Thank you so much for the reply, but this kind of confused me even more.

    Can you advise in relation to the article I posted above? I feel like I was relatively close to understanding that, I am just not sure what I need to change to fit my environment, or where exactly that code should go.

    Thank you!

    Friday, November 20, 2015 5:52 PM
  • I have come up with this code, and it is working - as in it has changed all the tiles to red...

    myapp.BrowseDevices.RowTemplate_postRender = function (element, contentItem) {
        // Write code here.
            var $element = $(element).parent(); // li item;
            if ( ) {
                $element.css({ background: 'red' });
            } else {
                $element.css({ background: 'green' });
            }
        };

    But I am not sure how to make it conditional upon the value of a string. I have a 'Status' column that I would like to dictate the color of the tile that status is in. For instance 'Inactive' to be red, 'Salvage' to be another color, etc.

    I am guessing that I would start here...

    if ( ) {
                $element.css({ background: 'red' });
            } else {

    ...and put something in that first param bracket to state

    "if (this property value = 'Invactive') {

    $element.css({ background: 'red' });
            } else {

    But I am not sure how to code it!

    Tuesday, November 24, 2015 8:51 PM
  • Hello

    I am not fully up to speed on the HTML client side but I think that Ian E has got it very close for you. The part that you are thinking should be this.property.value is what the contentItem is.....if that makes sense. What you need to do is something like the following:-

    myapp.BrowseDevices.RowTemplate_postRender = function (element, contentItem) {
         // Write code here.
    		var entity = contentItem.value;
            var $element = $(element).parent(); // li item;
    		
    		if (entity.Status == "SCRAP")	//If you have multiple choices I would do a Switch Statement here!
    		{
    			$element.css({ background: 'red' });
    		}
    		else
    		{
    			$element.css({ background: 'green' });
    		}
    };

    There are a lot of assumptions on this but by declaring the entity variable from the contentItem.Value should give you enough Intellisense to solve the issue you are having.


    If you found this post helpful, please mark it as helpful. If by some chance I answered the question, please mark the question as answered. That way you will help more people like me :)

    • Marked as answer by CreedCor Monday, December 14, 2015 7:22 PM
    Wednesday, November 25, 2015 9:08 AM

  • This is looking much more familiar!!

    However, still not working. Is there any information I can give you that would whittle down on any assumptions we are making? I can give you any information you need on the structure and data of the project.

    In your example above, should there be something in the .parent() parameters?

    This is the code as I have it now, and I will answer anything I can to get a bit closer to this...

    Thank you so much!!! 

    myapp.BrowseDevices.RowTemplate_postRender = function (element, contentItem) {
        
        var entity = contentItem.value;// li item;
        var $element = $(element).parent();

        if (entity.Status == "Inactive")
        {                            
            $element.css({ background: 'red' });
        }

        else

        {
            $element.css({ background: 'white' });
        }
    };



    • Edited by CreedCor Monday, November 30, 2015 10:54 PM
    Monday, November 30, 2015 10:50 PM
  • Try:

    $(element).closest("li").css("background", "red");

    The debugger is your friend. Put a breakpoint when setting the color and use the Immediate window to play/inspect values. I also find that the Chrome browser debugger is a good way to figure out the structure of the generated HTML.

    IMO, all the pieces are here for you figure things out. The key is to use the debugging tools (Chrome/Firefox/IE/Visual Studio) at your disposal ... that's how most of us in this forum are doing it.

    Tuesday, December 1, 2015 12:40 AM