Embedding report tables with the table plug-in

- Embedding report tables with the table plug-in - In this example we will see how we can embed dynamic data tables in a Web page with data provided from a DHIS back-end server using the table plug-in. The table plug-in resides inside the same file as the chart plug-in so please refer to the section about the chart plug-in above on how to include the required JavaScript and CSS files and how to do authentication. The available table options are listed in the table below. - - Table plug-in configuration - - - - - Param - - - Type - - - Required - - - Options (default first) - - - Description - - - - - - indicators - [string] - Yes* - - Identifiers of indicators to include in table - - - dataelements - [string] - Yes* - - Identifiers of data elements to include in table - - - datasets - [string] - Yes* - - Identifiers of data sets to include in table - - - periods - [string] - No - last12Months | lastMonth | lastQuarter | last4Quarters | lastSixMonth | last2SixMonths | thisYear | last5Years - Names of relative periods to include in table - - - orgunits - [string] - Yes - - Identifiers of organisation units to include in table - - - orgUnitIsParent - boolean - No - false | true - Whether the table should display the children of the selected org units - - - crosstab - string[] - No - data | periods | orgunit - Which data dimension should be crosstabulated and used as columns - - - hiddenCols - int[] - No - - Zero-based index of the columns in the table which should be hidden - - - useExtGrid - boolean - No - false | true - Whether the table should be rendered as plain HTML or as an Ext JS Grid - - - el - string - Yes - - Identifier of HTML element to render the table in - - - url - string - Yes - - Base URL of the DHIS server - - - -

- In the following are examples on how the table plug-in can be used. - DHIS.getTable({ - indicators: ['Uvn6LCg7dVU'], - periods: ['last12Months'], - orgunits: ['ImspTQPwCqd'], - crosstab: ['periods'], - orgUnitIsParent: true, - useExtGrid: false, - callbackName: 'table1', - hiddenCols: [0], - el: 'table1', - url: base -}); - -DHIS.getTable({ - dataelements: ['s46m5MS0hxu', 'YtbsuPPo010', 'xc8gmAKfO95', 'UOlfIjgN8X6'], - periods: ['last4Quarters'], - orgunits: ['ImspTQPwCqd'], - crosstab: ['data'], - useExtGrid: false, - callbackName: 'table2', - el: 'table2', - url: base -}); - Finally we insert in the Web page the div elements which are referred to in the table configuration and used to render the tables. - <div id="table1"></div> -<div id="table2"></div> - To view a complete working example please visit . - You can also choose to provide a link to the report table instead of rendering it directly on the web page. The configuration of the link function is very similar to the table function and shares the indicators, dataelements, datasets, periods, orgunits, orgUnitIsParent, crosstab and url properties. There is only one additional parameter which is listed in the table below. - - Link plug-in (additional) configuration - - - - - Param - - - Type - - - Required - - - Options (default first) - - - Description - - - - - - format - string - No - html | xls | csv | pdf | json | xml - The representation format of the table, can be HTML, Excel, CSV, PDF, JSON and XML - - - -

- Below is an example on how to use the link function. The link URL is retrieved from the getUrl function and later set as target for a link the HTML document. - var url1 = DHIS.getUrl({ - indicators: ['Uvn6LCg7dVU'], - periods: ['last12Months'], - orgunits: ['ImspTQPwCqd'], - crosstab: ['periods'], - orgUnitIsParent: true, - format: 'xls', - url: base -}); - -Ext.get('link1').set({href: url1}); - The link HTML element can be defined in the body section of the document like below. - <a id="link1">Download as Excel</a> - To view a complete working example please visit . -