topic Re: Engine API get sheet height for extended sheets in Integration, Extension & APIs

Engine API get sheet height for extended sheets

rbartley — Fri, 25 Nov 2022 12:40:13 GMT

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

Re: Engine API get sheet height for extended sheets

alex_colombo — Fri, 25 Nov 2022 14:17:05 GMT

Hi @rbartley if you set Sheet Size property to Custom, then you can get sheet height in px with engine API and getLayout method starting from sheet object.

Here height in getLayout response (see at the bottom of the json)

{ "jsonrpc": "2.0", "id": 7, "delta": true, "result": { "qLayout": { "qInfo": { "qId": "0551371a-a56f-4cb7-a0ec-b3d2a0b73027", "qType": "sheet" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ], "title": "Test Nebula Extension", "description": "" }, "qSelectionInfo": {}, "rank": 16, "thumbnail": { "qStaticContentUrl": {} }, "columns": 12, "rows": 12, "cells": [ { "name": "QEemD", "type": "sample-extension", "col": 0, "row": 0, "colspan": 6, "rowspan": 6, "bounds": { "y": 0, "x": 0, "width": 50, "height": 50 } } ], "qChildList": { "qItems": [ { "qInfo": { "qId": "QEemD", "qType": "sample-extension" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } } ] }, "gridResolution": "small", "layoutOptions": { "mobileLayout": "LIST", "sheetMode": "CUSTOM" }, "gridMode": "edit", "pxHeight": 1024, "pxWidth": 1280 } } }

If you set Extend Sheet to true you can get height from getLayout method as well. I think for this case height is an internal height. Any extension of the sheet is equal to 50. Start height is 100. If you increase two times the sheet, height will be 200.

Below getLayout response with height property

{ "jsonrpc": "2.0", "id": 8, "delta": true, "result": { "qLayout": { "qInfo": { "qId": "0551371a-a56f-4cb7-a0ec-b3d2a0b73027", "qType": "sheet" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ], "title": "Test Nebula Extension", "description": "" }, "qSelectionInfo": {}, "rank": 16, "thumbnail": { "qStaticContentUrl": {} }, "columns": 24, "rows": 18, "cells": [ { "name": "QEemD", "type": "sample-extension", "col": 0, "row": 0, "colspan": 12, "rowspan": 6, "bounds": { "x": 0, "y": 0, "width": 50, "height": 33.333333333333336 } } ], "qChildList": { "qItems": [ { "qInfo": { "qId": "QEemD", "qType": "sample-extension" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } } ] }, "gridResolution": "small", "layoutOptions": { "mobileLayout": "LIST", "sheetMode": "RESPONSIVE", "extendable": true }, "gridMode": "edit", "pxHeight": 1024, "pxWidth": 1280, "height": 150 } } }

Re: Engine API get sheet height for extended sheets

rbartley — Fri, 25 Nov 2022 17:06:41 GMT

Hi @alex_colombo ,

Thanks for your reply. When I set the sheet size to Custom, I can see the pxHeight and pxWidth properties, while the height is still shown as 738 (see below). How should interpret that? The height is certainly not 7.38 x the original sheet size of 1024 px high and, from your explanation, I would have expected a figure divisible by 50. Also, it doesn't seem possible to extend the custom height to more than 4000px. Is this a hard-coded limit?

