Skip to main content
Announcements
Accelerate Your Success: Fuel your data and AI journey with the right services, delivered by our experts. Learn More

Fetch Data using Backend API

No ratings
cancel
Showing results for 
Search instead for 
Did you mean: 
ajaykakkar93
Specialist III
Specialist III

Fetch Data using Backend API

Last Update:

Feb 23, 2019 7:03:32 AM

Updated By:

ajaykakkar93

Created date:

Feb 23, 2019 4:51:41 AM

Attachments

Hi Team,

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

  1. How can we add dimension & measures
  2. How can we add Data alternative to dimension & measure
  3. How to fetch a cube
  4. 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 :

  1. It is important to define initial property i.e. define dimension & measure
     
  2. Number of columns & number of cells to be fetched i.e. qWidth & qHeight respectively
  3. 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 :

  1. extensionMeta:{translationKey: "",icon:"table",iconChar:"g",isLibraryItem:true,visible:true, …}
  2. footnote:""
  3. qHyperCube:{qSize: {…}, qDimensionInfo: Array(6), qMeasureInfo: Array(1), qEffectiveInterColumnSortOrder: Array(7), qGrandTotalRow: Array(1), …}
  4. qInfo:{qId: "PKsJZ", qType: "HyperCubeDemo"}
  5. showDetails:false
  6. showTitles:true
  7. subtitle:""
  8. title:""
  9. version:"1.0.0"
  10. 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:

  1. qDataPages:(4) [{…}, {…}, {…}]
  2. qDimensionInfo:(6) [{…}, {…}, {…}, {…}, {…}, {…}]
  3. qEffectiveInterColumnSortOrder:(7) [0, 6, 1, 2, 3, 4, 5]
  4. qGrandTotalRow:[{…}]
  5. qMeasureInfo:[{…}]
  6. 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),…]

  1. qArea :
  • qHeight : Rows.
  • qWidth : Column.
  • qTop : Where to start.
  1. 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();
			              // }
			         
		});     
	} 
}

 

Version history
Last update:
‎2019-02-23 07:03 AM
Updated by: