Activity extension points allow plugins to add additional items to the activity panel (opened via the gears menu bar icon.) These rows can show the progress of a long-running process or a front-end task using start/stop events.


This tutorial will create an example long-running process, and an activity item that shows its progress, along with a custom finished component. For details on creating the back-end long-running process, see the tutorial code link above.

Create a web plugin

The web plugin registers the resources needed, and creates a route to start the process.

app.registerJavaScript("/org/visallo/examples/activity/plugin.js", true);


app.registerResourceBundle("/org/visallo/examples/activity/");"/org/visallo/examples/activity/start", authenticator, csrfProtector, ReadPrivilegeFilter.class, StartExample.class);

The POST route to start the activity includes some filters before the StartExample handler. These are run in order and protect the route based on request and session conditions:

  • authenticator: Will only allow authenticated users
  • csrfProtector: Prevent cross-site request forgery attacks. Should be placed on all requests
  • ReadPrivilegeFilter: Will only allow users that have this privilege. Other filters available in Visallo

Register Extension

Register the activity extension in the plugin.js file. The type provided should match the type of the custom QueueItem.

require(['public/v1/api'], function(visallo) {

    visallo.registry.registerExtension('org.visallo.activity', {
        type: 'org-visallo-examples-activity',
        kind: 'longRunningProcess',
        titleRenderer: function(el, process) {
            el.textContent = "Example Activity";
        finishedComponentPath: 'org/visallo/examples/activity/Finished'


Add a message bundle key for the type of activity

Finished Interface

Define the component to render when the process is complete, this just calls alert with the process json. The button will look at home with the dismiss button if it has btn btn-mini class names.

define(['react'], function(React) {
    const Finished = React.createClass({
        onClick() {
            alert(JSON.stringify(this.props.process, null, 2));
        render() {
            return <button onClick={this.onClick} className="btn btn-mini">Test</button>
    return Finished;

results matching ""

    No results matching ""