Qlik Community

Ask a Question

New to Qlik Sense

If you’re new to Qlik Sense, start with this Discussion Board and get up-to-speed quickly.

Announcements
Support Cases coming to Qlik Community Oct. 4! Start chats, open cases, explore resources: READ DETAILS
cancel
Showing results for 
Search instead for 
Did you mean: 
manish_gupta
Contributor II
Contributor II

can we apply image as background for sheets in QS ?

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

Labels (1)
  • SaaS

2 Solutions

Accepted Solutions
tresesco
MVP
MVP

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

View solution in original post

rbartley
Specialist
Specialist

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.

 

View solution in original post

10 Replies
rbartley
Specialist
Specialist

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
Contributor II
Contributor II
Author

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

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

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

View solution in original post

rbartley
Specialist
Specialist

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/

community_background_image.PNG

manish_gupta
Contributor II
Contributor II
Author

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

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.

 

community_image_location.PNG

manish_gupta
Contributor II
Contributor II
Author

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

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.

 

View solution in original post