Adding functionality

The <name>.plugin.js file contains all of the logic and code for the plugin. It is called upon both by the plugin state and also by user interaction.

Basic <name>.plugin.js file layout

An example plugin.js file without any functionality is shown below.

(function () {
  function load(participants$, conferenceDetails$) {}

  function unload() {}

  PEX.pluginAPI.registerPlugin({
    id: 'participant-issue-notifier-plugin-1.0',
    load: load,
    unload: unload,
  });
})();

This basic plugin.js code contains multiple parts which will be explored below.

load

This method is used by the webapp2 application when the plugin is first instantiated. This method will be called with two observables.

participants$

This observable is used to receive updates about participants within the plugin. An example of subscribing to this observable is below.

function load(participants$, conferenceDetails$) {
  const participantsSubscription = PEX.actions$.subscribe({
    next(participant) {
      console.log('Participant Subscription:', participant);
    },
    error(err) {
      console.error('Pariticpant Subscription Error: ', err);
    },
  });
}

conferenceDetails$

This observable is used to receive updates about the conference within the plugin. An example of subscribing to this observable is below.

function load(participants$, conferenceDetails$) {
  const conferenceDetailsSubscription = PEX.actions$.subscribe({
    next(conference) {
      console.log('Conference Subscription:', conference);
    },
    error(err) {
      console.error('Conference Subscription Error: ', err);
    },
  });
}

unload

This method is used by the webapp2 application when the plugin is unloaded. It should be used to clean up the plugin, for example, used to stop any intervals or timers that may be running.

Registering the Plugin

At the bottom of the above example, there is a block of code that is used to register the plugin and map the methods inside of the plugin to be accessed by the webapp2 application. an example code block looks like below.

PEX.pluginAPI.registerPlugin({
  id: 'participant-issue-notifier-plugin-1.0',
  load: load,
  unload: unload,
});

A breakdown of the method parameters is listed below.

• id - this is the id of the plugin from the plugin.package.json file. This must match that file.

• load - this is a mapping of the load method to expose it for the webapp2 application

• unload - this is a mapping of the unload method to expose it for the webapp2 application

Adding a Method for User Interaction

In the plugin.package.js file, there is an option to call a method on a button push. An example of this is below, in this example,m there is an action that is calling the "changeConferenceLayout" method on push.

"menuItems": {
  "toolbar": [
    {
      "icon": "assets/images/grid.svg#grid",
      "label": "Change conference layout",
      "action": "changeConferenceLayout"
    }
  ]
}

The above example from the plugin.package.json file would be paired with the following code in the plugin.js file.

(function () {
  function load(participants$, conferenceDetails$) {}

  function unload() {}

  function changeConferenceLayout() {
    console.log('changeConferenceLayout was pushed');
  }

  PEX.pluginAPI.registerPlugin({
    id: 'participant-issue-notifier-plugin-1.0',
    load: load,
    unload: unload,
    changeConferenceLayout: changeConferenceLayout,
  });
})();

In the above example, there are two parts to make this button push work. First there is a method, with the same name as the action parameter in the plugin.package.json file. In this example it is showing a message in the console that says "changeConferenceLayout was pushed".

function changeConferenceLayout() {
  console.log('changeConferenceLayout was pushed');
}

Secondly, there is a mapping within the registerPlugin call that maps the method for access by webapp2 application. In the below example, notice the line that says changeConferenceLayout: changeConferenceLayout. This is the mapping.

PEX.pluginAPI.registerPlugin({
  id: 'participant-issue-notifier-plugin-1.0',
  load: load,
  unload: unload,
  changeConferenceLayout: changeConferenceLayout,
});