Contextual Extensions

Overview

Contextual extensions are triggered based on the document context in which they are launched. The most common use case is when a user selects one or more elements of a document and right clicks on them. A contextual extension has access to the elements the user has selected, and therefore can perform actions or generate insight on those elements.

Contextual Extension Definition

To create a contextual extension, the extension definition should include one or more of BOARDS, PLAN, and SHOWCASE in the userApps list and the CONTEXTUAL_ACTION as the extensionType.

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://d2d3iqsj83sdf2.cloudfront.net
    extensionType: CONTEXTUAL_ACTION

Accessing User Selections

To access the selected element(s) in the document, use the getAppContext() function. The function returns an object that contains information about the document context in which the extension is launched.

context_aware_angular_component.ts

import { Component, OnChanges, OnInit } from '@angular/core';
import { getAppContext } from '@contrail/extensions-sdk'

@Component({
  selector: 'app-sales-history',
  templateUrl: './sales-history.component.html',
  styleUrls: ['./sales-history.component.scss']
})
export class SalesHistoryComponent implements OnChanges {
  public selectedElement;

  async ngOnInit(){
    this.init();
  }

  async ngOnChanges(){
    this.init();
  }

  async init(){
    const context = getAppContext();
    if(context.appContext.selectedElements?.length){
      this.selectedElement = context.appContext.selectedElements[0];
      console.log(this.selectedElement)
      const itemRef = this.selectedElement.modelBindings.item;
      // your code
    }
  }
}