Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
BARC’s The BI Survey 19 makes it official. BI users love Qlik. GET REPORT
rish
New Contributor III

Dynamic layout.qHyperCube.qMeasureInfo

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

1 Solution

Accepted Solutions
ErikWetterberg
Honored Contributor

Re: Dynamic layout.qHyperCube.qMeasureInfo

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.

View solution in original post

9 Replies
ErikWetterberg
Honored Contributor

Re: Dynamic layout.qHyperCube.qMeasureInfo

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
New Contributor III

Re: Dynamic layout.qHyperCube.qMeasureInfo

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
Honored Contributor

Re: Dynamic layout.qHyperCube.qMeasureInfo

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.

View solution in original post

rish
New Contributor III

Re: Dynamic layout.qHyperCube.qMeasureInfo

It worked, thanks a lot Erik!!! 🙂

rish
New Contributor III

Re: Dynamic layout.qHyperCube.qMeasureInfo

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

Highlighted
ErikWetterberg
Honored Contributor

Re: Dynamic layout.qHyperCube.qMeasureInfo

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

rish
New Contributor III

Re: Dynamic layout.qHyperCube.qMeasureInfo

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
New Contributor III

Re: Dynamic layout.qHyperCube.qMeasureInfo

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
New Contributor III

Re: Dynamic layout.qHyperCube.qMeasureInfo

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