Skip to main content
Kinetic Community

Using a Bridge Search to Populate Questions using a Mobile Friendly Table

This solution describes how to use bridging to do a people search, populating fields on the service item using a bridge request based on criteria the user provides. If there is more than one response to the search, a table is displayed for the user to select the correct individual from. This table uses a mobile friendly version of datatables called FooTables. People Search using Bridges

Usage

The example provided in this solution is a use case for allowing a user to do a search in a service item by keying in a partial or complete match into a question and clicking a button. A search is then done and, if one exact match is found, the desired fields are filled in immediately; if no matches are found, the user is notified and reminded that searches are case sensitive (assuming they are); and if there is more than one match the user is presented with the resulting options in a table. In this example, the table is a FooTable, a type of JQuery DataTable friendly to mobile devices. Two key factors are in play for this particular example: (1) a Bridge was used to acquire the data and (2) a JQuery DataTable was used to display the data.

The Example 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. 

You will need an ARS Bridge installed. To use the example, you will need to load either the CTM:People Example People Bridge Model or the KS_SAMPLE_People Example People Bridge Model, both provided on this article. If you use ITSM, you'll want to use the CTM:People Bridge Model. Otherwise, load the KS_SAMPLE_People Bridge Model. If you use the Sample People form, you may have no data in the form. A very small import has been provided to get you started.

Example

This example utilizes the FooTable plugin for JS to build the table from the Bridge response, when necessary.  

For more information about the FooTable plugin, see this site. For more information about JQuery, see this site. There is also helpful information here

This example allows the user to trigger a bridge search to populate questions. To support this there must be:

1. All the necessary code required (the javascript and css files) for FooTable data tables, jquery and font awesome.


<!--Include the JQuery Library www.http://jquery.com/ -->
<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<!--Include the JQuery UI Library  www.http://jqueryui.com -->
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!--Include the fooTable CSS http://themergency.com/footable/-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.css" rel="stylesheet" type="text/css" />
<!--Include the fooTable JS http://themergency.com/footable/-->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.js"></script>
<!-- Include Link to Font Awesome http://fortawesome.github.io/Font-Awesome/ -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

2. A question the user places their query parameter into

In this case, the example uses the field "Search Last Name"

SearchLastName.png

3. An event that triggers the search to take place that exposes the bridge to the service item. In this example, the event is on a Search button.

Search button.png

SearchPeopleEvent.png

The bridge being used here is available for download with the example. There are two available, depending on what system you have set up. If you use CTM:People, there is one that uses that; otherwise there is one that uses KS_SAMPLE_People, so you should be able to use the example with or without ITSM. 

4. Questions for the results to go in

SelectedResult.png

5. The table and the div for messages to go in

<div id="errorMessage"></div>
<table id="personTable" >
</table>

6. A function that defines/does the search  (see code comments for details)

            //Define People Search
            function searchPeople(){
                //create the connector necessary to connect to the bridge
                var connector = new KD.bridges.BridgeConnector();
                //CONFIGURE: Id of table (div) to recieve Bridge results.  The table element must exist before this code executes.
                var tableId = "personTable";
                //CONFIGURE: Define Bridge and Model/qualification to use
                connector.search('Example People', 'By Last Name', {
                    //CONFIGURE: Bridge Parameters
                    parameters: {'Last Name': KD.utils.Action.getQuestionValue('Search Last Name')},
                    //CONFIGURE: Bridge Attributes to be returned
                    attributes: ["User Id","First Name","Last Name","Email"],
                    //CONFIGURE: Function to process results after search
                    success: function(response) {
                        // Before action - Overwrite the table to clear it and reset values
                        var table = $('<table class="footable" id="'+tableId+'">').replaceAll($('#'+tableId));
                        // Populate Table
                        populateUserTable(response, table);
                        // After action - Populate answers with selected row results.
                        populateQstns(table);
                        },
                    }
                );                
            }

7. A function that processes the search result/populates the table (see code comments for details)

BridgeResults.png

