topic Re: Dynamic layout.qHyperCube.qMeasureInfo in Integration, Extension & APIs

Dynamic layout.qHyperCube.qMeasureInfo

rish — Sun, 24 Nov 2019 23:36:36 GMT

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!!

Re: Dynamic layout.qHyperCube.qMeasureInfo

ErikWetterberg — Mon, 25 Nov 2019 05:16:59 GMT

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.

Re: Dynamic layout.qHyperCube.qMeasureInfo

rish — Mon, 25 Nov 2019 10:07:21 GMT

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 ☹️

Re: Dynamic layout.qHyperCube.qMeasureInfo

ErikWetterberg — Mon, 25 Nov 2019 16:02:03 GMT

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.

Re: Dynamic layout.qHyperCube.qMeasureInfo

rish — Mon, 25 Nov 2019 17:32:48 GMT

It worked, thanks a lot Erik!!! 🙂

Re: Dynamic layout.qHyperCube.qMeasureInfo

rish — Thu, 28 Nov 2019 12:41:25 GMT

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

Re: Dynamic layout.qHyperCube.qMeasureInfo

ErikWetterberg — Thu, 28 Nov 2019 12:53:45 GMT

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

Re: Dynamic layout.qHyperCube.qMeasureInfo

rish — Thu, 28 Nov 2019 16:38:33 GMT

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.

Re: Dynamic layout.qHyperCube.qMeasureInfo

rish — Fri, 29 Nov 2019 01:15:30 GMT

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

Re: Dynamic layout.qHyperCube.qMeasureInfo

rish — Fri, 29 Nov 2019 09:36:41 GMT

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