Populating a Mobile-Friendly Table Using a Simple Data Request

Last updated
Save as PDF

The service item described in this article illustrates (also attached) a simple usage of Simple Data Request to build up a table in Kinetic Request. Once loaded, the sample service item uses the Simple Data Request framework to retrieve a list of User records and display a table of Create Date, Modified Date, Email, Login Name, and Full Name field values. When you change the width of the screen small enough to be "tablet" sized, the Email and Create Date columns are collapsed, and when you change the width of the screen to be small enough to be a "phone" the Last Modified column is also collapsed. Collapsed columns can be seen by clicking on the big plus sign that appears in the Full Name column.

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>

2. Build a helper function to process the Simple Data Request XHR result.

The following code is in the "Javascript Code" element of the service item and is responsible for processing the Simple Data Request XHR result. The service item "User Table" element includes the container element referenced by this code.

<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>

3. Define the Simple Data Request.

The "Initial Page" element for this service item specifies the "Retrieve Users" custom on-load event which initiates the Simple Data Request. To create your own table, create a new load event with a Custom action.

The Retrieve Users custom event utilizes a Custom action in order to call the populateUserTable function that was defined above. The custom javascript code looks like this:

/* 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);

The Simple Data Request queries the User form using the qualification "1==1", retrieving "6;Modified Date, 101;Login Name, 8;Full Name, 3;Create Date, 103;EmailAddress", for a maximum of 5 entries decending by Modified Date.