topic Re: Styling of 'qvobject' in mashups must become easier in Integration, Extension & APIs

Styling of 'qvobject' in mashups must become easier

FAB69 — Thu, 01 Apr 2021 14:18:05 GMT

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?

Re: Styling of 'qvobject' in mashups must become easier

Aiham_Azmeh — Wed, 24 Feb 2021 07:13:32 GMT

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_Extensions/CustomThemes/custom-themes-getting-started.htm

Re: Styling of 'qvobject' in mashups must become easier

FAB69 — Wed, 24 Feb 2021 07:34:08 GMT

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.

Re: Styling of 'qvobject' in mashups must become easier

Aiham_Azmeh — Wed, 24 Feb 2021 09:50:21 GMT

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.

Re: Styling of 'qvobject' in mashups must become easier

FAB69 — Wed, 24 Feb 2021 10:55:54 GMT

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?

Re: Styling of 'qvobject' in mashups must become easier

Damien_V — Wed, 24 Feb 2021 11:01:18 GMT

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/CapabilityAPIs/ThemeAPI/ThemeAPI.htm

Re: Styling of 'qvobject' in mashups must become easier

FAB69 — Wed, 24 Feb 2021 11:44:13 GMT

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?

Re: Styling of 'qvobject' in mashups must become easier

FAB69 — Wed, 24 Feb 2021 12:02:33 GMT

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

Re: Styling of 'qvobject' in mashups must become easier

FAB69 — Thu, 25 Feb 2021 08:43:35 GMT

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

Re: Styling of 'qvobject' in mashups must become easier

ErikWetterberg — Thu, 25 Feb 2021 12:24:57 GMT

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.

Re: Styling of 'qvobject' in mashups must become easier

FAB69 — Thu, 25 Feb 2021 13:33:22 GMT

Hello and thank you Erik,

I guess this is the way I'm also going to do it; but did you never encounter any problems with attributes that have more impact than mainly changing colors? Everything that has to do with sizes in Qlik objects doesn't seem to play very nicely with surrounding HTML elements:

I have a bootstrap 'card' e.g. which is supposed to contain a Qlik bar chart and directly above it a filter pane to let the user choose a year from a range which then affects the chart:

If I simply show the filter pane from the start it pushes the bar chart dwon over the rim of my bootstrap card. If, on the other hand, I hide the filter pane with a 'display:none' first and the user can make it shown by pushing a button, it is displayed as a horizontal line first and only actually appears after the user has clicked one on said line.

Question 1: Did you get Qlik to work with a surrounding bootstrap template without any such hassle?
Question 2: Did you succeed in Qlik 'table' qvobjects to display the original ('Qlik' style) scroll bars in your mashup? I only get them when I embed them with the <IFrame> method! Embedded as a normal qvobject there are no scroll bars and if I force them by changing the 'overflow' attribute with CSS these scroll bars come from the client side and don't actually have the right size and scolling amount for the data contained in the table.

Re: Styling of 'qvobject' in mashups must become easier

SN — Wed, 23 Jun 2021 12:09:41 GMT

Hello,

Hope you found the solution!

if you didn't

here is what I've found and it works fine with me

https://community.qlik.com/t5/New-to-Qlik-Sense/Mashup/td-p/1526859

Re: Styling of 'qvobject' in mashups must become easier

Mahamed_Qlik — Wed, 09 Aug 2023 07:40:58 GMT

Hi Fab69,

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

This works fine for me but in some of KPI we have used Label as title not measure title...so How can we customize colors for labels??