Engine API get sheet height for extended sheets

[rbartley]

Hi everyone,

Can anyone tell me how to find the height of a sheet when using the Engine API?  I get the following from the layout, but qLayout.height is shown as 738 when the extended sheet has a height of around 4700px.

Any help would be gratefully received.

Richard

[rbartley]

@alex_colombo 

You wrote:

"You can get canvas size looking an columns and rows mentioned above by me and you don't need to use custom sheet size. Canvas is thread as grid, so with rows and columns."  

Surely this is only true if the canvas is the same size as the screen, not if it is extended.  If it extended, it could be many screens high and the number of rows varies by grid spacing.  Perhaps I am missing something in your explanation. If so, please let me know.

[alex_colombo · Accepted solution]

@rbartley

let me recap all possible situations with sheet height and how to calculate visualizations height in px based on available screen.

Sheet size set to Responsive and Extended sheet is off. Available screen space of 1176px x 801px and a Qlik Sense sheet grid of 24 columns and 12 rows

I put a table in my canvas with a 12 colspan and 6 rowspan, so basically half of available width and heigth

Reading layout of the sheet I have width and height property set to 50, so 50% of available width and height (general sheet height property is set indeed on 100, see at the bottom of JSON)

"cells": [
	{
		"name": "ZttNwpJ",
		"type": "table",
		"col": 0,
		"row": 0,
		"colspan": 12,
		"rowspan": 6,
		"bounds": {
			"y": 0,
			"x": 0,
			"width": 50,
			"height": 50
		}
	}
],
.....
"height": 100,

If our available space for this screen resolution example is 1176px x 801px, it means that our table will be half of 1176 and half of 801, so it will have more or less width of 588px and height of 400px.

Indeed, if I inspect my table with developer tool I have 580px x 392.5

Sheet size set to Responsive and Extended sheet is ON. Available screen space of 1176px x 801px and a Qlik Sense sheet grid of 24 columns and 12 rows

I put a second table at the bottom of the extended sheet with a 12 colspan and 6 rowspan (same space as previous one)

Reading layout of the sheet I have width and height property of first and second table set to 33.3, so 33% of available width and height (general sheet height it's increased to 150, see at the bottom of JSON)

"cells": [
	{
		"name": "ZttNwpJ",
		"type": "table",
		"col": 0,
		"row": 0,
		"colspan": 12,
		"rowspan": 6,
		"bounds": {
			"x": 0,
			"y": 0,
			"width": 50,
			"height": 33.333333333333336
		}
	},
	{
		"name": "hvBTxu",
		"type": "table",
		"col": 0,
		"row": 12,
		"colspan": 12,
		"rowspan": 6,
		"bounds": {
			"y": 66.66666666666666,
			"x": 0,
			"width": 50,
			"height": 33.33333333333333
		}
	}
],
....
"heigth": 150,

Due to increase our sheet heigth we have to calculate a new available height for our screen, so we have to pass from 1176px x 801px to 1176px x 1065px, increasing height by 33%.

If our available space for this screen resolution example is 1176px x 1065px, it means that our tables will be half of 1176 and 1/3 of 1065, so it will have more or less width of 588px and height of 400px for each table.

Indeed, if I inspect my tables with developer tool I have 571px x 394px for both

Sheet size set to Custom with width 1200px and height 2000px. Qlik Sense sheet grid of 24 columns and 12 rows

I always have my two tables but my grid change from 24 columns and 12 rows to 12 columns and 24 rows.

Reading layout of the sheet I have width and height property of first and second table set to 33.3, so 33% of available width and height (in this scenario 2000px).

"cells": [
	{
		"name": "ZttNwpJ",
		"type": "table",
		"col": 0,
		"row": 0,
		"colspan": 6,
		"rowspan": 8,
		"bounds": {
			"y": 0,
			"x": 0,
			"width": 50,
			"height": 33.33333333333333
		}
	},
	{
		"name": "hvBTxu",
		"type": "table",
		"col": 0,
		"row": 16,
		"colspan": 6,
		"rowspan": 8,
		"bounds": {
			"y": 66.66666666666666,
			"x": 0,
			"width": 50,
			"height": 33.33333333333333
		}
	}
],

Due to fix our sheet heigth to 2000px, it means that our tables will be 1/3 of 2000, so it will have more or less height of 666.66 px for each table.

Indeed, if I inspect my tables with developer tool I have 638.33 px for both