Dynamic layout.qHyperCube.qMeasureInfo

[rish]

Hi all,

I am very new to html and css, and have been trying to create a kpi extension. I am using layout.qHyperCube.qMeasureInfo["0"] in the style tag to set colors etc in my kpi. the issue with this is I cant have 2 kpi objects of the same extensions as if i change the color of one of them the other one changes too. is there any way to make this dynamic? 

Thanks!!

[ErikWetterberg]

Hi,

Most likely this is a HTML problem. Are you using a HTML Id to fond the right element? Make sure that it is unique or avoid using an Id.

[rish]

Hi, PFA the javascript and html template in the zip file. I cant find the issue in this, the ids i am using seem to be okay except the layout.qHyperCube.qMeasureInfo["0"] parts ☹️

[ErikWetterberg · Accepted solution]

In your code you define a stylesheet, that will be applied for all instances of your extension. To make this work you need to use inline styles for everything that should be different for the different extension instances, otherwise they will just overwrite each other with different styles with the same rules.

[rish]

It worked, thanks a lot Erik!!! 🙂

[rish]

Hi Erik,

There is a slight issue I am having. I added background-color and color in html code in inline styling, and it works perfectly in chrome, but the changes are not being detected in IE. Its funny because its detecting other parameters that i put in inline styles but not color and background color. do you know what the solution could be to this issue?

Thanks,

Rish

[ErikWetterberg]

No, I don't. Exactly how do you express the colors? Hex codes rgb? I believe rgba is not supported by IE.

[rish]

I have tried with both hex and rgb.i added inline styling (background-color for card bg-info tag and color for the card-body tag), and when i checked in the IE console, i found out that its not detecting background-color and color at all, i tried adding a few other attributes in style to check if those are being detected, and IE detects those but for some reason it just has issues with background-color and color.

[rish]

Hi Erik,

I checked with different methods, and now I am certain that it is probably happening because of the value from java script in double curly brackets. the line is <div class="card bg-info" style="background-color:{{layout.qHyperCube.qMeasureInfo['0'].bgcolor}};" id="kpi_{{layout.qInfo.qId}}">, and if i put in a static color value there instead(eg #fff) it works. Would really appreciate it if you could suggest a substitute for this as my knowledge of front end development is very minimal.

Thanks,

Rish

[rish]

Hi Erik,

Found the solution, IE apparently doesnt like angular objects and was acting a bit strange because of that. The solution is inline styling for other browsers and ng-style="{'background-color': layout.qHyperCube.qMeasureInfo['0'].var}" for IE 11/Edge. Thanks for helping me out 🙂

Regards,

Rish