Qlik Community

Ask a Question

Integration, Extension & APIs

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

Announcements
QlikWorld Online 2021, May 10-12: Our Free, Virtual, Global Event REGISTER TODAY
cancel
Showing results for 
Search instead for 
Did you mean: 
FAB69
Contributor
Contributor

Styling of 'qvobject' in mashups must become easier

If Qlik wants us users to create much more mashups in the future they need to make styling of individual 'qvobject' elements in web pages much easier! It is almost impossible to apply any styles to the deeply nested 'qvobject' hierarchy that Qlik injects into the page - and even if you succeed to set own classes or own styles (with 'find' operations along the DOM tree) they will be gone on the next update of the content.

1. Why are there no unique IDs (GUIDS) generated for each and every relevant <div> that is created in the deeply nested qvobject hierarchy?
2. Why are there no 'dummy' classes injected on every level we can use for our own overwriting of the qlik styles with our own stylesheets? 
3. Is there any kind of callback function we can use to re-apply our styles after Qlik has refreshed the data?

 

Labels (1)
10 Replies
aaz
Employee
Employee

Hi @FAB69 ,

Instead of overwriting qvobject's CSS I would recommend to use `Themes` instead -> https://help.qlik.com/en-US/sense-developer/February2021/Subsystems/Extensions/Content/Sense_Extensi...

 

 

FAB69
Contributor
Contributor
Author

Hello Aaz,

I'm well aware of the possibility of using themes. But as far as I can see this only ever influences colors and font sizes - not things light height, width, padding etc. If I am mistaken here I am ready to change my opinion.

- Can you show me how I can reduce the distance between the selection bar and a chart, e.g.?

- How can I hide the 'Selections' button at the very right edge of the selection bar?

- How can I change the padding / height of a text/image box ?

- How can I influence the behavior of a filter pane (toggle between collapsed and expanded view)

- Why was there a need for this extension: https://github.com/ajaykakkar93/QlikSense-Sheet-Styler-Lite if themes are sufficient? Unfortunately it has been discontinued and obviously no longer works in new versions of Q.S.

aaz
Employee
Employee

Hi again,

You're not mistaken with your opinion, it is hard (and eventually not sustainable) to overwrite the CSS of the native object - but, I think, the general direction for such deeper customizations is to create your own custom visualization extensions, the UX team wants to keep a consistent look & feel across clients.

This type of customization will become easier over time when more of the native visualizations will be open-sourced (see https://github.com/qlik-oss/?q=sn-&type=&language) you will be able to create custom visualizations based on them.

FAB69
Contributor
Contributor
Author

Hi Aaz,

I just a couple of minutes ago tried to use a custom theme as you suggested. Is this even supposed to work in a mashup then? I changed one singel attribute of the KPI json (changed color to #ff0000) this way:

"label": {
"name": {
"color": "#ff0000",
"fontFamily": "@font-family"
},
"value": {
"fontFamily": "@font-family"
}
}

and it obviously works in the app! But when I put a KPI 'qvobject' div on my mashup web page the KPI label is not red. Is there something else I need to do before the theme attributes also transfer to a qvobject used in a mashup page?

Damien_Villaret
Support
Support

Hello @FAB69 

You need to explicitly apply the theme in the mashup javascript code.

https://help.qlik.com/en-US/sense-developer/February2021/Subsystems/APIs/Content/Sense_ClientAPIs/Ca...

FAB69
Contributor
Contributor
Author

Hello Damien,

thank you - that worked to get the theme affect the mashup also.
BUT - as you can see in my original question,  my main problem is not the changing of fonts and colors - but of a couple of other css attributes of qvobjects 'inner' main content!

I just tried for a test to apply this padding style to the label of my KPIs in the theme:

"label": {
"name": {
"color": "#ff0000",
"fontFamily": "@font-family",
"padding": "50px 50px 50px 50px"
},
"value": {
"fontFamily": "@font-family"
}
}

Though the color changes as desired, the padding doesn't seem to have any effect at all since Qlik doesn't allow to override these attributes or is not using them in the qvobject hierarchy that it generates for the mashup.

Is there ANY solution for this at all? Am I the first one to have more control about the rendering of the qvobject contents apart from coloring and fonts?
The way it works now it is quite impossible to use any commercially available web-template as a basis for creating a mashup. I need to adapt my qvobjects to the web template in detail - also affecting width/height/padding/z-index attributes etc.

Am I right that this doesn't work at the moment - even if I use a custom theme in Qlik?

FAB69
Contributor
Contributor
Author

... and additionally: the best and easiest thing for the developer of mashups would be if Qlik would create

a) unique IDs for every div level in the qvobject hierarchy

and

b) create a dummy class on the relevant divs (on the last position after the standard Qlik classes in the 'class' atrribute) which the developer could fill with his own attributes in individual stylesheet of his mashup.

Of coufrse I now could do something like this in my own stylesheet which sets all measure titles to font-size 70px.

.sn-kpi-measure-title {
font-size: 70px;
}

But first this would then affect ALL measure titles - not only the ones of specific qvobjects, second the mashup developer should not use Qlik's own class names in his own styles to override their attributes. An additional 'empty' class would be the best solution. And both this changes, a) and b), would give as a maximum of flexibility for adapting qvobjects to their surrounding third party HTML templates.

FAB69
Contributor
Contributor
Author

Ok, answering my own question - for now I will stay with the compromise to qualify my mashup styles with qvobject's id and will use the classes Qlik is creating on the different div levels like so (this is for a KPI value)

1. Will make the KPI title qvobject with ID 'QV_KPI01' white

#QV_KPI01 .sn-kpi-measure-title
{
color: #ffffff;
}

2. Will make the KPI value of same object red

#QV_KPI01 .sn-kpi-value .sn-kpi-ellips-text 
{
    color: #ff0000;
}

3.Will change the height and the padding of the top most wrapping element of this KPI

#QV_KPI01
{
    height: 50px;
    padding: 0px 0px 0px 0px;
}

1. and 2. could be done with a theme, 3. could not, as far as my experimenting goes

ErikWetterberg

Hi,

I have worked a lot with mashups and use a lot of CSS rules to modify the look and feel according to what the customer wants. I work the following way with CSS in Qlik Sense mashups.

I do not use themes in Qlik Sense mashups. There are basically two reason for this:

1) Themes does not allow you to style different objects of the same type differently, which in many cases is what you want. 

2) Themes are applied too late, which means that users will actually (sometimes) see the objects first without the theme for a very short time before the styling is applied. If you instead use CSS rules in the mashup itself they will be loaded first.

It is also easier to use standard CSS, you can use preprocessors and there are lots of web developers with CSS knowledge.

I also do not modify the objects HTML if it can be avoided, and in most cases it can. Instead I use classes on elements in the mashup and CSS rules that affect the object. For example if I want the header of some objects to be inverted (dark background, white text) I put the CSS class 'header-inverse' on the element where it's injected and add some rules to the mashup CSS, like this:

 

.header-inverse .qv-object-header {
    background-color:#404040;
}
.header-inverse .qv-object-title ,
.header-inverse .qv-object-subtitle {
   color:#fff!important;
}

 

 This has worked pretty well for me so far.