Populating a Mobile-Friendly Table Using a Simple Data Request
Usage
The Description section below explains the service item implementation. To try the service item that is being described, download the attached service item (in .zip format) and use the Kinetic Request Admin Console to import the service item into your environment. The Service Item does not include category/catalog information, so it will need to be copied or moved to an existing catalog to be accessed.
Description
This example utilizes the FooTable plugin for JS to automatically build the table from the Simple Data Request response.
For more information about the FooTable plugin, see this site. For more information about JQuery, see this site. There is also helpful information here.
Sample Expanded Table
Sample "Tablet" Table (with the first row expanded)
Sample "Phone" Table (with the first row expanded)
This example displays a table of User records obtained dynamically during the load of the page. There are three steps necessary to configure a Kinetic Request service item to display Simple Data Request results in a FooTable:
- Require the javascript and css files necessary for FooTable.
- Build a helper function to process the Simple Data Request XHR result.
- Define the Simple Data Request.
1. Require the javascript and css files necessary for FooTable data tables.
The following code was inserted into the customer header content for this service item to load the javascript and css files necessary for FooTable datatables. Note that these are using demo versions of these items. To actually implement these tables in your system, you should have a local copy of JQuery, FooTables JS, and FooTables CSS.
<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" /> <!--Include the JQuery Library www.http://jquery.com/ --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <!--Include the fooTable CSS http://themergency.com/footable/--> <link href="http://themergency.com/footable-demo/css/footable-0.1.css" rel="stylesheet" type="text/css" /> <link href="http://themergency.com/footable-demo/css/footable.sortable-0.1.css" rel="stylesheet" type="text/css" /> <!--Include the fooTable JS http://themergency.com/footable/--> <script src="http://themergency.com/footable-demo/js/footable-0.1.js" type="text/javascript"></script> <script src="http://themergency.com/footable-demo/js/footable.sortable.js" type="text/javascript"></script> <script src="http://themergency.com/footable-demo/js/footable.filter.js" type="text/javascript"></script>
<script type="text/javascript"> function populateUserTable(response) { //get the records from the simple data request reponse var records=KD.utils.Action.getMultipleRequestRecords(response); var len = records.length; // create table var $table = $('table'); // Create the header of the table (define the columns and their properties) // the data-class of expand on the Full Name column means that is where the big + will appear to expand when in the smaller views // the data-hide of "phone,tablet" means the column is hidden for both phone and tablet widths. The default widths/breakpoints are /* breakpoints: { phone: 480, tablet: 1024 } */ // the data-hide of "phone" means the column is shown for expanded and tablet widths but hidden for phone widths $table.append('<thead>').children('thead') .append('<tr />').children('tr').append('<th data-sort-initial="true" data-class="expand">Full Name</th><th>Login ID</th><th data-hide="phone,tablet">Email</th><th data-hide="phone,tablet">Create Date</th><th data-hide="phone">Last Modified</th>'); //append the table body to the existing header var $tbody = $table.append('<tbody>').children('tbody'); //Loop through the returned results and add the rows to the table body for(i=0;i<len;i++){ // add row $tbody.append('<tr />').children('tr:last') .append("<td>"+KD.utils.Action.getRequestValue(records[i], "Full Name")+"</td>") .append("<td>"+KD.utils.Action.getRequestValue(records[i], "Login Name")+"</td>") .append("<td>"+KD.utils.Action.getRequestValue(records[i], "Email Address")+"</td>") .append("<td>"+KD.utils.Action.getRequestValue(records[i], "Create Date")+"</td>") .append("<td>"+KD.utils.Action.getRequestValue(records[i], "Modified Date")+"</td>"); } //Make this JQuery table that has been built a footable $('table').footable(); } </script>

/* Define a callback that will call the custom populateUserTable function on success, or alert on failure. */ var connection=new KD.utils.Callback(populateUserTable,alert); /* Make an Asynchronous SDR request. */ KD.utils.Action.makeAsyncRequest('Get Users', clientAction.actionId, connection, '', '', true);

