locked
Drop Down back color RRS feed

  • Question

  • I don't know if anyone reads or posts here anymore but I need some help. I have a choice list dropdown and depending on the value of the drop down I need to change the color. I can make the event fire and oddly enough I can change the font style to italic and back to normal but for the life of me I can not change the back color. Any help appreciated..

    myapp.AddEditInspections.PU1MotorNoise_postRender = function (element, contentItem) {
        // Write code here.
        contentItem.dataBind("value", function () {
            switch (contentItem.value ) {
                case "0":
                    $(element).css("font-weight", "bold"); THIS DOESNT WORK
                    break;
                case "1":
                    $(element).css("font-style", "italic"); THIS WORKS
                    break;
                case "2":
                    $(element).css("background-color", "yellow"); THIS DOESNT WORK
                    break;
                case "3":
                    $(element).css("font-style", "normal"); THIS WORKS
                    break
               }
        });

        };

      Thanks in advance!!


    • Edited by Nivek9497 Tuesday, August 23, 2016 10:50 AM
    Tuesday, August 23, 2016 10:48 AM

Answers

  • Something like this - air code and not tested:

    myapp.AddEditInspections.PU1MotorNoise_postRender = function (element, contentItem) {
      // use a flag to allow using of setTimeout() only upon initialization
      var initialized = false;
    
      function updateBackgroundElement(bacgroundColor){
        $(element).find("span.ui-btn-inner").css({ backgroundColor: backgroundColor, color: "white" });
      }
      
      function updateBackground(value){
        switch (value) {
          case "0":
            updateBackgroundElement("dimgrey");
            break;
          case "1":
            updateBackgroundElement("green");
            break;
          case "2":
            updateBackgroundElement("goldenrod");
            break;
          case "3":
            updateBackgroundElement("darkred");
            break;
          default:
            updateBackgroundElement("dimgrey");
        }
      }
    
      contentItem.dataBind(contentItem.bindingPath, function (value) {
        if (!initialized) {
          // this will only happen once
          setTimeout(function() {
            updateBackground(value);
            initialized = true;
          }, 500);
        } else {
          updateBackground(value)
        }
      });
    };


    Regards, Xander. My Blog

    • Proposed as answer by Angie Xu Thursday, September 1, 2016 8:39 AM
    • Marked as answer by Angie Xu Thursday, September 1, 2016 8:39 AM
    Friday, August 26, 2016 5:09 AM

