Skip to main content
Announcements
Qlik Introduces a New Era of Visualization! READ ALL ABOUT IT
cancel
Showing results for 
Search instead for 
Did you mean: 
NikosSpanos
Contributor III
Contributor III

Customize pivot table using Mashup or Extension

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

 

Screenshot_7.png

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.

Screenshot_8.png

 

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.

Labels (4)
1 Solution

Accepted Solutions
mato32188
Specialist
Specialist

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. 

mato32188_0-1616605046043.png

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

.qv-pt

.cell

.header

.top

BR

m

ECG line chart is the most important visualization in your life.

View solution in original post

8 Replies
mato32188
Specialist
Specialist

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. 

mato32188_0-1616605046043.png

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

.qv-pt

.cell

.header

.top

BR

m

ECG line chart is the most important visualization in your life.
NikosSpanos
Contributor III
Contributor III
Author

@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?

 

Screenshot_9.png

mato32188
Specialist
Specialist

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

ECG line chart is the most important visualization in your life.
mato32188
Specialist
Specialist

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

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

ECG line chart is the most important visualization in your life.
NikosSpanos
Contributor III
Contributor III
Author

@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
Specialist
Specialist

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

ECG line chart is the most important visualization in your life.
NikosSpanos
Contributor III
Contributor III
Author

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

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.