Datatable
axDatatable
Description
axDatatable allows to embed of a datatable into your screen.
By using this extension you will be subject to the Terms of Service as outlined in https://datatables.net/faqs/index#Licensing
Usability
|
Context |
Supported |
|---|---|
|
Input screen fields |
No |
|
Output screen fields |
No |
|
Input subfile fields |
No |
|
Output subfile fields |
No |
|
New screen elements |
Yes |
Properties
|
Name |
Description and Comments |
JavaScript |
Shipped default |
|---|---|---|---|
| ajaxSource | Data source that can be obtained by Ajax when dataSourceType is Ajax Source. | Yes | ENV.returnValue = ''; |
| arrayData | An array of data in json format when dataSourceType is Fixed Array. | Yes | ENV.returnValue = []; |
| autoWidth | control DataTables' smart column width handling | No | False. |
|
baseStyle |
Set base style using avaialable base style for datatable (display, hover,compact,stripe,order-column) |
No |
display hover compact stripe order-column. |
|
columnDefs |
Column definition |
Yes |
None |
| columnNames |
Set column specific initialisation properties in json format |
Yes |
ENV.returnValue = []; |
|
dataSourceType |
Indicate where the source data is obtained from. The values are Fixed Array (default), XML File, Ajax Source, Dynamic Table and Static Table. |
No |
Fixed array |
|
directory |
Path to locate the fileName when dataSourceType is XML File. |
No. |
*DEFAULT which equal to /ts/screens/<definitionSet>. |
|
dom |
Define the table control elements to appear on the page and in what order. |
No |
Blftip |
|
fileName |
Name of XML file when dataSourceType is XML File. |
No |
None |
| language | Language configuration options for DataTables | Yes | ENV.returnValue = []; |
| lengthChange | control the end user's ability to change the paging display length of the table. | No | False |
| lengthMenu | Change the options in the page length select list. | Yes | ENV.returnValue = [ 10, 25, 50, 75, 100 ]; |
| order | Initial order (sort) to apply to the table. | Yes | ENV.returnValue = []; |
| ordering | control ordering (sorting) abilities in DataTables. | No | False |
| paging | Enable or disable table pagination. | No | False |
| searching | control search (filtering) abilities | No | False |
| showinfo | Show information | No | False |
| sqlVariables | For Dynamic Table data source the variables used in your query | Yes | ENV.returnValue = []; |
| tableFileName | The name of the file where the table object instance is defined. Used when dataSourceType is Dynamic Table or Static Table. | Yes | tables_static.txt or tables_dynamic.txt |
| tableHtml | Specifies a string or Javascript code that defines the HTML element definition to be inserted into the screen when dataSourceType is Ajax Source. | Yes | None |
| tableName | Supply the table name make sure that the table name used exist in static and dynamic table files. Used when dataSourceType is Dynamic Table or Static Table. | No | None |
Notes, Comments and Warnings
To use this extension you must be familiar with Datatables. Information about Datatables can be found at: https://datatables.net/
Static Table: static tables are loaded once from the server at start up. The name of the static table must be the name specified in tableName.Static tables are very efficient and they can contain hard coded values or can be loaded by executing SQL commands.
XML File: the data to fill the table is obtained from an XML file located by default in /ts/screens/<private folder>. To specify another location change the xmlFileLocation property.
Dynamic Table: use this option carefully as it is the only one where the data is loaded at every screen arrival with an expected performance impact in the rendering of the screen. When you use this option you must specify the name of the query in sqlQueryName as defined in your dynamic tables file.
This value indicates that the data should come from a dynamically created table.
- A dynamic table is (re)loaded every time a screen is displayed.
- Dynamic tables are expensive to use compared to static tables.
- Only use them when the table content needs to vary according to some dynamic criteria (eg: current company, current product, etc).
- Dynamic tables can only be loaded by SQL commands.
Examples
Example 1: Fixed Array
1. Set datataSourceType property “Fixed Array”
2. Add the following script to columnNames property.
ENV.returnValue = [ { title:"Firstname" }, { title:"Lastname"} ];
3. Add the following script to ArrayData property.
ENV.returnValue = [ [ "Tiger", "Nixon"], [ "Garrett","Winters" ], [ "Ashton","Cox"], [ "Cedric","Kelly"], [ "Airi","Satou"], [ "Brielle","Williamson"], [ "Herrod","Chandler" ], [ "Rhona","Davidson"] ];
4. Verify output results
Example 2: Static Table
1. Set datataSourceType property “Static Table”
2. Set “paging” and “searching” property checkbox to Checked.
3. Set tableFileName property “tables_static.txt”
4. Set tableName property “XHRBusinessUnit” and make sure the following static table object instance is present the table_static.txt
DefineObjectInstance { className = "StaticTable", name = "XHRBusinessUnit", source = "sql", selectSQLcommand = " XHRDEPCDE,XHRBUABRV,XHRBUSUNT from AXESDEMO.XHRBU", resultColumnNames = {"department","value","text"}, };
5. Verify output results
Example 3: Dynamic Table
1. Set datataSourceType property “Dynamic Table”
2. Set “paging” and “searching” property checkbox to Checked.
3. Set tableFileName property “tables_dynamic.txt”
4. Set tableName property “DepartmentBusinessUnits” and make sure the following static table object instance is present the table_dynamic.txt
DefineObjectInstance { className = "DynamicTable", name = "DepartmentBusinessUnits", source = "sql", selectSQLcommand = "XHRBUABRV,XHRBUSUNT from AXESDEMO.XHRBU where XHRDEPCDE = ':SQLVariableDepartment' ", resultColumnNames = { "value", "text" }, };
5. Add the following script to “SQLVariables” property.
ENV.SQL.SQLVariableDepartment = 'ADM';
6. Verify output results
Example 4: XML Table
1. Set datataSourceType property “XML File”
XML settings example:
xml file example called jobtitles_en.xml
<?xml version="1.0" encoding="iso-8859-1"?> <jobtitles> <title>Lawyer</title> <title>Auditor</title> <title>Maintenance Officer</title> <title>Quality Manager</title> <title>Funds Manager</title> </jobtitles>
2. Set “paging” and “searching” property checkbox to Checked.
3. Set directory property “*DEFAULT”. Note that the value *DEFAULT for xmlFileLocation means either /ts/screens/ if there is a definition set specified in the URL table_dynamic.txt
4. Set fileName “jobtitles_en.txt” and make sure the following xml file is present the /ts/screens/ if there is definition set specified in the URL.
6. Verify output results
Example 5: Ajax Source
1. Create a file name arrays.txt then add a content below, then put the file in the projects folder.
{ "data" : [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ], [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ], [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ], [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ], [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ], [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ], [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ], [ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ], [ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ], [ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ], [ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ], [ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ], [ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ], [ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ], [ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ], [ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ], [ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ], [ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ], [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ] ] }
2. Set datataSourceType property “Ajax Source”
3. Set “paging” and “searching” property checkbox to Checked.
5. Add the following script to columnNames property.
ENV.returnValue = [ { title : "name" }, { title : "position" }, { title : "office" }, { title : "extn" }, { title : "start_date" }, { title : "salary" } ]
4. Add the following script to ajaxSource property.
ENV.returnValue = '/ts/screens//arrays.txt';
5. Set tableHTML property to
"NamePositionOfficeExtn.Start dateSalary".
6. Verify output results