All replies

  • Hi Nivek,

    To set the background color, you can try code snippet below:

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

    Regards,

    Angie


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, August 25, 2016 6:12 AM
  • Or try this (not tested) - you might also have to wrap it in a short setTimeout(function(){...},100) for the initial value to show the correct color:

    $(".ui-btn-inner", element).css("background-color", "yellow");

    If the above does not work, use Chrome to inspect the DOM element to find out on exactly which element you should set the background color.


    Regards, Xander. My Blog

    • Edited by novascape Thursday, August 25, 2016 6:39 AM
    Thursday, August 25, 2016 6:37 AM
  • Thank you for the reply.  That solution did not work.  I did some testing with changing other styles.  I added a border around the element(which is a textbox or drop down) and noticed that just inside the border my background color was showing up.  So it looks like the text itself has a backcolor. 

      $(element).css({backgroundColor: "red", border: "5px solid #ccc" });

    Well I tried to upload a picture but it wont let me until they verify my account.. Well the above code places a border around the textbox.  Then inside the border is a very thin line of red and inside the red is the text with the default backcolor..

    Thursday, August 25, 2016 6:53 AM
  • What I'm really trying to accomplish is as follows:

    I have an inspection form.  Each field is a choice list with GREEN, YELLOW, RED.  So when I click the dropdown and select YELLOW for example I need the dropdown to say YELLOW with a yellow background color.. I assumed this would be easy but gees.. I'm not a veteran at lightswitch.  I'm just learning now how to customize the HTML screens..

    Thursday, August 25, 2016 7:08 AM
  • My reply is based on a choice list property dropdown rather than a foreign key based dropdown - they are different in LS. I also based the answer on using the DOM inspector in Chrome where I tested issuing the above does indeed change the background color as required. If you are using a Property that is a Foreign Key into another entity then you must inspect the DOM of that dropdown control as suggested to find which element to change the background color on. I will only be back at my computer tomorrow to check the latter scenario if you still need help.

    Regards, Xander. My Blog

    Thursday, August 25, 2016 7:46 AM
  • I think you are definitely on the right track with your code, you just need to figure out exactly which element to change the background color on, using syntax similar to what I presented above.

    Regards, Xander. My Blog

    Thursday, August 25, 2016 7:48 AM
  • In all likelihood it will be an element nested below the element passed into the _postRender() event, hence my attempt at selecting an element by class within the context of the passed element. When using the chrome DOM inspector, you can change the background color of the elements at run time until you find the correct element and then just update your jQuery selector.

    Regards, Xander. My Blog

    Thursday, August 25, 2016 7:52 AM
  • myapp.AddEditInspections.PU1MotorNoise_postRender = function (element, contentItem) {
        // Write code her
        contentItem.dataBind("value", function () {
            switch (contentItem.value) {
                case "0":
                    $(element).find("span.ui-btn-inner").css({ backgroundColor: "grey", color: "white" });
                    break;
                case "1":
                    //$(element).addClass("SetGreen");
                    $(element).find("span.ui-btn-inner").css({ backgroundColor: "green", color: "white" });
                    break;
                case "2":
                    $(element).find("span.ui-btn-inner").css({ backgroundColor: "yellow", color: "white" });
                    break;
                case "3":
                    $(element).find("span.ui-btn-inner").css({ backgroundColor: "red", color: "white" });
                    break
            }
        });
        };

    Thank you so much for your help!!  This solved the issue

    Thursday, August 25, 2016 8:53 AM
  • Thanks again for your help but I have one additional issue.  When I load this screen it doesn't set the colors.  For instance if the dropdown is saved to green it doesn't show green backcolor.  If I click dropdown and reselect green it still doesn't change.  I have to click another option lets say yellow and click back on green to make it turn green.
    Thursday, August 25, 2016 9:58 AM
  • Ok I have added the timeout.

    myapp.AddEditInspections.PU1MotorNoise_postRender = function (element, contentItem) {
        // Write code here.
       
            contentItem.dataBind("value", function () {
                setTimeout(function() {
                    switch (contentItem.value) {
                  
                        case null:
                            $(element).find("span.ui-btn-inner").css({ backgroundColor: "dimgrey", color: "white" });
                            break;
                        case "0":
                            $(element).find("span.ui-btn-inner").css({ backgroundColor: "dimgrey", color: "white" });
                            break;
                        case "1":
                            $(element).find("span.ui-btn-inner").css({ backgroundColor: "green", color: "white" });
                            break;
                        case "2":
                            $(element).find("span.ui-btn-inner").css({ backgroundColor: "goldenrod", color: "white" });
                            break;
                        case "3":
                            $(element).find("span.ui-btn-inner").css({ backgroundColor: "darkred", color: "white" });
                            break;
                    };
                });
            });
        };

    This is working. Does this look correct?

    Thanks for all the help!!

    Thursday, August 25, 2016 3:55 PM
  • Yes this looks correct. A couple of points: 1) you may want to add a specific timeout duration like 100ms and 2) if the user experience degrades due to the timeout when selecting a new value, you may want to use a local flag variable that ensures the timeout is only applied on initialization and not each time the user changes the value.

    Regards, Xander. My Blog

    Thursday, August 25, 2016 8:34 PM
  • Can you show me example with my code. Yall are life savers! Thanks a million..

    Friday, August 26, 2016 1:48 AM
  • Something like this - air code and not tested:

    myapp.AddEditInspections.PU1MotorNoise_postRender = function (element, contentItem) {
      // use a flag to allow using of setTimeout() only upon initialization
      var initialized = false;
    
      function updateBackgroundElement(bacgroundColor){
        $(element).find("span.ui-btn-inner").css({ backgroundColor: backgroundColor, color: "white" });
      }
      
      function updateBackground(value){
        switch (value) {
          case "0":
            updateBackgroundElement("dimgrey");
            break;
          case "1":
            updateBackgroundElement("green");
            break;
          case "2":
            updateBackgroundElement("goldenrod");
            break;
          case "3":
            updateBackgroundElement("darkred");
            break;
          default:
            updateBackgroundElement("dimgrey");
        }
      }
    
      contentItem.dataBind(contentItem.bindingPath, function (value) {
        if (!initialized) {
          // this will only happen once
          setTimeout(function() {
            updateBackground(value);
            initialized = true;
          }, 500);
        } else {
          updateBackground(value)
        }
      });
    };


    Regards, Xander. My Blog

    • Proposed as answer by Angie Xu Thursday, September 1, 2016 8:39 AM
    • Marked as answer by Angie Xu Thursday, September 1, 2016 8:39 AM
    Friday, August 26, 2016 5:09 AM
  • Thank you!
    Friday, August 26, 2016 5:49 AM