Extensions Overview

Overview

Extensions enables developers to extend the platform's functionality with native components exposed directly to the user. Developers can build extensions to the boards, plan, showcase, and admin console apps. The extension runtime will use the user's session to access data related to the document and project in which the extension is launched.

From the user's point of view, extensions will look and feel like a native part of the platform.

Creating an extension

Extensions are packaged as part of an app which is published to the app marketplace. To create an extension, first create an app and then add the extension definition to the app's manifest.

For an app that only hosts one extension and no actions or workflows, the manifest should look something like this:

app.yml

appIdentifier: "@your-app-identifier"
appName: "Your app name"
appDescription: "your app description"
visibility: private
publisher: "your email, or company name"
thumbnail: "https://static.thenounproject.com/png/3080128-200.png"
version: "1.0.0"

extensions:
  - identifier: hello-world
    name: Hello World
    userApps:
      - BOARDS
      - PLAN
    modalDimensions:
      width: 660px
      height: 300px
      maxWidth: 95vw
    iframeUrl: https://d2d3iqsj83032s.cloudfront.net
    extensionType: DOCUMENT_AUTOMATION

Hosting your extension

The extension will be displayed to the user through an iframe. Therefore, the extension must be hosted on a public URL and should be served over https protocol.

Example of Deploying Your Extension to Netlify

1. Create your app using a front-end library/framework (like React, Angular, etc.).
2. Build the app (usually by running a command like "npm run build").
3. Deploy the app to Netlify - Simple video explaining how to deploy react app on netlify.
4. Update the iframeUrl with the Netlify URL where your app/extension now lives. Remember: The iframeUrl is how VibeIQ displays your app/extension!

Establishing a connection between VibeIQ and your extension

When the extension is launched, VibeIQ will initiate an iframe connection to your extension. Your extension is expected to acknowledge and accept this connection by calling the AppExtension.registerAppExtension() function, which is defined in the publicly available @contrail/extensions-sdk package.

sample_angular_app.ts

import { AppExtension } from '@contrail/extensions-sdk';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  public isExtensionInitialized = false;

  public extensionType;
  constructor(private route: ActivatedRoute){}

  async ngOnInit() {
    await AppExtension.registerAppExtension();
    //your code
  }
}