can we apply image as background for sheets in QS ?

[manish_gupta]

Hello Qlik Community Members,

I am new to Qlik Sense and playing with different option in Qlik Sense ( SaaS).  One thing I didn't see is to use image as   background for sheets in QS. I don't think its possible out of the box based on my research and wanted to check if there is a way to do it. 

Thanks

[rbartley]

Hi Manish,

You can use Qlik Sense themes to achieve this.  See this theme created by the Qlik Sense Theme Creator:

https://sensetheme.com/edit/5c0e3158a569ee031930a46b 

The key style is this one:

.qv-panel-sheet {
background-image: url("xmas_18_background.png");
}

So, just upload your image and replace the url with your file name.

Regards,

Richard

[manish_gupta]

Hi Richard,

Thank you for reply.  So it looks like building the custom theme is only option to change the background image of sheet.  As I am newbie to QS so I would stick with out of the box options for now before I start look into customization and bring this to our QS admin team since importing custom theme required admin privileges.  

I was just hoping there was a simple way for developer to do this since I am so used to do this in pervious BI tool I worked.  But I understand there are always differences of features and functionalities and it would take some time to get used to it. 

Thanks

Manish

[rbartley]

Hi Manish,

The use of themes is standard Qlik Sense functionality.  However, I agree that this is something that could have been accomplished quite easily by providing formatting options as properties of the sheet.

[tresesco · Accepted solution]

If custom theme looks to be not very viable, you can also try using similar CSS in multi-KPI object.

[rbartley]

I tried this but it didn't work, but then I realised that the url I was using was wrong (I had missed out the appcontent/appid section).  Here is the css entry that worked for me:

.qv-panel-sheet {
background-image: url("http://<servername>/appcontent/25b9e00f-da70-404c-86ff-aeefe65a953f/SpaceX.png");
}

Manish, the appID is part of the url when you open your app:

http://<servername>/sense/app/<appID>/sheet/

[manish_gupta]

Hi @rbartley @tresesco  thank you for the alternative option. 

I tried the suggested path but somehow image is not showing up.  One thing I wanted to mention that we are using QlikSense SaaS version so not sure if url woul be different. Also I can see the image in "Media Library / In App" and can use in "Text/Image" chart type so I know image is working fine. 

here are the urls I tried

.qv-panel-sheet {
background-image: url("https://<company>/appcontent/80e66c6e-0e9f-4e3d-8600-4701415ca307/store.png");
}

.qv-panel-sheet {
background-image: url("https://<company>/sense/appcontent/80e66c6e-0e9f-4e3d-8600-4701415ca307/store.png");
}

[rbartley]

Ok, try this:

Add a text & image visualization to your sheet and add the image you want to use as a background image, then hit F12 (I have only tried this in Chrome) to open up the Developer Tools window, make sure the elements tab is selected then Ctl+F to open the search bar and find <img .  As you can see below, this will show you the path you need to use in  .qv-panel-sheet in the multi-KPI.

[manish_gupta]

Hi @rbartley 

Yes, I was able to get the correct url and as expected it was different in SaaS version. here is the url for reference

https://<servername>/api/v1/apps/80e66c6e-0e9f-4e3d-8600-4701415ca307/media/files/store.png

things are looking good so far except I have one question...how do I hide multi-kpi chart so that background image stays in sheet but chart is not visible.

And thank you so much for taking time and helping me out on this. 

Regards

Manish

[rbartley · Accepted solution]

Hi @manish_gupta,

I'm not aware of a way that will completely hide the multi-kpi since the div elements that wrap the visualizations are generic .  However, I would suggest you set the grid spacing property of the sheet to narrow, reduce the size of the multi kpi to one cell and then add this style to the multi kpi:

.qv-object-qlik-multi-kpi
{
display: none
}

This should ensure that the content of the multi-kpi is not visible (of course, it means that all multi kpis will be hidden, but there is no way around this since Qlik does not assign element IDs).

This worked for me so long as the multi kpi had a dimension and measure set, otherwise it displayed an incomplete visualization message.