8 Replies Latest reply on Feb 3, 2013 5:00 AM by fousthvk

    Set dropdown list background color based of list selection.

    fousthvk Level 1

      I have no idea how to get this to work I have tried but I know my code is nowhere close.

       

      I have a list of about 30+ RGB Values. I have converted them to a deciminal point from 0 to 1. But from there I have no idea.

       

      I need to be able to set the value of the drop down list and the background color change to its corosponding RGB value.

       

      Also I have many of these drop down menus so I would like to set a function so I can write one set of code in the javascript documents and just call the function which a custom keyboard command.

       

      Any help would be really appreciated.

        • 1. Re: Set dropdown list background color based of list selection.
          George_Johnson MVP & Adobe Community Professional

          Can you give some examples of what you're using for the item values?

          • 2. Re: Set dropdown list background color based of list selection.
            fousthvk Level 1

            var pColor = {

                                   'PL1 Double 7': [ ["-"], ["White"], ["Almond"], ["Autumn Harvest"], ["Cameo"], ["Classic Cream"], ["Colonial Yellow"], ["Corn Silk"], ["Deep Granite"], ["Desert Sand"], ["English Wedgewood"], ["Everest"], ["Harbor Grey"], ["Lakeshore Fern"], ["Linen"], ["Misty Shadow"], ["Montana Suede"], ["Pepplestone Clay"], ["Porthsmouth Blue"], ["Quiet Willow"], ["Rudded Canyon"], ["Russet Red"], ["Sage"], ["Sandstone"], ["Scottish Thistle"], ["Silver Grey"], ["Terra Cotta"], ["Tuscan Olive"], ["Victorian Grey"], ["Vineyard Grove"], ["Wicker"], ["----"], ["Walnut"], ["Cape Grey"], ["Cedar"], ["Red Cedar"], ["Timber"]],

            }

             

            These are the values being set in a drop down based off another drop down.

             

            When the drop down is set I have the RGB Values and I want to set the Background color to the value I have.

             

             

            Here is a list of the values I have.

             

            color.MasticWHITE= ["RGB", 0.99999999999975, 0.99999999999975, 0.9803921568625 ];
            color.MasticCOLONIALYELLOW= ["RGB", 0.99999999999975, 0.99999999999975, 0.470588235294 ];
            color.MasticCAMEO= ["RGB", 0.99999999999975, 0.9803921568625, 0.85882352941155 ];
            color.MasticLINEN= ["RGB", 0.9803921568625, 0.9803921568625, 0.9019607843135 ];
            color.MasticCLASSICCREAM= ["RGB", 0.96862745098015, 0.9803921568625, 0.7686274509802 ];
            color.MasticALMOND= ["RGB", 0.9098039215684, 0.92941176470565, 0.78823529411745 ];
            color.MasticSILVERGREY= ["RGB", 0.7999999999998, 0.8784313725488, 0.81960784313705 ];
            color.MasticDESERTSAND= ["RGB", 0.85098039215665, 0.8705882352939, 0.7294117647057 ];
            color.MasticSAGE= ["RGB", 0.7607843137253, 0.8705882352939, 0.7215686274508 ];
            color.MasticSANDTONE= ["RGB", 0.8784313725488, 0.85098039215665, 0.6980392156861 ];
            color.MasticWICKER= ["RGB", 0.78039215686255, 0.78039215686255, 0.6588235294116 ];
            color.MasticTUSCANOLIVE= ["RGB", 0.7215686274508, 0.8392156862743, 0.6509803921567 ];
            color.MasticVICTORIANGREY= ["RGB", 0.7607843137253, 0.85098039215665, 0.78823529411745 ];
            color.MasticPEBBLESTONECLAY= ["RGB", 0.63921568627435, 0.7215686274508, 0.549019607843 ];
            color.MasticSCOTTISHTHISTLE= ["RGB", 0.59999999999985, 0.74117647058805, 0.59999999999985 ];
            color.MasticEVEREST= ["RGB", 0.6196078431371, 0.78823529411745, 0.7607843137253 ];
            color.MasticHARBORGREY= ["RGB", 0.56862745098025, 0.6901960784312, 0.6117647058822 ];
            color.MasticCORNSILK= ["RGB", 0.85882352941155, 0.78823529411745, 0.5098039215685 ];
            color.MasticLAKESHOREFERN= ["RGB", 0.34901960784305, 0.5411764705881, 0.2901960784313 ];
            color.MasticPORTSMOUTHBLUE= ["RGB", 0.30980392156855, 0.59999999999985, 0.549019607843 ];
            color.MasticMONTANASUEDE= ["RGB", 0.38823529411755, 0.4392156862744, 0.30980392156855 ];
            color.MasticQUIETWILLOW= ["RGB", 0.45882352941165, 0.6196078431371, 0.49803921568615 ];
            color.MasticDEEPGRANITE= ["RGB", 0.49019607843125, 0.59999999999985, 0.56862745098025 ];
            color.MasticENGLISHWEDGEWOOD= ["RGB", 0.41176470588225, 0.5803921568626, 0.5882352941175 ];
            color.MasticRUGGEDCANYON= ["RGB", 0.52941176470575, 0.56862745098025, 0.41176470588225 ];
            color.MasticRUSSETRED= ["RGB", 0.4549019607842, 0.2117647058823, 0.2039215686274 ];
            color.MasticVINEYARDGROVE= ["RGB", 0.4470588235293, 0.5333333333332, 0.313725490196 ];
            color.MasticMISTYSHADOW= ["RGB", 0.26274509803915, 0.26274509803915, 0.23137254901955 ];
            color.MasticAUTUMNHARVEST= ["RGB", 0.59999999999985, 0.5411764705881, 0.3215686274509 ];
            color.MasticATLANTICAQUA= ["RGB", 0.68627450980375, 0.8235294117645, 0.82745098039195 ];
            color.MasticAUTUMNGOLD= ["RGB", 0.59999999999985, 0.63921568627435, 0.30980392156855 ];
            color.MasticBIRCHWOOD= ["RGB", 0.9176470588233, 0.96078431372525, 0.9254901960782 ];
            color.MasticBLACK= ["RGB", 0, 0, 0 ];
            color.MasticBLUSHINGCORAL= ["RGB", 0.9960784313723, 0.8784313725488, 0.76470588235275 ];
            color.MasticBRONZE= ["RGB", 0.13725490196075, 0.12941176470585, 0.12156862745095 ];
            color.MasticCHARCOALGREY= ["RGB", 0.3843137254901, 0.470588235294, 0.392156862745 ];
            color.MasticDARKBRONZE= ["RGB", 0.53725490196065, 0.56862745098025, 0.52156862745085 ];
            color.MasticEVERGREEN= ["RGB", 0.11372549019605, 0.37254901960775, 0.09019607843135 ];
            color.MasticHAZELWOOD= ["RGB", 0.2117647058823, 0.45882352941165, 0.3607843137254 ];
            color.MasticJEFFERSONTAN= ["RGB", 0.6588235294116, 0.6901960784312, 0.56078431372535 ];
            color.MasticLONDONBROWN= ["RGB", 0.34117647058815, 0.2980392156862, 0.2509803921568 ];
            color.MasticMUSKETBROWN= ["RGB", 0.2901960784313, 0.2823529411764, 0.2039215686274 ];
            color.MasticROYALBROWN= ["RGB", 0.235294117647, 0.16862745098035, 0.12941176470585 ];
            color.MasticSERENESEAGLASS= ["RGB", 0.83529411764685, 0.89019607843115, 0.80392156862725 ];
            color.MasticTERRABRONZE= ["RGB", 0.35686274509795, 0.04313725490195, 0.29411764705875 ];
            color.MasticTERRACOTTA= ["RGB", 0.49019607843125, 0.3843137254901, 0.1960784313725 ];
            color.MasticBLACKWATCHGREEN= ["RGB", 0.13725490196075, 0.2039215686274, 0.2117647058823 ];
            color.MasticBLUE= ["RGB", 0.25490196078425, 0.3607843137254, 0.45098039215675 ];
            color.MasticBROWN= ["RGB", 0.2431372549019, 0.18431372549015, 0.12941176470585 ];
            color.MasticDARKBERRY= ["RGB", 0.19999999999995, 0.1647058823529, 0.18431372549015 ];
            color.MasticDARKNAVY= ["RGB", 0.1725490196078, 0.22352941176465, 0.30980392156855 ];
            color.MasticDARKSPRUCE= ["RGB", 0.13725490196075, 0.2039215686274, 0.21568627450975 ];
            color.MasticGEORGETOWNBLUE= ["RGB", 0.19999999999995, 0.31764705882345, 0.42745098039205 ];
            color.MasticGREEN= ["RGB", 0.19999999999995, 0.30980392156855, 0.3058823529411 ];
            color.MasticGREY= ["RGB", 0.29411764705875, 0.32549019607835, 0.58431372549005 ];
            color.MasticRED= ["RGB", 0.39607843137245, 0.19999999999995, 0.18431372549015 ];
            color.MasticSPANISHMOSS= ["RGB", 0.2901960784313, 0.313725490196, 0.26274509803915 ];
            color.MasticTERRABROWN= ["RGB", 0.41176470588225, 0.29411764705875, 0.2745098039215 ];
            color.MasticVINEYARDRED= ["RGB", 0.41176470588225, 0.235294117647, 0.27843137254895 ];
            color.MasticWINESTONE= ["RGB", 0.2666666666666, 0.17647058823525, 0.1960784313725 ];
            • 3. Re: Set dropdown list background color based of list selection.
              George_Johnson MVP & Adobe Community Professional

              You'll need to devise a means to get the color from the color object given the item selected in the combo box. One way to do this would be to set the export value of each dropdown item to the corresponding color name in the color object. For example:

               

              var pColor = {

                                     'PL1 Double 7': [ ["-"], ["White", "MasticWHITE"], ["Almond", "MasticALMOND"], ["Autumn Harvest", "MasticAUTUMNHARVEST"],

               

              //etc.

               

              I'm assuming you're setting the item in the dropdown with the setItems method and passing the "PL1 Double7" array. Then in a custom Keystroke script of the dropdown you can get the export value of the selected item (event.changeEx) and look up the corresponding array in the color object, and then set the event.target.fillColor property to this value. The code would have to filter out the "-" and "----" values and make sure the corresponding value is in the color object and perhaps set it to a default color if not. See the JavaScript documentation for more information.

              • 4. Re: Set dropdown list background color based of list selection.
                try67 MVP & Adobe Community Professional

                Actually, I think it can be done with the data as is, with just a bit of manipulation to get it to the right format...

                If you use the Validation script, it can be done like this:

                 

                event.target.fillColor = color.white; // default value

                if (event.value) {

                     // convert the field's value to a string with the used format

                     var selectedColor = "Mastic" + event.value.replace(/ /g,"").toUpperCase();

                 

                     // filter out "-" and "---", etc.

                     if (color[selectedColor]!=null) 

                          event.target.fillColor = color[selectedColor];

                }

                • 5. Re: Set dropdown list background color based of list selection.
                  George_Johnson MVP & Adobe Community Professional

                  Yup, as long as that naming convention is followed.

                  • 6. Re: Set dropdown list background color based of list selection.
                    try67 MVP & Adobe Community Professional

                    Naturally... I do prefer your solution, I must say, but it would require the OP to change their entire data structure, so I wanted to offer an alternative.

                    • 7. Re: Set dropdown list background color based of list selection.
                      George_Johnson MVP & Adobe Community Professional

                      Yes, my comment was really meant for the OP if he decided to go this route. It certainly is easier given the current setup.

                      • 8. Re: Set dropdown list background color based of list selection.
                        fousthvk Level 1

                        Currently there is no export value and the export value is not needed to stay specific so that could work. However I have alot of fields that are basicly an option to pick a brand from a drop down. That drop down sets all rows of other drops downs to the style then based on each of those individual answers it sets the another dropdown to all the colors availible for that style. Once that color is selected I want to set that fields background color to the RGB value I have stated above. I am really new to Javascript. Like one week, Baiscly for this project. SO I have spent a few hours already reading documentation and some parts make sense and others dont.

                         

                        I am hoping again I can write something like this so that I can right a short script that is varible based on the row and field your in.

                         

                        Example of what I have working so far that does work.

                         

                        var plCode = {

                                               PL1: [ ["-"], ["PL1 Double 7"], ["PL1 Triple 5"], ["PL1 Half-Round"],["PL1 Hand-Split Shake"]],

                                               PL2: [ ["-"], ["PL2 Double 6"], ["PL2 Single 7"], ["PL2 Double 4"],["PL2 Double 4.5 DL"]],

                                               PL3: [ ["-"], ["PL3 Double 6"], ["PL3 Single 7"], ["PL3 Double 4.5 DL"]],

                                               PL4: [ ["-"], ["PL4 Double 4"], ["PL4 Double 5"], ["PL4 Double 4.5 DL"]],

                                               PL5: [ ["-"], ["PL5 LL Double 4"], ["PL5 LL Double 4.5 DL"], ["PL5 SLL Double 4"], ["PL5 SLL Double 4.5 DL"]],

                                               PL6: [ ["-"], ["PL6 Double 4"], ["PL6 Double 5"], ["PL6 Double 4.5 DL"], ["PL6 Triple 3 Smooth"], ["PL6 Double 4 Smooth"], ["PL6 Single 8 Smooth"]],

                                               PL7: [ ["-"], ["PL7 Double 4"], ["PL7 Double 5"], ["PL7 Double 4.5 DL"], ["PL7 Triple 3"], ["PL7 6.5 Beaded"]],

                                               PL8: [ ["-"], ["PL8 Double 4"], ["PL8 Double 5"], ["PL8 Double 5 DL"], ["PL8 Triple 2/3"], ["PL8 Single 8"]],

                                               PL9: [ ["-"], ["PL9 Double 4"], ["PL9 Double 5"], ["PL9 Double 5 DL"]],

                                               PL10: [ ["-"], ["PL10 6.5 Beaded"]],

                                               PL11: [ ["-"], ["PL11 5.5 Board w1.5 Batten"]],

                                               PL12: [ ["-"], ["PL12 Double 4"], ["PL12 Double 4 DL"], ["PL12 Double 5"], ["PL12 Double 5 DL"], ["PL12 Triple 3"]],

                                               PL13: [ ["-"], ["PL13 Double 4"], ["PL13 Double 4 DL"], ["PL13 Double 4.5 DL"]],

                                               PL14: [ ["-"], ["PL14 Double 4"], ["PL14 Double 5"], ["PL14 Double 4.5 DL"]],

                                               PL15: [ ["-"], ["PL15 T3 1/3 Vented"], ["PL15 T3 1/3 Non Vented"]],

                                               PL16: [ ["-"], ["PL16 8 Non Vented"], ["PL16 8 Vented"]],

                                               PL17: [ ["-"], ["PL17 D5 Non Vented"], ["PL17 D5 Vented"]],

                                               PL18: [ ["-"], ["PL18 T4 Non Vented"], ["PL18 T4 Vented"], ["PL18 T4 Center Vented"], ["PL18 D5 Non Vented"], ["PL18 D5 Vented"]],

                                               PL19: [ ["-"], ["PL19 T4 Non Vented"], ["PL19 T4 Vented"], ["PL19 T4 Center Vented"], ["PL19 D5 Non Vented"], ["PL19 D5 Vented"]],

                               

                                             };       

                         

                        function SetProductLine()

                           if(event.willCommit){

                              var boName = event.target.name.split(".").shift();

                              var lst = plCode[event.value];

                              if( (lst != null) && (lst.length > 0) ){

                                 this.getField(boName + ".Row1|ProfileName").setItems(lst);

                                 this.getField(boName + ".Row2|ProfileName").setItems(lst);

                                 this.getField(boName + ".Row3|ProfileName").setItems(lst);

                        }

                              else

                        {

                                 this.getField(boName + ".Row1|ProfileName").clearItems();

                                 this.getField(boName + ".Row2|ProfileName").clearItems();

                                 this.getField(boName + ".Row3|ProfileName").clearItems();

                        }

                           }

                        }

                         

                         

                        Then I am doing the same thing for the Color Name. Just dont understand how I can apply the same priceable to the the actualy custom color.XXXX code.

                         

                        Sorry about being such noob.