Uploading/Publishing Qlik Objects to Hub through Enigma.js

Ask a Question

Hello,

I am currently trying to figure out a way to publish objects (charts/tables/variables/dimensions/etc) to the Qlik Hub from an application. I've been using Javascript, Enigma.js, and have been hosting the application on the same machine as the Qlik server as a mashup extension.

I've noticed there is a method called createObject() in the Engima.js API for use upon Generic Objects in Qlik, but I have working, but only creates objects locally (in application memory, not persistent, not in the hub). If I try to call the publish() method on that object, I receive a 'Bad Request' error.

This is the repo for Engima.js: https://github.com/qlik-oss/enigma.js. And the API schema: https://github.com/qlik-oss/enigma.js/blob/master/schemas/12.1477.0.json

Pretty stuck, any help would be greatly appreciated.

Thanks,

Matt

I've tried using the createObject() method:

"CreateObject": {
                "In": [{ "Name": "qProp","DefaultValue": {"qInfo": {"qId": "", "qType": ""}, "qExtendsId": "", "qMetaDef": {}, "qStateName": ""} }],
                "Out": [{ "Name": "qInfo" }]
            }

in tandem with publish() which is for Generic Objects in Qlik:

"Publish": {
                "In": [],
                "Out": []
            }

But receive a Bad Request error.

1 Solution

Accepted Solutions

Hi @mklaczak , if with "publish object to Qlik hub" you mean to create visualizations directly into a Qlik Sense app using enigma.js, below you can find an approach using Engine APIs (you can use Engine API methods with enigma.js). Anyway, I'd like to know what is the use case, why you need to do this?

First you have to understand in which sheet you will create your visualization. Assume that we will create a bar chart in sheet "My new sheet" with a sheet id equal to: ac33686c-8847-41f2-9e81-7b78fdb3210b.

As first step, from doc object (Qlik app in engine API) you have to get the sheet using GetObject method and passing sheet id:

{
	"handle": 1,
	"method": "GetObject",
	"params": {
		"qId": "ac33686c-8847-41f2-9e81-7b78fdb3210b"
	},
	"outKey": -1,
	"id": 3
}

You will received the sheet object and now you can call methods on it.

From sheet object you have to call GetFullPropertyTree method for getting the current sheet layout. Basically here you can understand which visualizations you have in sheet (if they are present) and with which position they have (grid position)

{
	"handle": 2,
	"method": "GetFullPropertyTree",
	"params": {},
	"outKey": -1,
	"id": 4,
	"return_empty": true,
	"delta": false
}

Response from engine is the sheet layout. For keeping things simple, my sheet is an empty sheet, so under cells and qChildren nodes we have an empty array.

This will be your starting point for next call, indeed we will add to it new visualizations

{
	"jsonrpc": "2.0",
	"id": 5,
	"result": {
		"qPropEntry": {
			"qProperty": {
				"qInfo": {
					"qId": "ac33686c-8847-41f2-9e81-7b78fdb3210b",
					"qType": "sheet"
				},
				"qExtendsId": "",
				"qMetaDef": {
					"title": "My new sheet (3)",
					"description": ""
				},
				"qStateName": "",
				"rank": 6,
				"thumbnail": {
					"qStaticContentUrlDef": {
						"qUrl": ""
					}
				},
				"columns": 24,
				"rows": 12,
				"cells": [],
				"qChildListDef": {
					"qData": {
						"title": "/title"
					}
				},
				"gridResolution": "small",
				"layoutOptions": {
					"mobileLayout": "LIST"
				}
			},
			"qChildren": [],
			"qEmbeddedSnapshotRef": null
		}
	}
}

Starting from above response now we will add a bar chart to the sheet using SetFullPropertyTree method. Basically we are adding bar chart adding information under cell and qChildren node.

Under cell you have to define name (your random viz id), bounds (chart position in grid), colspan and rowspan (width and height cells in grid).

Under qChildren you have to define barchart properties (dimensions, measures, reference lines, titles, subtitles, etc.)

