Skip to main content
Kinetic Community

Leidos DataViewer Training

Export / Import Form

Look at Events and DataViewer configuration

  • The DataViewer configuration is found in the "Load" event of the Page in our form.
  • The variable searchConfig.lookupAddressTable is the configuration for this search.
  • At the very bottom, the code DataViewer.renderResults create an empty table which uses the configuration.

Look at the event on the Search Button element

  • The Search Button executes the DataViewer.executeSearch function to perform a Bridge request and build the table using DataTables.

View your new form

  • In the Form Builder select the "Preview" from the "Actions" menu in the upper right.
  • Test form by searching for an address.  A state abbreviation works well.
  • Notice that:
    • When a row is selected notice that the JSON is populated.  This is performed in the clickCallback of the configuration.
    • The row is highlighted.  This is from the "Select" extension from DataTables. 

Show a spinner when while search is performed

  • The DataViewer configuration is found in the "Load" event of the Page in our form.
  • In the "before" callback uncomment the following code.  The before callback executes before the search is performed or the table is created.
    • $('.message').show();
  • In the "complete" callback uncomment the following code.  The complete callback executes after the table is built. 
    • $('.message').hide();
  • Save and view changes. 

Display a City and State in the Table

  • In the DataViewer Configuration uncomment the configuration for the City and State columns in the data property.
  • Notice the setField property on State.  It sets the Kinetic Request Form Field, State, when the row is clicked.
  • {
      title: 'City',
      name: 'City'
    },
    {
      title: 'State',
      name: 'State Name',
      setField: 'State'
    ​​},
  • Save and view changes. 

Add button to each row

  • In the DataViewer Configuration uncomment the configuration for the Action columns in the data property.
  • {
      title: 'Action',
      name: null,
      //className: 'control',
      render: function(data, type, row) {
        //What ever is retruned by the render function is displayed in the table.  In this case it is a button.
        var buttons =
          "<div><button class='address-action-button-view btn btn-purple btn-xs'>View</button>";
        return buttons;
      }
    }
    
  • The render function creates the button.  Whatever is returned by this function will be the content of the cell
  • Save and view changes. 

Add an event to the button which displays an alert message

  • In the DataViewer Configuration uncomment the click event at the bottom
  • // Bind an event to the view button on the table
    $('form').on('click', '.address-action-button-view', function(){
      var rowData = $(this).closest('table').DataTable().row($(this).closest('tr')).data(),
        locationName = rowData['Site Location Name'];
      alert(locationName);
    } )
  • The click event is bound to the form but triggers on its descendent included in the 2nd parameter .address-action-button-view.

  • What is this code doing?

  • Save and view changes. 

Add a new column with a checkbox to select the row

  • In the DataViewer Configuration uncomment the configuration for the first item in the data property.
  • {
      name: null,
      orderable: false,
      className: 'select-checkbox',
      defaultContent: '',
    },
  • This adds a new column to the table.  Since it has a defaultContent value, the contents of it do not come from the bridge search results.  The class name triggers the Select Extension for DataTables to build a checkbox in the cell.
  • Uncomment selector configuration in the select property.  This configures only first td element of a row to be selectable
  • select: {
      style: 'single',
      selector: 'td:first-child'
    },
    
  • Save and view changes. 

Prevent clickCallback when View Button is pressed

  • The view button works but it selects the row and populates values into the field.
  • In this case we want only a check of the first column to select the row and take action.
  • In the DataViewer Configuration comment the setting of Selected Address JSON in the clickCallback.
  • //K('field[Selected Address JSON]').value(JSON.stringify(results));
  •  Uncomment the code below in the configuration in the complete property.  This code will execute the after the table is built and will bind events to the table.
  • configObj.tableObj
      .on('select', function(e, dt, type, indexes) {
        var data = dt.row(indexes).data();
        K('field[Selected Address JSON]').value(JSON.stringify(data));
      })
      .on('deselect', function(e, dt, type, indexes) {
        K('field[Selected Address JSON]').value('');
      });
  • Save and view changes.  

Using DataTable Functionality

  • Standard DataTables methods can be used with tables built by DataViewer
  • Unhide the Advanced Buttons Section in the form Builder to see buttons using standard DataTable methods.
  • Investigate the code in each buttons events.