How to Combine Values (DataViewer)

Anne Ramey
Form Developers
Understanding of the basic use of DataViewer

There are times when there is a need to combine two values returned from a Bridge Request and display them as one using DataViewer. An example of this is to combine first name and last name into one value for full name. There are a couple of ways to accomplish this. The best method to use will be dependent upon the details of the requirements.

Combine Values in Bridging

One way to combine the values is in the Bridging. In Bridge configuration, a Model Attribute for "Full Name" needs to be created. Then in Bridge Mappings "Full Name" need to be populated with both the first and last name.


After the configuration, an Attribute of "Full Name" will be returned from the bridge and will include the first and last name combined into one value. Using this method Full Name can be both displayed in the results and set into a field when the "setField" attribute is configured and the user selects a result.

Combine Values in the clickCallback

The clickCallback is part of the configuration options and can be used for custom actions when the user selects a search result. Here code and be inserted to populate a field with the combined value.

clickCallback: function(element, results){
    // Set the "Full Name" field to the value of first name combined with last name.          
    K('field[FullName]').value(results["First Name"]+ ' ' + results["Last Name"]);

Using this option, the first name and last name will be displayed in the results as separate values but when a result is selected it will populate a field with the combined value.

Combine Values in the Render Property

The "render" property is part of the configuration options and is used to modify the value be for returning it for display. A function is supplied to the render property and the value returned by the function will be displayed. Values can be combined for display purposes in the render property.

Three parameters are available to function.

Using this option will not use the "setField" property to set a field with the value when a user selects a result. One advantage here can be using js logic in the render function to dynamically determine the value to be displayed.

data: [
      name: "Email",
      class: "control",
      setField: "Email",
      render: function ( data, type, record ) {
          return record['First Name'] + " " + record['Last Name'] + "(" + data + ")";