Event Actions Overview - v22-appfactory/appfactory-wiki GitHub Wiki

Event Actions provide a way to take an action when an event occurs. The User Interface (UI) events are generally fired when the user provides some form of input. The server actions are taken when requests are made to the services back-end and allow for actions to be taken in addition to the response to the request. The sections below describe these action pairings in more detail.

The UI events are fired based on a user behavior in a UI page form and are handled by the page. The event fired is defined in a component and generally result from a click of a button or link. The component can either be a formio component of a custom component such as the DataTable.vue.

The event to fire is defined in the component Display tab. This screen capture shows a 'Clear' button definition for a custom event 'clearConditonal' to be fired when the button is clicked:

The event is mapped with a handler in the formio form using the v-on:event="handler"" attribute. The 'clearConditional' event will call the clearConditional method in the page script:

    <formio
      ref="appForm"
      class="formioForm"
      v-if="showForm"
      :form="formComponents"
      :url="serverUrl"
      :options="{noAlerts: true, icons: 'fontawesome'}"
      v-on:submit="onSubmitMethod"
      v-on:render="formRendered"
      v-on:clear="clear"
      v-on:clearConditional="clearConditional"
      v-on:clearEditable="clearEditable"
      v-on:goto="goto"
      v-on:gotoDataItem="gotoDataItem"
      v-on:removeAttachment="removeAttachment"
      v-on:edit="editHandler"
      v-on:resourceLoaded="resourceLoaded"
    />

The handler is a method in the VUE script which performs a defined action. Simple actions such as 'clear' will perform a common action such as clearing the form. Other events such as 'goto' require a formeventactions record for the form/event/action which defines the action that will be taken.

A custom component such as the DataTable.vue can fire events that are handled by the VUE page that contains the component. This is done by the custom component 'emitting' an event which is then received by the host page listening on a 'bus' and pairing the event with a handler. Using the datatable edit click as an example the steps are the following:

The DataTable.vue emits the 'edit-item' based on the click event handler defined:

            <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>

The pairing with the event handler is done in the host page using the 'bus' component. In the Application.vue this is done by the following line in the page 'created' handler:

  created: function() {
    bus.$on('edit-item', this.editHandler);
    bus.$on('delete-item', this.deleteHandler);
    bus.$on('alert-msg', this.alertHandler);
    bus.$on('resource-loaded', this.resourceLoaded);
    this.fetchingForm = true;
    this.initializePage();
  },

The Application.vue 'editHandler' method then executes the action based on a formeventactions record for the page:

    editHandler: function (item) {
      if(!item.event) {
        // find the pageid for the page that will edit the item
        const actionName = 'edit';
        const action = _.find(this.pageActions, it => it.eventname === actionName);
        this.processEditAction(item, actionName, action);
      }
    },

Details of the formeventactions table/records are provided in the UI Event/Actions page.

Server Actions provide a means to take additional action when making a request to the services backend based on the HTTP request Method and URL. These actions can be defined to be taken before (Pre), after (Post), or both. An example could be sending email notifications after an issue record is created or updated. An action is defined by creating a urlactions record for a page/form using the administration page Server Request Actions Maintenance. Key attributes are:

• pageformid - The page form for the record
• method - GET, POST, PUT, DELETE (multiple methods are supported)
• pre/post - When the action should be taken; pre or post handling of the request
• url - The HTTP request URL to match; wild cards are supported
• actiondata - The data used in performing the action. This generally defines request columns to be used by the action.
• apiactionid - The action to perform; defined in the apiactions table.

Current apiactions that can be performed:

• email - Send email to a list of recipients
• debug - Debugger action for testing
• log - Write a log record
• state - Create database record as state change history
• clearcache - Clear all cached records

Further information is provided on the Server or URL Actions page.