UI service

Ui service are components that run on client side and allow to extend the features of the UI of the platform.

The most common use case is to allow to interact with external apps on client side. For example a UI service could be create to interact with twilio then could show an incoming call and allowing users to answer it

When an action is defined for an entity, it is accessible from the UI, REST API and Javascript API.

Action settings

Label

This is the human-readable name of the ui service. This label will be used in the UI.

Name

This is the internal name of the ui service and it will be used when you send messages to the ui service from the backend using the Javascript API.

The name cannot contain special characters or spaces. Only letters and numbers

By groups

This filter the access to the ui service by app groups

Places

This indicates where the ui service should be loaded in the client side. Possible values:

• APP
• LOGIN

Dependencies

This is useful to load dependencies to external sources or a file within the ui service files. This dependencies could be placed at the top of the html or at the bottom and can be a JAVASCRIPT or a CSS source

Functions

Here the exported functions should be indicated. They have a label, name and weather they have callbacks or not.

Events

Here the events that can be triggered by the ui service should be listed.

Main file

This file will be the code injected in the client side. The exposed methods should be added to a service object and should have been listed in the ui service configuration.

Ui service helpers

These are utilities to easily commuincate with the backend of your app from script in the ui service.

sendEvent(eventName, eventData)

Triggers a ui service event in the app.

Parameters

Samples

// Trigger a ui service event

service.sendEvent('test', {msg:"this is a test event});

callback(message, eventName, eventData)

Triggers the callback of function of the ui service in the backend.

Parameters

Samples

// Trigger a ui service event in the backend

service.callback(originalMessage, 'fail', {msg: ' callback data'});

uiCallbacks(message, eventName, eventData)

Triggers the callback of function of the ui service in the client side.

Parameters

Samples

// Trigger a ui service event callback client side

service.uiCallback(originalMessage, 'fail', {msg: ' callback data'});

Sending message to ui service

It is possible to send messages to UI service from a backend script using the Javascript API For example, to call the ui service sample for event event1 you would do something like this:

sys.ui.sendMessage({
    scope: 'uiService:sample',
    name: 'event1',
    companyId: record.id(),
    callbacks: {
      callback1: function(originalMessage, callbackData) {
        sys.logs.debug("Here is the original message for callback 1");
        sys.logs.debug(JSON.stringify(originalMessage));
        sys.logs.debug("Here is the callback data for callback 1");
        sys.logs.debug(JSON.stringify(callbackData));
      },
      callback2: function(originalMessage, callbackData) {
        //do something
      }
    }
});

Events

Ui services can send events to the backend. This events can be caught on listeners using the type UI Service and selecting the corresponding event.

Take a look at UI service listeners documentation for more information.

Parameters

Samples

// after action is executed redirect to read only view of given record

var record = sys.data.findOne(query);
sys.ui.sendMessage({
    scope: 'global',
    name: 'navigate',
    view: '590ce2e38a2....',
    recordId: record.id()
  });