Fetch Data using Backend API

ajaykakkar93 — Sat, 23 Feb 2019 12:03:32 GMT

Hi Team,

I have a small example to share about an important topic hypercube.
Some questions like :

How can we add dimension & measures
How can we add Data alternative to dimension & measure
How to fetch a cube
What property we get

Let's see how we can achieve all these in a simple way using "Backend API",

First make a property for adding dimension & measure OR data in to our Properties.

Note :

It is important to define initial property i.e. define dimension & measure
Number of columns & number of cells to be fetched i.e. qWidth & qHeight respectively
If we edit the number of column or cells, then you need to delete & add the extension again to view the results

Step 1 : Define initial property :

initialProperties: {
	qHyperCubeDef: {           
		qDimensions: [],
		           qMeasures: [],
		           qInitialDataFetch: [{                 
			qWidth: 10,
			                 qHeight: 1000           
		}]
	}  
},

Step 2 : Understand this properties:

initialProperties: Specifies the properties the object should have when created. Define either as a hypercube (qHyperCubeDef) or as a list object (qListObjectDef).
qHyperCubeDef : A hypercube can contain both dimensions and measures. If selections are applied to a hypercube, only the selected values are displayed.
qDimensions : Dimension to be used.
qMeasures : Measure to be used.
The maximum number of cells (qWidth * qHeight) allowed in an initial data fetch is 10,000 cells. Retrieve additional data in chunks using the getData method in the Backend API.

definition: {       
	type: "items",
	       component: "accordion",
	       items: {             
		dimensions: {                 
			uses: "dimensions",
			                 min: 1             
		},
		             measures: {                 
			uses: "measures",
			                 min: 0             
		},
		             sorting: {                 
			uses: "sorting"            
		},
		            settings: {                
			uses: "settings"           
		}      
	}
},

Step 3 : Define dimension & measure

Link to get a clear example

Step 4 : Add layout option :

paint: function($element)

Add layout to the function

paint: function($element, layout)

Console Log layout to get your extension Meta Data / Basic information

paint: function($element, layout) {    
   console.log(layout);
});

Now layout will print out basic information about my extension.

Step 5 : Understand what we get in our layout :

extensionMeta:{translationKey: "",icon:"table",iconChar:"g",isLibraryItem:true,visible:true, …}
footnote:""
qHyperCube:{qSize: {…}, qDimensionInfo: Array(6), qMeasureInfo: Array(1), qEffectiveInterColumnSortOrder: Array(7), qGrandTotalRow: Array(1), …}
qInfo:{qId: "PKsJZ", qType: "HyperCubeDemo"}
showDetails:false
showTitles:true
subtitle:""
title:""
version:"1.0.0"
visualization:"HyperCubeDemo"

extensionMeta: This will have all the configuration added in QEXT file of your extension.
footnote: Footnote for extension
qHyperCube : It has all the configuration, data, dimension & measure information , Grand total for our measure etc.
qInfo : It has type/object name.
showTitles : Will enable header & subtitle for object
showDetails: will allows users to choose to view details such as descriptions, measures and dimensions when user right clicks on the object.
title : Title of object.
version : Version of object.
visualization : Name of visualization.

Inside qHyperCube:

qDataPages:(4) [{…}, {…}, {…}]
qDimensionInfo:(6) [{…}, {…}, {…}, {…}, {…}, {…}]
qEffectiveInterColumnSortOrder:(7) [0, 6, 1, 2, 3, 4, 5]
qGrandTotalRow:[{…}]
qMeasureInfo:[{…}]
qSize:{qcx: 7, qcy: 2478}

qDataPages : It has all pages that is fetched from backend using backend api.
qDimensionInfo : All Dimension Information.
qMeasureInfo : All Measure Information.
qEffectiveInterColumnSortOrder : Sort order of all the fields added.
qGrandTotalRow : Total values as per measure.

qSize :
- qcx : Number of columns.
- Qcy : Total row data.

Inside qDataPages:

qArea:{qLeft: 0, qTop: 0, qWidth: 7, qHeight: 1000}

qMatrix:(1000) [Array(7), Array(7),…]

qArea :

qHeight : Rows.
qWidth : Column.
qTop : Where to start.

qMatrix : It has the initial data set fetched as per qArea.

Inside qMatrix[0][0]:

qElemNumber: returns Element Number
qNum: returns a number or "NaN"
qState: returns the state of this object as "O" , "X" or "S"
qText: returns a string value

Step 6 : Valuable variables

var self = this,
	hypercube = layout.qHyperCube,
	rowcount = hypercube.qDataPages[0].qMatrix.length,
	columncount = hypercube.qDimensionInfo.length + hypercube.qMeasureInfo.length,
	column = hypercube.qSize.qcx,
	totalrows = hypercube.qSize.qcy,
	pageheight = Math.floor(10000 / column),
	numberOfPages = Math.ceil(totalrows / pageheight); 
console.log(rowcount, layout);
Make a
function which will run based on numberOfPages from calculated variable

function fetchPage(numberOfPages, row) {     
	var add = 0;     
	for (var i = 1; i <= (numberOfPages); i++) {            // Make request pages
		         
		var requestPage = [{             
			qTop: (row * i) + add,
			             qLeft: 0,
			             qWidth: columncount,
			             qHeight: Math.min(1000, totalrows - rowcount)         
		}];         
		if (i == 0) {             
			add = 1;         
		}         
		console.log(requestPage, row);    // Pass request page in getData method in Backend API
		         
		self.backendApi.getData(requestPage).then(function(dataPages) {              // update rowcount
			       
			rowcount += dataPages[0].qMatrix.length;              // if (rowcount >= hypercube.qSize.qcy) {
			              //     $element.find(".more").hide();
			              // }
			         
		});     
	} 
}

article Fetch Data using Backend API in Qlik Sense Documents

Fetch Data using Backend API