Plugin communication

In order to communicate between the panel and the plugin, the Plugin UI API and the SDK provide some utility methods.

Sending and receiving messages

To communicate from the panel to the plugin, we use the sendMessage method.

/ui/index.ts

import { sendMessage } from "@qatium/sdk/ui";

sendMessage("my-message");

Then, in the Plugin we listen for the onMessage event.

TypeScript

import type { SDK } from '@qatium/sdk'
import type { Plugin } from '@qatium/sdk/plugin'

class MyPlugin implements Plugin {
  onMessage(message: string) {
    console.log(message) // output: my-message
  }
}

Python

from qatiumsdk import Plugin

class MyPlugin(Plugin):
  def onMessage(self, message):
    print(message)

To communicate from the plugin to the panel, the procedure is very similar. We use the sendMessage method from the SDK.

TypeScript

import type { SDK } from '@qatium/sdk'
import type { Plugin } from '@qatium/sdk/plugin'

class MyPlugin implements Plugin {
  run() {
    sdk.ui.sendMessage("plugin developer");
  }
}

Python

from qatiumsdk import Plugin, sdk

class MyPlugin(Plugin):
  def run(self):
    sdk.ui.send_message("plugin developer")

And then in the plugin panel we listen for the event, using the onMessage method:

/ui/index.ts

import { onMessage } from "@qatium/sdk/ui";

onMessage<string>((message) => {
  const element = document.getElementById("response");

  if (!element) {
    return;
  }

  element.innerHTML = `Hi ${message}!`;
});