How to Add a Button to Tables or Lists (DataViewer)

Anne Ramey
Form Developers
Understanding of the basic use of DataViewer

Buttons can be added to a Table or List in the configuration options of Data Viewer.

The "render" object can be used to add a button to a cell. The value of the render object must be a function which returns HTML representing the button.

Three parameters are available to the function. The first parameter (data) contains the individual Bridge Attribute value from each record returned. The third parameter (record) contains all values from the record as an object. Both parameters can be used to help create the button.

Example

The example below shows an example "data" object for configuration options in Data Viewer. The button is created with an email address as the text of the button.

NOTE: The class of "control" is used to prevent triggering the row selection. Without this class, clicking the checkbox will trigger the row selection.

data: [
    { 
        name: "First Name",
        title:"FIRST",
        class: "",
        setField:"First Name",
    },
    { 
        name: "Last Name",
        title:"Last",
        class: "",
        setField:"Last Name",
    },
    { 
      title:"Button",
      name: "Email",
      class: "control",
      render: function ( data, type, record ) {
          return "<button>("+record['First Name'] + " " + record['Last Name'] + ") "+ data+ "</button>";
      },
    },
],