{ "jsonrpc": "2.0", "id": 6, "result": { "qLayout": { "qInfo": { "qId": "3bf0fb22-1caa-4a72-a390-ae584b0146af", "qType": "sheet" }, "qMeta": { "title": "Trade Data (mobile)", "description": "", "createdDate": "2022-10-27T13:28:12.160Z", "modifiedDate": "2022-11-11T16:56:46.194Z", "published": false, "publishTime": "1753-01-01T00:00:00.000Z", "approved": false, "owner": { "id": "2f0857ac-ae7e-416c-9e72-9ff177853417", "userId": "bartlri", "userDirectory": "S4DAD", "userDirectoryConnectorName": "S4DAD", "name": "bartlri", "privileges": null }, "qSize": -1, "sourceObject": "", "draftObject": "", "privileges": [ "read", "update", "delete", "exportdata", "approve" ] }, "qSelectionInfo": {}, "rank": 14, "thumbnail": { "qStaticContentUrl": { "qUrl": "/appcontent/5d9d21ed-b276-4b7d-9864-174d89f11013/mobile-alt.png" } }, "columns": 12, "rows": 47, "cells": [ { "name": "fcae093c-7115-4ab8-a001-0458be3dacbb", "type": "pdf-screenshot", "col": 11, "row": 1, "colspan": 1, "rowspan": 1, "bounds": { "x": 87.5, "y": 1.3157894736842108, "width": 12.5, "height": 1.3157894736842108 } }, { "name": "47ae9bbe-36de-4e09-a9dd-25ab92045b49", "type": "filterpane", "col": 2, "row": 1, "colspan": 1, "rowspan": 1, "bounds": { "x": 12.5, "y": 1.3157894736842108, "width": 12.5, "height": 1.3157894736842108 } }, { "name": "7caede4b-d709-4eab-bb43-fc64b82f988c", "type": "filterpane", "col": 3, "row": 1, "colspan": 1, "rowspan": 1, "bounds": { "x": 25, "y": 1.3157894736842108, "width": 12.5, "height": 1.3157894736842108 } }, { "name": "115d4c29-200a-4f4b-b436-7dbbe599545d", "type": "filterpane", "col": 5, "row": 1, "colspan": 1, "rowspan": 1, "bounds": { "x": 37.5, "y": 1.3157894736842108, "width": 12.5, "height": 1.3157894736842108 } }, { "name": "5d3fb97c-44e5-4e73-a194-b4c12c984ae0", "type": "text-image", "col": 9, "row": 0, "colspan": 3, "rowspan": 1, "bounds": { "x": 75, "y": 0, "width": 25, "height": 1.3157894736842108 } }, { "name": "866687dd-09be-4889-85f4-5a3ba658e6c8", "type": "SimpleFieldSelect", "col": 2, "row": 0, "colspan": 1, "rowspan": 1, "bounds": { "x": 12.5, "y": 0, "width": 12.5, "height": 1.3157894736842108 } }, { "name": "97b36ca4-d07d-4426-9bae-f4b5d7591dc0", "type": "SimpleFieldSelect", "col": 3, "row": 0, "colspan": 1, "rowspan": 1, "bounds": { "x": 25, "y": 0, "width": 12.5, "height": 1.3157894736842108 } }, { "name": "192abcb0-b6a3-4b86-a586-14be6c348b3f", "type": "SimpleFieldSelect", "col": 5, "row": 0, "colspan": 1, "rowspan": 1, "bounds": { "x": 37.5, "y": 0, "width": 12.5, "height": 1.3157894736842108 } }, { "name": "90cd7577-ab68-4c1f-96ae-774e2c6d2620", "type": "qlik-button-for-navigation", "col": 9, "row": 1, "colspan": 1, "rowspan": 1, "bounds": { "x": 75, "y": 1.3157894736842108, "width": 12.5, "height": 1.3157894736842108 } }, { "name": "96504cb6-7cc7-43ef-b367-b559408411a3", "type": "SimpleFieldSelect", "col": 0, "row": 0, "colspan": 1, "rowspan": 1, "bounds": { "x": 0, "y": 0, "width": 12.5, "height": 1.3157894736842108 } }, { "name": "40ffa113-9645-4433-b12c-05d4f58cb38d", "type": "filterpane", "col": 0, "row": 1, "colspan": 1, "rowspan": 1, "bounds": { "x": 0, "y": 1.3157894736842108, "width": 12.5, "height": 1.3157894736842108 } }, { "name": "d89ccda8-b012-4a0f-a992-d0b1e5ad96df", "type": "linechart", "col": 0, "row": 7, "colspan": 12, "rowspan": 5, "bounds": { "x": 0, "y": 13.157894736842104, "width": 100, "height": 13.157894736842104 } }, { "name": "fRQCep", "type": "barchart", "col": 0, "row": 13, "colspan": 12, "rowspan": 6, "bounds": { "y": 27.631578947368425, "x": 0, "width": 100, "height": 13.157894736842104 } }, { "name": "srRsCU", "type": "linechart", "col": 0, "row": 20, "colspan": 12, "rowspan": 5, "bounds": { "y": 40.78947368421053, "x": 0, "width": 100, "height": 13.157894736842104 } }, { "name": "TXwuctX", "type": "pivot-table", "col": 0, "row": 2, "colspan": 12, "rowspan": 4, "bounds": { "x": 0, "y": 3.947368421052632, "width": 100, "height": 9.210526315789473 } }, { "name": "LHVxWhA", "type": "barchart", "col": 0, "row": 27, "colspan": 12, "rowspan": 5, "bounds": { "y": 56.57894736842105, "x": 0, "width": 100, "height": 13.157894736842104 } }, { "name": "gJLzsm", "type": "barchart", "col": 0, "row": 33, "colspan": 12, "rowspan": 5, "bounds": { "y": 69.73684210526315, "x": 0, "width": 100, "height": 13.157894736842104 } }, { "name": "pKLajg", "type": "barchart", "col": 0, "row": 39, "colspan": 12, "rowspan": 8, "bounds": { "y": 82.89473684210526, "x": 0, "width": 100, "height": 17.105263157894736 } }, { "name": "MEfJwvM", "type": "agri-legend", "col": 0, "row": 26, "colspan": 12, "rowspan": 1, "bounds": { "y": 53.94736842105263, "x": 0, "width": 100, "height": 2.631578947368421 } }, { "name": "KGqFLp", "type": "text-image", "col": 0, "row": 2, "colspan": 12, "rowspan": -1, "bounds": { "x": 0, "y": 2.6315789473684212, "width": 100, "height": 1.3157894736842106 } }, { "name": "bsjpuX", "type": "agri-legend", "col": 0, "row": 13, "colspan": 12, "rowspan": -1, "bounds": { "y": 26.31578947368421, "x": 0, "width": 100, "height": 1.3157894736842104 } } ], "qChildList": { "qItems": [ { "qInfo": { "qId": "47ae9bbe-36de-4e09-a9dd-25ab92045b49", "qType": "filterpane" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "115d4c29-200a-4f4b-b436-7dbbe599545d", "qType": "filterpane" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "7caede4b-d709-4eab-bb43-fc64b82f988c", "qType": "filterpane" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "5d3fb97c-44e5-4e73-a194-b4c12c984ae0", "qType": "text-image" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "fcae093c-7115-4ab8-a001-0458be3dacbb", "qType": "pdf-screenshot" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "192abcb0-b6a3-4b86-a586-14be6c348b3f", "qType": "SimpleFieldSelect" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "40ffa113-9645-4433-b12c-05d4f58cb38d", "qType": "filterpane" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "96504cb6-7cc7-43ef-b367-b559408411a3", "qType": "SimpleFieldSelect" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "EU Composition" } }, { "qInfo": { "qId": "866687dd-09be-4889-85f4-5a3ba658e6c8", "qType": "SimpleFieldSelect" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "97b36ca4-d07d-4426-9bae-f4b5d7591dc0", "qType": "SimpleFieldSelect" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "90cd7577-ab68-4c1f-96ae-774e2c6d2620", "qType": "qlik-button-for-navigation" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "d89ccda8-b012-4a0f-a992-d0b1e5ad96df", "qType": "linechart" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "Monthly EU Trade, Product Weight in tonnes" } }, { "qInfo": { "qId": "bsjpuX", "qType": "agri-legend" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "fRQCep", "qType": "barchart" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "Annual EU Trade, Product Weight in tonnes" } }, { "qInfo": { "qId": "srRsCU", "qType": "linechart" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "Annual EU Trade Top 5, Product Weight in tonnes" } }, { "qInfo": { "qId": "TXwuctX", "qType": "pivot-table" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "Trade by Product Group" } }, { "qInfo": { "qId": "LHVxWhA", "qType": "barchart" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "EU Trade by Member State, Product Weight in tonnes" } }, { "qInfo": { "qId": "gJLzsm", "qType": "barchart" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": " EU Trade Top 20 by Partner, Product Weight in tonnes" } }, { "qInfo": { "qId": "pKLajg", "qType": "barchart" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "EU Trade, Product Weight in tonnes" } }, { "qInfo": { "qId": "KGqFLp", "qType": "text-image" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } }, { "qInfo": { "qId": "MEfJwvM", "qType": "agri-legend" }, "qMeta": { "privileges": [ "read", "update", "delete", "exportdata" ] }, "qData": { "title": "" } } ] }, "gridResolution": "small", "layoutOptions": { "mobileLayout": "LIST", "extendable": true, "sheetMode": "CUSTOM" }, "gridMode": "edit", "height": 738, "actions": [ { "actionLabel": "Clear selections", "actionType": "clearAll", "bookmark": "", "field": "", "variable": "", "showSystemVariables": false, "softLock": false, "value": "", "cId": "KVvzmjP" }, { "actionLabel": "Bookmark", "actionType": "applyBookmark", "bookmark": "fc686743-cfe7-4edb-b04a-61ed6b77b76e", "field": "", "variable": "", "showSystemVariables": false, "softLock": false, "value": "", "cId": "sN" } ], "pxHeight": 4000, "pxWidth": 1280 } } }

However, when the sheet size is set to responsive, I don't see the pxHeight or pxWidth unless I set the sheet to custom first then set it back to responsive (in which case these values are the same, presumably because the properties were updated by this action).

Re: Engine API get sheet height for extended sheets

alex_colombo — Mon, 28 Nov 2022 07:58:03 GMT

Hi @rbartley , can you please delete the sheet and recreate it or create a new one and then call the API getLayout method? It's weird for me to se 738 as height.

About the 4000px, this is a product limit, see our documention here.

Re: Engine API get sheet height for extended sheets

rbartley — Mon, 28 Nov 2022 16:57:10 GMT

HI @alex_colombo ,

Thanks for your suggestion. When I create a new sheet and set the size to custom with a height of 4000, I get the following, with a height is of 100. Is that what you would expect?

Also, the maximum height limit is rather frustrating. Is there another way of determining the height of each visualization on an extended sheet in responsive mode using the Engine API? The hub seems to be able to calculate the heights just fine. Does it use a formula based on the grid size and number of rows? If so, what is the formula?

Re: Engine API get sheet height for extended sheets

alex_colombo — Mon, 28 Nov 2022 16:54:59 GMT

Hi @rbartley correct, height of 100 means that you set to extend the sheet without extendening it. As soon as you extend once, then height will be 150.

About determining the height, what are you trying to achive exactly? Why do you need to know the height of each visualizations?

Re: Engine API get sheet height for extended sheets

rbartley — Tue, 29 Nov 2022 09:32:07 GMT

HI @alex_colombo ,

I am examining each sheet using the Engine API in order to automatically generate the code (html and javascript) for a mashup for mobile phones based on the sheet contents and want the height of each visualization to be the same as in the hub (when viewed in normal desktop mode). I am effectively trying to simulates the mobile list mode in the hub but in a mashup and with better sizing (e.g. in mobile list mode in the hub, filter panels are far too tall, creating a lot of space between visualizations).

Re: Engine API get sheet height for extended sheets

alex_colombo — Tue, 29 Nov 2022 11:30:05 GMT

@rbartley that's clear. Height in hub is calculated dynamically based on the available screen. So no APIs for this and it makes sense becuase it's totally a client side feature. Furthermore, Qlik visualizations are responsive, so height it will be dynamic.

I worked on a similar scenario and I used engineAPIs. What we have done is to understad which position visualizations have in the sheets and which space are using in the sheet. For checking this we have used rowspan and colspam in conjunction with height and width from cells object (object retrieved from getLayout method called from a sheet object.) Below an example

"columns": 12, "rows": 12, "cells": [ { "name": "QEemD", "type": "sample-extension", "col": 0, "row": 0, "colspan": 6, "rowspan": 6, "bounds": { "y": 0, "x": 0, "width": 50, "height": 50 } } ],

With these information we have converted Qlik width and height in new width and height in px in my web application based on the available space. E.g. colspan of 6 and width of 50 mean that my vix is using half of a sheet becuase total columns is 12 (see columns property in the examble above). These values will be converted to 800px width in my web app.

Re: Engine API get sheet height for extended sheets

rbartley — Tue, 29 Nov 2022 14:24:07 GMT

@alex_colombo

Thanks again. However, when you write: " Height in hub is calculated dynamically based on the available screen. So no APIs for this " That's a bit confusing since I thought that the Qlik hub was built using the APIs. I've heard that said many times.

If I'm not mistaken, we seem to get back to the same issue that to calculate the visualization size in pixels, we need to know the screen size and the only way to get the canvas size is to use the custom sheet size, where a limit of 4000 pixels high has been imposed (why?).

Thanks for your help with this.

Richard

Re: Engine API get sheet height for extended sheets

alex_colombo — Tue, 29 Nov 2022 14:39:33 GMT

@rbartley all settings, actions and data exchanges between hub and Qlik engine is built with APIs, that's correct. Then we have a front end part and basically, it's a web portal, built with Angular. From this web portal I supposed there is a kind of JS function that calculated heigth of all charts based on what have been developed in the sheet using sheet canvas and its grid and available screen.

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.

As example, our grid has 12 rows and 12 columns. Cell in top left corner is col 1 and row 1, cell in bottom right corner is col 12 and row 12. So if a developer put a barchart and use 6 rows and 6 columns, it means that barchart will be width and height half of the page. This is what you need for convert cells into pixels. Does it make snese?

About the limit, I don't know why it is there, but maybe for a UX reason and for avoiding infinte scroll.

Re: Engine API get sheet height for extended sheets

rbartley — Tue, 29 Nov 2022 17:25:09 GMT

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

Re: Engine API get sheet height for extended sheets

alex_colombo — Wed, 30 Nov 2022 14:54:57 GMT

@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