Populating a 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 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
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" />
<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>

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

