App Communication Service

One of the important features provided by Canvas is app Communication Service. The Communication Manager in Canvas enables you to access a component in an App or a service (event) from other apps through the events or listeners.

Consider the following apps added for the beneficiary module in payments. When a beneficiary record in the Beneficiary Details app on the left is clicked, those beneficiary details are displayed on the Beneficiary Details Form on the right.

Step 1:

The following is the sample code for triggering the broadcast event. In our example, this code must be written in the listener JS file for the Beneficiary Details app:

CWEH.registerHandler('WGT_BENE', CWEC.ROW_CLICK, function(config, data) 
{
  canvas.MessageBus.publish("BENEFICIARY_SELECTED", data);
});

/* Here, 
1. WGT_BENE is the widget ID for Beneficiary Details app.
2. CWEC.ROW_CLICK is the API for capturing row click event in the Beneficiary Details app.
3. canvas.MessageBus.publish is the function to trigger the broadcast event.
4. BENEFICIARY_SELECTED is the event ID for broadcast event.
*/

Step 2:

The following is the sample code for subscribing to an app’s event. In our example, this code must be written in the listener JS file for the Beneficiary Details Form app:

canvas.ns("canvas.form.listeners");

canvas.form.listeners.formComponents = Class(canvas.Observable, 
{
  constructor: function(config) 
  {
    this.fm = config.fm;
  },
  
  registerHandlers: function() 
  {

    this.fm.registerHandler(CFEC.POST_FORM_RENDERER, function(fm, event, fieldName,value) 
    {

      canvas.MessageBus.subscribe('BENEFICIARY_SELECTED', "NAMESPACE", '', function(data, eventName) 

      /* canvas.MessageBus.subscribe is the function to subscribe for broadcast events of other apps.
	  *  Here, the Beneficiary Details Form app is subscribing to the ‘BENEFICIARY_SELECTED’ 
      *  broadcast event from Beneficiary Details app. The data received from broadcast event 
      *  is populated to the fields on the Beneficiary Details Form app. */

      {      
         /* The data received from broadcast event is populated to the fields on 
		 *  the Beneficiary Details Form app. */
         fm.model.setValue(['BENE_NAME'],data.BENE_NAME);
         fm.model.setValue(['BENE_ACC_NO'],data.BENE_ACC_NO);
         fm.model.setValue(['BANK_NAME'],data.BANK_NAME);
         fm.model.setValue(['BRANCH_NAME'],data.BRANCH_NAME);
         fm.model.setValue(['PAYMENT_TYPE'],data.PAYMENT_TYPE);

      });

    });

  }

});

CFLR.registerListener("BENE_DETAILS_FORM_APP", canvas.form.listeners.formComponents);