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: 
sarath_babu
Contributor II
Contributor II

Mashup

Hi all,

I have made mashup with 6 kpi objects  from a application, but i need to add more kpi objects and filters in a single mashup.

Currently mashup is allowing only 6 kpi objects. Can anyone help me to increase the size.

Also is there any possibility to add show hide container extensions in mashup?

Thanks In advance

1 Solution

Accepted Solutions
MohammedMustaq
Partner - Creator
Partner - Creator

Hi,

Yes you can increase the no of objects from your

.html file

<div class="flex-container">
<div id="QV01" class="qvobject"></div>
<div id="QV02" class="qvobject"></div>
<div id="QV03" class="qvobject"></div>
<div id="QV04" class="qvobject"></div>
<div id="QV05" class="qvobject"></div>
<div id="QV06" class="qvobject"></div>
<div id="QV07" class="qvobject"></div>
<div id="QV08" class="qvobject"></div>
</div>

KPI Objects.JPG

Regards

Mustaq

View solution in original post

5 Replies
MohammedMustaq
Partner - Creator
Partner - Creator

Hi,

Yes you can increase the no of objects from your

.html file

<div class="flex-container">
<div id="QV01" class="qvobject"></div>
<div id="QV02" class="qvobject"></div>
<div id="QV03" class="qvobject"></div>
<div id="QV04" class="qvobject"></div>
<div id="QV05" class="qvobject"></div>
<div id="QV06" class="qvobject"></div>
<div id="QV07" class="qvobject"></div>
<div id="QV08" class="qvobject"></div>
</div>

KPI Objects.JPG

Regards

Mustaq

sarath_babu
Contributor II
Contributor II
Author

Thank you very much Mustaq.

Now am able to increase the no of objects in Mashup.

Please help me to solve the below queries if possible.

1) Can size of a KPI object can be decreased using the html or js.

I have attached a kpi original image in web page , need to decrease the size.

2)Can i use show hide container(after clicking on KPI, it should give the details table) in Mashup.

MohammedMustaq
Partner - Creator
Partner - Creator

 

In the .css File by Default we have one Object Size

 

.qvplaceholder, .qvobject {
flex: 1 1 auto;
height: 300px;
min-width: 400px;
margin: 45px 0 0 45px;
}

//Add the below CSS Code 

//You can increase or decrease the Object Size

.qvplaceholder, .qvobject1 {
flex: 1 1 auto;
height: 50px;
min-width: 200px;
margin: 45px 0 0 45px;
}

.qvplaceholder, .qvobject2 {
flex: 1 1 auto;
height: 150px;
min-width: 250px;
margin: 45px 0 0 45px;
}

.qvplaceholder, .qvobject3 {
flex: 1 1 auto;
height: 200px;
background-color: yellow;
border-radius: 25px;
margin: 45px 0 0 45px;
}

//You need to make changes in .Html file as well

 

<div class="flex-container">
<div id="QV01" class="qvobject1"></div>
<div id="QV02" class="qvobject2"></div>
<div id="QV03" class="qvobject3"></div>
<div id="QV03" class="qvobject"></div>
<div id="QV04" class="qvplaceholder4"></div>
<div id="QV05" class="qvobject"></div>
<div id="QV06" class="qvobject"></div>
</div>

Object Size.JPG

 

 

 

Show / Hide follow the link  https://docs.angularjs.org/api/ng/directive/ngShow

 

 

Regards

Mustaq

 

Navya
Contributor II
Contributor II

Hi MohammedMustaq,

after trying the code you have given this is how my result set looks like.I see that qvobject3 profile being applied to all the objects.

I am using single page template,is there a way that i could give different sizes,only the width is changing any changes to height is reflecting to all the objects.Also,I am trying put filters on the left hand side of mashup and place the kpis on right side adjacent to filters.which i am not able to do at the moment,would you be able to suggest any tips.

Thanks,

Navya

 

 

ajaykakkar93
Specialist III
Specialist III

I think my post will help you solve your issue and requirment

https://community.qlik.com/t5/Qlik-Sense-Enterprise-Documents/Qlik-Sense-Mashup-Development-Tutorial...

Please mark the correct replies as Solution. Regards, ARK
Profile| GitHub|YouTube|Extension|Mashup|Qlik API|Qlik NPrinting