Populating a 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 Modified Date, Login Name, and Full Name field values.

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 YUI javascript library to automatically build the table from the Simple Data Request response.

For more information about the YUI javascript library, see the Yahoo Developer Network: http://developer.yahoo.com/yui/

Sample Table

YUI Table.png

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 YUI table:

Require the javascript and css files necessary for YUI data tables.
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 YUI 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 YUI datatables.

<script type="text/javascript" src="/kinetic/resources/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/kinetic/resources/js/yui/build/element/element-min.js"></script>
<script type="text/javascript" src="/kinetic/resources/js/yui/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="/kinetic/resources/js/yui/build/datatable/datatable-min.js"></script>

<link rel="stylesheet" type="text/css" href="/kinetic/resources/js/yui/build/datatable/assets/skins/sam/datatable.css" />

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>
function populateUserTable(response) {
  // CONFIGURE: The following variable defines which element the YUI data table
  //   will be inserted into and will need to be set to an element that exists
  //   in the service item.
  var containerElement = "userTable";
  
  // CONFIGURE: The following variable defines what columns will be displayed in
  //   the table and will need to be configured for the specific Simple Data 
  //   Response.
  var columnDefinitions = [
    {key:"date", label:"Modified Date"},
    {key:"login", label:"Login Name"},
    {key:"name", label:"Full Name"}
  ];
  
  // CONFIGURE: The following variable defines how the Simple Data Request XML
  //   result will be parsed by the data table and will need to be configured
  //   for the specific Simple Data Response.
  var schemaDefinitions = [
    {key:"date", locator:"field[@id='Modified Date']"},
    {key:"login", locator:"field[@id='Login Name']"},
    {key:"name", locator:"field[@id='Full Name']"}
  ]

  // Initialize a dataSource to process the results
  var dataSource = new YAHOO.util.DataSource(response.responseXML);
  dataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
  dataSource.useXPath = true;
  dataSource.responseSchema = {resultNode: "record", fields: schemaDefinitions}
  
  // Ensure that the body element has the yui-skin-sam class so that the YUI
  // css classes for data tables are applied properly.
  YAHOO.util.Dom.addClass(document.body, 'yui-skin-sam');
  
  // Build the data table widget
  var dataTable = new YAHOO.widget.DataTable(containerElement, columnDefinitions, dataSource); 
}
</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", for a maximum of 5 entries decending by Modified Date.