22 Replies Latest reply: Mar 29, 2018 12:28 PM by Jonathan Vitale RSS

    Set color by expression in extension

    Barnabas Lengyel

      Hi all,

       

      I would like to define the coloring option by expression in the properties panel of a visualization extension.

      I looked at several extensions and none of them have used any expressions in the properties panel excluding dimension, measure, and appearance > general panes which are all auto created/defined parts of the properties panel, having no setting attributes in the js file.

      When I tried the expression: "always" element  in the js file I got the orange fx sign show up in the properties panel but the calculations were not carried out...

       

      Any kind of help would be greatly appreciated!

        • Re: Set color by expression in extension
          Jonathan Vitale

          Barnabas,

           

          I wonder if you are still working on this after two months, if so do you have any updates? I'm working on a similar issue, I've gotten maybe one step further, but still a bit lost:

           

          I want to add custom coloring options to my dimensional values. I add new items to my properties panel like this:

          dimensions: {

          uses: "dimensions",

          min: 2,

          max: 6,

          items: {

          colorExpression:{

          type: "string",

          label: "Enter color expression",

          ref:"qDef.myColorSelection.expression",

          expression:"always"

          }

          }

          }

           

          This allows me to enter an expression for each dimension within my properties panel user interface. So, if my dimension is called D1 and includes some value like "monkey", I might write:

               = If(D1 = "money", '#665522', '#000000')

           

          Now, if I run the app and break somewhere in the paint function, I'll see the following in

          layout.qHyperCube.qDimensionInfo[0].myColorSelection.expression

          which evaluates to '#000000' (i.e., the 'else' clause of my expression).

           

          This is not what I want. I do not want a single color for each dimension. I want each different value in the dimension to evaluate to its own color. So 'monkey' values in D1 should be '#665522', 'tiger' should be '#DDCC33', etc.


          Hopefully someone picks up this thread. Looking at erik.wetterberg and akl

            • Re: Set color by expression in extension
              Erik Wetterberg

              Hi,

              The easiest way to achieve this is to simply add another measure and use that for color.

               

              Erik Wetterberg

                • Re: Set color by expression in extension
                  Jonathan Vitale

                  Erik,

                   

                  Thanks for replying, but I'm not sure I understand. I have multiple dimensions that need to be colored independently. I think a close relative of what I'm looking for is in the out-of-the-box Table object. In this object, within the Data tab, you can add multiple Dimensions as columns. Expanding the added dimensions, you get the option of entering a "Background color expression" and a "Text color expression". This is then evaluated on a row-by-row basis in the table.

                   

                  Any ideas or alternatively, do you know if there is a way to look at the source for the Table object?

                    • Re: Set color by expression in extension
                      Erik Wetterberg

                      Hi,

                      You are right, adding an extra measure is for a one dimension scenario. The built-in table uses qAttributeExpressions, mentioned here. I don't think Qlik has published any property panel component for this, so you have the alternatives of trying to see what the table does or building something yourself.

                       


                      Erik Wetterberg

                        • Re: Set color by expression in extension
                          Jonathan Vitale

                          Erik,

                           

                          I'll play around with and see what I come up with. By the way, your link was broken for me. But this one seems to work.

                           

                          I may also open up a new thread about this topic - just in the hopes that someone who knows might stumble by a new question. Seems unlikely, but at least I would be able to curate the thread a bit.

                          • Re: Set color by expression in extension
                            Jonathan Vitale

                            erik.wetterberg

                             

                            I was able to successfully color my dimensions by using this as an item in my dimensions.

                             

                            colorExpression:{
                                 type: "string",
                                 label: "Enter color expression",
                                 ref:"qAttributeExpressions.0.qExpression",
                                 expression:"optional"
                            }
                            
                            

                             

                            This applies the expression to all of the rows in the hypercube matrix. It's very nice. I can then use some app-specific logic to figure out what colors to display to represent the dimensional objects.

                             

                            However, the problem I'm running into now, is I want another way to color that has nothing to do with dimensions. I'd like to put a "color by expression" somewhere in an "appearance" section of the properties panel. The syntax of the item I use is almost identical to above. However, using the ref "qAttributeExpressions.0.qExpression" doesn't actually run the expression on each row of the matrix. Instead I'll find something like layout.qAttributeExpressions[0].qExpression, with an un-evaluated expression (e.g., "=IF(...)")

                             

                            Do you know if there is any kind of way to force Qlik to evaluate the expression on each row from within the properties channel? I suppose the other option is to grab the unevaluated color expression in the paint function, evaluate it on each row, and color accordingly.

                             

                            Thanks - and when I get this all worked out I'll try to put some documentation up so others can benefit.

                              • Re: Set color by expression in extension
                                Erik Wetterberg

                                Hi,

                                If you want it evaluated for each row in the matrix you have as far as I know two alternatives:

                                • add it as a measure
                                • use qAttributeExpression

                                 

                                BTW well done with the attribute expression!

                                 

                                Erik Wetterberg

                                  • Re: Set color by expression in extension
                                    Jonathan Vitale

                                    erik.wetterberg

                                     

                                    So, in my app, we are using the first measure for sizing a visualization. I suppose I could make the minimum number of measures 2, and then use the second measure as a color measure.

                                     

                                    However, this doesn't seem like good practice. In most of the out-of-the-box visualizations you can create a new measure in the "Appearances" section of the app. This way it is absolutely clear to users that they are making a measure specifically for coloring. As far as you know, is there a way to do this in an extension? Is there a way to tell Qlik that "some expression" should be an attribute of a new measure?

                                     

                                    To be perfectly clear, let's say that I have this as part of my definition code:

                                    measures: {
                                         uses: "measures",
                                         min: 1,
                                         max: 3
                                    },
                                    myAppearancePanel: {
                                         label: "My Appearance Section where you can create a new measure to color the visualization",
                                         I_Want_A_New_Measure_For_Color:{
                                              type: "string",
                                              expression: "optional",
                                              label: "Color by expression",
                                              ref:"qAttributeExpressions.0.qExpression"
                                         }
                                    }
                                    
                                    

                                     

                                    This code is not creating a new measure. It just puts an un-evaluated expression in the layout at qAttributeExpressions[0].qExpression

                                     

                                    Thanks again for the help.

                          • Re: Set color by expression in extension
                            sadhana kumari

                            Hi im working with navigation button and I have to add a functionality in it ColorByExpression  so I have included this  in my code

                            colorExpression:{

                            type: "string",

                            label: "Enter color expression",

                            ref:"qHyperCubeDef.myColorSelection.expression",

                            expression:"always"

                            }

                            but still im not able to achive this.

                            I also want to ask is myColorSelection.expression  is a builtin functionality of qHypercubeDef or we have to add its definition else where in the code also???

                            Please help me out in this.

                            • Re: Set color by expression in extension
                              sadhana kumari

                              Hi,

                              can we do the  same to change the background color of the extension based on set variable.

                               

                              Thanx

                              sadhana

                            • Re: Set color by expression in extension
                              Jonathan Vitale

                              Hi Pasi,

                               

                              What exactly are you trying to do? I found that if I used a reference like, "qHyperCubeDef.qMeasures.1.qDef.qDef", anywhere in the property definition, I could define a new measure. You'll even see this measure in the list of measures. But it didn't quite work because the visualization would crash when I tried to put a new visualization on a sheet. Not sure why.

                               

                              I wound up just adding a new expression attribute to my dimensions. Which I can explain if you need help. Let me know what you are working on. Really I want to document this whole thing at some point anyhow.

                               

                              Jonathan

                                • Re: Set color by expression in extension
                                  Humeshkumar Sindpure

                                  Hello Jonathan Sir,

                                    My name is Humesh . I am developing an extention for table.I want to add custome color property to every dimentions and measures.

                                  I found your this code :

                                  1. colorExpression:{ 
                                  2.      type: "string"
                                  3.      label: "Enter color expression"
                                  4.      ref:"qAttributeExpressions.0.qExpression"
                                  5.      expression:"optional" 

                                  I have written this code inside of dimention shown below:

                                  definition : {

                                    type : "items",

                                    component : "accordion",

                                      items : {

                                           dimensions : {

                                                  uses : "dimensions",

                                                  min : 1,

                                                  items: {

                                                 colorExpression:{ 

                                                                            type: "string", 

                                                                            label: "Enter color expression", 

                                                                            ref:"qAttributeExpressions.0.qExpression", 

                                                                            expression:"optional" 

                                                                           }

                                   

                                                   }

                                    },

                                  now please tell me what should I need to write inside of function

                                   

                                        paint: function ($element,layout) {

                                                     

                                                 }

                                   

                                  please give me solution

                                    • Re: Set color by expression in extension
                                      Jonathan Vitale

                                      Humeshkumar,

                                       

                                      You'll need to loop through all rows of the Hypercube. The row itself will be an array with each dimension and each column, so given that you are putting this in the first dimension, the index you'll want to use is 0.

                                       

                                      So, something like this.

                                       

                                      this.backendApi.eachDataRow( function (rownum, row){

                                          var dimIndex = 0; // you are putting the value in your first dimension

                                           row[dimIndex].qAttrExps.qValues[0].qText

                                      }

                                       

                                      Good luck

                                        • Re: Set color by expression in extension
                                          Humeshkumar Sindpure

                                          I have written this code inside of dimention shown below:

                                           

                                          definition : {

                                            type : "items",

                                            component : "accordion",

                                              items : {

                                                   dimensions : {

                                                          uses : "dimensions",

                                                          min : 1,

                                                          items: {

                                                         colorExpression:{

                                                                                    type: "string",

                                                                                    label: "Enter color expression",

                                                                                    ref:"qAttributeExpressions.0.qExpression",

                                                                                    expression:"optional"

                                                                                   }

                                           

                                                           }

                                            },

                                          now please tell me what should I need to write inside of function

                                           

                                                paint: function ($element,layout) {

                                           

                                           

                                           

                                                                this.backendApi.eachDataRow( function (rownum, row){

                                                                    var dimIndex = 0; // you are putting the value in your first dimension

                                                                     row[dimIndex].qAttrExps.qValues[0].qText;

                                                                });

                                           

                                                                        if ( !this.$scope.table ) {

                                                                        this.$scope.table = qlik.table(this);

                                           

                                                                               }

                                           

                                                                     return qlik.Promise.resolve();

                                           

                                                         }

                                          but Sir , this is not working for me.

                                          please give me any solution