Customize pivot table using Mashup or Extension

[NikosSpanos]

I ave created a pivot table that looks like the one in the image below:

I would like to customize this pivot by making the header background color = grey and font color bold.

Initially, I used the Dev Hub environment and specifically the Mashup editor by creating an app.visualization.create() object based on those two resources: resource 1, resource 2.However, I couldn't achieve what I want.

Then I used the visualization extension editor by using the default table template. But my inexperience with CSS and JavaScript still didn't help to solve my problem.

So my question is how can I quickly customize a pivot I have already created in Qlik Sense and color the header background as gray and make header font bold.

Is this feasible to be done by an amateur in CSS and JavaScript. Any tutorial is much appreciated.

Note that this thread about JSpivot table is not at all clear to me because I don't know JavaScript or CSS. Also the guy in this thread uses too many expressions while I want something as simple as coloring the background of headers in a pivot already created by me.

[mato32188 · Accepted solution]

Hi Nikos,

there is small hack. Add multiKPI object from your Visualisation Bundle, add measure (i.e. = 1), set style css. It is a css injection. 

But it would influence all other objects under classes in current tab (sheet).

.qv-pt

.cell

.header

.top

BR

m

[NikosSpanos]

@mato32188  Ty for the reply. I tried it in my qlik sense and it doesn't work. Also, how I get rid off the multiple kpi measure since it's totally irrelevant to my report?

[mato32188]

If you are using Chrome, press F12 and inspect the object. Hover mouse over your object and check the class or id in html element. You can't get rid off the multikpi object as it contains the css code, you can set css property opacity = 0 in the same place where you modify css and make it transparent that way.

div[tid="YOUROBJECTID"]{
opacity: 0;
}

m

[mato32188]

Try to keep the space between .qv-pt_ and the .cell class.

.qv-pt .cell.header.top{
background-color: gray}

[NikosSpanos]

@mato32188The trick indeed worked ^^. The space wasn't clear to me in the first screenshot. Do you propose any documentation on this css syntax? Meaning that a simple course on css should suffice to write similar scripts like yours?

Also, my initial statement about the removal of mutli-kpi still stands because there is no point keeping it in my dashboard.

Proposal 1: Write the short css style script in a different place rather than multi-kpi.

Proposal 2: How to hide the multi-kpi visual so the user can't hover or click on it?

Proposal 3: Export the pivot table css code and alter it by adding the css syntax you proposed.

Which of the three is feasible atm?

For the second proposal I read your approach to use this code:

div[tid="EVuJ"]{
opacity: 0;} , where EVuJ is the tid of the html object.

and indeed this worked for me. The multi-kpi disappeared from the visual. It is enabled if someone hovers over it although it's not visible. Any thoughts about the other two proposals (1,3)?

Have a nice day 🙂

[mato32188]

Hi Nikos,

if you want to go beyond standard Qlik skills, use https://www.w3schools.com. Qlik is now fully web friendly so any HTML, CSS or JS (angular) experience is worth.

I wrote it in Notepad++ and then copied into text area in which you can actually inject css properties of objects on page, but I think there is plenty of editors where you can write your code. I use Atom for bigger projects ,https://atom.io/.

BR

m

[NikosSpanos]

Indeed w3schools is a good documentation site for learning css. Although, I am not sure that w3schools refers to explicit css object like the one Qlik uses. For example the object .qv-pt .cell.header.top and its properties they seemed to be used explicitly by Qlik apps and not by any random app.

Thus, I want to find a documentation where all possible Qlik objects and their properties can be found. For example, the one I mentioned .cell.header.top how many other properties have apart from the ones we used (i.e background-color, font-weight)? An editor cannot show me with autofill the properties of such an object. I guess I have to figure them out by searching online.

Also @mato32188 it will be of great help if you can have a look at this thread I posted earlier this day.

Appreciate your help. 🙂

[wlau]

Hi,

Where can I get documentation on all the properties and values related to .qv-pt?  I've been struggling with finding more info on Qlik pivot tables on line.