Download

The dataViewer.js can be found on GitHub: https://github.com/KineticCommunity/library-dataviewer-ce

Requirements

dataViewer.js file
A JSON Schema to define the Data Viewer Configuration (in the item leveraging dataveiwer)
There may be additional requirements for Renderers that are used. Ex. the DataTables libraries from datatables.net for the table capability.

Include JavaScript and CSS

The recommended practice for including JavaScript and CSS files, such as dataViewer.js, is to add them to the header of layout.jsp or whatever file is rendering your services. Including files here will ensure the are accessible to all Kinetic Request Forms within the Bundle.

Bridged Resources

A Bridged Resource defines the search and data returned from it. One must be added to the Kinetic Request Form, if planning to use the executeSearch function for dataViewer. The Data Viewer configuration will later reference the Bridged Resource which was created.

Configuration

The searching and displaying of data is defined and configured, by the form developer, in a JSON Schema. It contains the necessary information to define the Bridge used by the search, how to render the results and the behavior. This configuration will be later be passed to Data Viewer as a parameter to execute the search.

Multiple configurations can be created and included in a Kinetic Request Form.

Data Viewer Configuration Options

Renderers

There are 2 Renderers included with Data Viewer. The Renderers are part of the Configuration and used to determine how the search results will be displayed. There is also the option to use a custom Renderers to meet any unique requirements.

DataTable Render
Unordered List Render
Custom - A custom function can be created and included in the Configuration to handle the search results.

Execution

Data Viewer provides the following functions

Function	Description
DataViewer.ucFirst(str)	Returns the provided string with the first letter uppercased
DataViewer.executeSearch(destination, configObj)	Executes the bridge search provided in the config object, the formats the search results as provided in the config object, and displays those results using the renderer in the config object in the destination specified.
DataViewer.renderFieldValues(destination, configObj)	Adds the values from the fields specified in the configuration into the table/object specified. See image below for example.
DataViewer.renderResults(destination, configObj)	formats the search results that are in the config object as provided in the config object, and displays those results using the renderer in the config object in the destination specified.

Example of setup that uses renderFieldValues:

Destination (JQuery Object, JQuery Selector, or function).

Destination defines the location of where the search results (Table or List) are to be appended on the page. The Destination may be supplied as a JQuery Object, JQuery Selector, function. If a function is provided, it must return a JQuery Object. (This is not the resultscontainerId specified in the Configuration but is where this element will be placed on the page.)

Configuration Object (JSON Object)

This is the Data Viewer Configuration Options created above in a JSON Object to define the behavior of the Data Viewer.

Examples:

//JQuery Selector
DataViewer.executeSearch('#Requested_For', searchConfig.personSearchBridgeTable);

//JQuery Object
DataViewer.executeSearch($('#Requested_For'), searchConfig.personSearchBridgeTable);

DataViewer.renderFieldValues($(K('section[Results Section]').element()), searchConfig.personSearchBridgeTable);

//Function
DataViewer.executeSearch(function(){ return $(K('section[Requested For]').element());}, searchConfig.personSearchBridgeTable);

Styling

Custom styling may be applied to the results through the use of CSS. See Renderers for more information.