Hide sheet based on screen resolution

[FabioGavinelli]

Hi all,

We developed an application on a screen that is 1920x1080 but we discovered a user has a 1366x760 screen resolution so we were looking for a solution to this that could be scalable. Our idea was to create different sheets based on different screen resolutons and than display the right one based on the resolution of the screen the app is working on.

My question so is, is there a way to retrieve the display resolution in qlik sense? are there extensions that can achieve this task? 

[Andrei_Cusnir · Accepted solution]

Hello,

If my understanding is correct, you want to build multiple sheets that contain the same visualizations, but different sheet size. Then you want to hide the sheets and display them only if the screen resolution of the user matches the sheet's specified size dimensions. 

I would suggest build the sheets only once and leave the option Sheet size to Responsive. This way Qlik Sense will make all of the visualizations responsive on any screen size. This is a good practice because:

1. Screen resolution might change if the user will attach his computer to a different monitor, therefore creating the same sheet multiple times just to cover most of the common screen resolutions, will be a lot of work and not very practical.
2. Additionally, imagine that you have to create 50+ sheets for data analysis and then you have to create another 50+ sheets just to adjust on the screen resolution of a particular user. This means that you will end up with 100+ visualizations which will take you too much time to create. But at the same time, the more visualizations you create, the more you will overload the app, making it less efficient each time.
3. If you keep the Sheet's size to Responsive, then no matter what is the screen resolution of the device where the app will be previewed, the elements will be adjusted accordingly.   

If you still would like to have this option then you can probably achieve this by creating your own custom extension. I was unable to find a custom extension that can do this for you, however you might be able to achieve this with further research on your own. Some information that might help you is:

1. Create a custom extension [1]
2. In your code you can add something like:

3. let screenResolutionWidth = window.screen.width;

4. let screenResolutionHeight = window.screen.height;

5. var div = `<div>The device's screen resolution is: ${screenResolutionWidth}px x ${screenResolutionHeight}px</div>`;

6. This will give you the following details:

7. 

8. As you can see, it is an extension that shows you the resolution of your device

9. Then you can have an variable and find a way to update this variable with your custom extension. This link[2] might help with this.

10. On one sheet you can update the Show condition as =varScreenHeight = '1080' and varScreenWidth = '1920'.

11. On the other sheet you can update the Show condition as =varScreenHeight = '760' and varScreenWidth = '1366'.

12. Now when you manage to create the custom extension that will update the variable based on the values that it will get of the screen resolution, your sheets will hide and unhide accordingly. 

I hope that this information was helpful. 

---

[1] https://help.qlik.com/en-US/sense-developer/May2021/Subsystems/Extensions/Content/Sense_Extensions/e...

[2] https://community.qlik.com/t5/Integration-Extension-APIs/Extension-Variable-set/td-p/1573180