{
	"handle": 2,
	"method": "SetFullPropertyTree",
	"params": {
		"qPropEntry": {
			"qProperty": {
				"qInfo": {
					"qId": "ac33686c-8847-41f2-9e81-7b78fdb3210b",
					"qType": "sheet"
				},
				"qExtendsId": "",
				"qMetaDef": {
					"title": "My new sheet (3)",
					"description": ""
				},
				"qStateName": "",
				"rank": 6,
				"thumbnail": {
					"qStaticContentUrlDef": {
						"qUrl": ""
					}
				},
				"columns": 24,
				"rows": 12,
				"cells": [
					{
						"name": "abcdef",
						"type": "barchart",
						"col": 0,
						"row": 0,
						"colspan": 12,
						"rowspan": 6,
						"bounds": {
							"y": 0,
							"x": 0,
							"width": 50,
							"height": 50
						}
					}
				],
				"qChildListDef": {
					"qData": {
						"title": "/title"
					}
				},
				"gridResolution": "small",
				"layoutOptions": {
					"mobileLayout": "LIST"
				}
			},
			"qChildren": [
				{
					"qChildren": [],
					"qProperty": {
						"qHyperCubeDef": {
							"qDimensions": [],
							"qMeasures": [],
							"qSuppressZero": false,
							"qInitialDataFetch": [
								{
									"qWidth": 17,
									"qHeight": 500
								}
							],
							"qSuppressMissing": true
						},
						"refLine": {
							"refLines": [],
							"dimRefLines": []
						},
						"showTitles": true,
						"title": "",
						"subtitle": "",
						"footnote": "",
						"disableNavMenu": false,
						"showDetails": false,
						"showDisclaimer": true,
						"qStateName": "",
						"components": [],
						"barGrouping": {
							"grouping": "grouped"
						},
						"orientation": "vertical",
						"scrollbar": "miniChart",
						"scrollStartPos": 0,
						"gridLine": {
							"auto": true,
							"spacing": 2
						},
						"dataPoint": {
							"showLabels": false,
							"showSegmentLabels": false,
							"showTotalLabels": true
						},
						"color": {
							"auto": true,
							"mode": "primary",
							"formatting": {
								"numFormatFromTemplate": true
							},
							"useBaseColors": "off",
							"paletteColor": {
								"index": 6
							},
							"useDimColVal": true,
							"useMeasureGradient": true,
							"persistent": false,
							"expressionIsColor": true,
							"expressionLabel": "",
							"measureScheme": "sg",
							"reverseScheme": false,
							"dimensionScheme": "12",
							"autoMinMax": true,
							"measureMin": 0,
							"measureMax": 10
						},
						"legend": {
							"show": true,
							"dock": "auto",
							"showTitle": true
						},
						"dimensionAxis": {
							"continuousAuto": true,
							"show": "all",
							"label": "auto",
							"dock": "near",
							"axisDisplayMode": "auto",
							"maxVisibleItems": 10
						},
						"preferContinuousAxis": true,
						"measureAxis": {
							"show": "all",
							"dock": "near",
							"spacing": 1,
							"autoMinMax": true,
							"minMax": "min",
							"min": 0,
							"max": 10
						},
						"tooltip": {
							"auto": true,
							"hideBasic": false,
							"chart": {
								"style": {
									"size": "medium"
								}
							},
							"data": {}
						},
						"qInfo": {
							"qType": "barchart",
							"qId": "abcdef"
						},
						"visualization": "barchart",
						"version": "1.12.17",
						"showMiniChartForContinuousAxis": true
					}
				}
			],
			"qEmbeddedSnapshotRef": null
		}
	},
	"outKey": -1,
	"id": 10
}

Engine response where you can understand that the chart is created

{
	"jsonrpc": "2.0",
	"id": 10,
	"delta": true,
	"result": {},
	"change": [
		2
	]
}

Hope this helps

View solution in original post

1 Reply