//Define population of tables with Bridge results
            function populateUserTable(response, table) {                
                                
                // thead,  create the header section of the table
                    table.append('<thead>').children('thead')
                    .append('<tr/>').children('tr')
                    //Create Select Column Header and add class of "select" to it. ("select" is not a native class to the fooTable library.)
                    .append('<th data-class="select">Select</th>')
                    //Create Column Header with Expand icon and inital sort.  Column with data-class="expand" will have the expand icon.
                    .append('<th data-sort-initial="true" data-class="expand">First Name</th>')
                    .append('<th>Last Name</th>')
                    //Create Column Header with will hide on both "phone" and Tablet".  Column with data-hide="phone,tablet" will hide in both phone and Tablet.  
                    .append('<th data-hide="phone,tablet">Email</th>')
                    .append('<th data-hide="phone,tablet">Login</th>');        
                
                //tbody
                var tbody = table.append('<tbody>').children('tbody');
                
                //loop through the response from the bridge and place the results in the body of the table
                var len = response.records.length;
                //if less than one record was returned, display an error
                if (len < 1) { $('#errorMessage').html('<div style="color:blue;"><b>No matching results were found, please check the name entered. Please remember the search is case sensistive.</b></div>')}
                else {$('#errorMessage').html('');}
                //if only one result was returned, we can just use it to populate the questions, otherwise, populate the table
                if (len == 1) {
                    data = response.records[0].attributes;
                    KD.utils.Action.setQuestionValue('First Name', data["First Name"]);
                    KD.utils.Action.setQuestionValue('Last Name', data["Last Name"]);
                    KD.utils.Action.setQuestionValue('Email', data["Email"]);
                    KD.utils.Action.setQuestionValue('Login', data["User Id"]);
                    hideTable(table);
                    return;
                }
                for(i=0;i<len;i++){
                    //get the attributes for a specific record in the response
                    data = response.records[i].attributes;
                    // add row data
                    //append to the previous row
                    tbody.append('<tr />').children('tr:last')
                    //add the select checkmark to the beginning of the row (font awesome is awesome)
                    .append("<td><i class='fa fa-check fa-lg'></i></td>")
                    //add each of the data elements by name of the attribute to the correct column
                    .append("<td>"+data["First Name"]+"</td>")
                    .append("<td>"+data["Last Name"]+"</td>")
                    .append("<td>"+data["Email"]+"</td>")
                    .append("<td>"+data["User Id"]+"</td>");                
                }
                
                //apply fooTable to the table with a custom toggleSelector to overwrite the default selector on the entire row.
                table.footable({toggleSelector : ' > tbody > tr > .expand'});
                //show fooTable
                showTable(table);
                //Clear Search Field
                KD.utils.Action.setQuestionValue('Search Last Name', '');
            }

8. Functions that populates the questions and to get the data values out of the row (see code comments for details)

         //Define function to populate question upon row selection
            function populateQstns(table){
                table.find('tr .select').click(function () {
                    var row = $(arguments[0].target).closest('tr').children('td');;
                    KD.utils.Action.setQuestionValue('First Name', getRowValue(row, "First Name"));
                    KD.utils.Action.setQuestionValue('Last Name', getRowValue(row, "Last Name"));
                    KD.utils.Action.setQuestionValue('Email', getRowValue(row, "Email"));
                    KD.utils.Action.setQuestionValue('Login', getRowValue(row, "Login"));
                    hideTable(table);
                });
            }
            
            function getRowValue(row,label){            
                cellIndex = row.parents('table').find("th:contains('"+label+"')").index()
                cellValue = row[cellIndex].textContent
                return cellValue;
            }

9. Functions to show/hide the table  (see code comments for details)

            //Define how table shows. This is not strictly necessary, but it can be nice to let the table slide in or out instead of just appearing/disappearing
            function showTable(table){
                table.show('slide',{direction:'up'}, 500);
            }
            
            //Define how table hides. This is not strictly necessary, but it can be nice to let the table slide in or out instead of just appearing/disappearing
            function hideTable(table){
                table.hide('slide',{direction:'up'}, 500)
            }

and

10. Some style tweaks

<style>
/* Style to hide the fooTable during inital display. JS will later show the table*/
.footable {
    display:none;
}
/*Stlying for the Check Mark in the fooTable using Font Awesome.*/
.select > i {
    color:green;
}
</style>