Skip to main content
Kinetic Community

Data Viewer JS Library (CE)

Features

  • Execute a search using Kinetic Bridges
  • Display search results in a consistent format (DataTable and Unordered Lists included.)
  • Easy to implement
  • Consistent, reusable configuration driven.
  • Commonly used behaviors and functionality included in core functionality
  • The ability for the developer to insert custom behavior, through callbacks, at several points in the data search, display and selection.
  • Field values can be set upon user selection of results

Requirements

  • dataViewer.js file 
  • A JSON Schema to define the Data Viewer Configuration
  • There may be additional requirements for Renderers that are used.

Include JavaScript and CSS

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

Download

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

Bridged Resources 

A Bridged Resource defines the search and data returned from it.  One must be added to the Kinetic Request Form. The Data Viewer configuration will later reference the Bridged Resource which was created.

Create and Maintain Bridged Resources

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.

Execution

Data Viewer is executed with the function DataViewer.executeSearch() and passing in 2 parameters:

  1. 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.)
  2. Configuration Object (JSON Object)

Examples:

//JQuery Selector
DataViewer.executeSearch('#Requested_For', searchConfig.personSearchBridgeTable);
//JQuery Object
DataViewer.executeSearch($('#Requested_For'), searchConfig.personSearchBridgeTable);
OR 
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.

Advanced (How-To)

 

Other Important things to Note