Query results are displayed in a datatable. A row is displayed for each record. Edit and delete actions may or may not be availble for the records. If available action icons are displayed on the row and allow the user to either edit or delete the record.

Datatables are displayed in both Administration and Formio screens. The datatable properties are used for defining some of the configuration and event handling.

  props: {
    formTitle: String,
    headers: Array,
    items: Array,
    deleteItem: Function,
    promptColumn: String,
    actions: {
      type: Object,
      default: () => ({ edit: true, delete: true })
    },

• The actions property determines whether the edit and delete action icons are shown for each row.
• The deleteItem property provides the Function to call in the host page for delete event handling after the user confirms the delete in a modal dialog.
• Edit actions are handled differently. When a user clicks the edit icon for a row a 'edit-item' event is fired to be handled by the host page. How this processing is provided varies between native Vue components and Formio components.

The DataTable component fires/emits the event when the edit icon is clicked:

    <td v-if="showActions()">
      <v-icon v-if="actions.edit" small class="mr-2" @click="$emit('edit-item', item)">edit</v-icon>
      <v-icon v-if="actions.delete" small @click="handleDelete(item)">delete</v-icon>
    </td>

Native Vue host components such as the Administration screens contain the DataTable.vue component directly and set the edit handler when configuring the datatable component. The editItem method is defined in the page.

    <maintdatatable
      ref="dataTable"
      formTitle="Application Pages"
      v-bind="{headers, items, deleteItem, submitItem, promptColumn}"
      v-on:edit-item="editItem"
    ></maintdatatable>

The Formio datatable component uses a wrapper component FormDataTable.vue which re-fire both the edit and delete events to the host page.

    editItem(item) {
      this.editedIndex = this.items.indexOf(item);
      this.editedItem = Object.assign({}, item);
      bus.$emit('edit-item', item);
    },

    deleteItem(item) {
      // eslint-disable-next-line no-alert, no-restricted-globals
      const ret = confirm('Are you sure you want to delete this item?');
      if (ret) {
        bus.$emit('delete-item', item);
      }
    }

The host page such as the Application.vue then contain handlers for the edit and delete events. The delete action is handled by the containing page. In the case of the edit event handler this is done by navigating to a new page for editing the record. The navigation action is defined in a formeventactions record. The edit/navigate event/action records provide JSON to define the router path that should be navigated to when the 'edit-item' event is fired.

{"path": "/apps/10/95"}

As described above, configuring whether the DataTable component shows the action icons in the results rows is done by setting the actions property for the datatable component. This is handled differently based on the host page.

Administration screens always show the edit/delete actions in the datatable results and simply use the DataTable.vue default property which sets the flags to true:

    actions: {
      type: Object,
      default: () => ({ edit: true, delete: true })
    },

Configuring the display of the edit/delete action icons for datatables in a Formio form is done in the FormBuilder. The configuration is done in the edit dialog on the 'Display' tab. Unchecking the 'Hide Edit Action' and/or 'Hide Delete Action' checkboxes will display the icons. By default the icons are hidden.
As described above the hosting page then provides the edit and delete handlers. The delete handler removes the selected record. The edit handler first saves the record data to the application store and then uses a formeventactions record for the page to handle navigation to the page where the record will be edited.

Configuration of Ad Hoc report results is done in the Report Builder. For a saved query owned by the current user, once loaded, a 'Result Actions Maintenance' icon is displayed in the upper right corner of the page.

Clicking the icon will display the dialog. By default the dialog shows two checkboxes for showing edit and delete icons. If the 'Show edit action' checkbox is checked a form is shown for adding formeventactions records. This allows the addition of a edit/navigate event/action so that when the user clicks the edit icon the user will be taken to a different page to edit the record.

Clicking the 'Submit' button updates the formeventactions record for the query.
Clicking the 'Done' button dismisses the dialog and updates the adhoc_queries record if there are changes to the edit or delete checkboxes.