Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
rish
Contributor III
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

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

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

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

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

It worked, thanks a lot Erik!!! 🙂

rish
Contributor III
Contributor III
Author

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

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

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

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