Contextual Extensions

Overview

A contextual extension is launched from a document selection — typically when the user selects one or more elements and right-clicks them. It has access to the selected elements, so it can act on them or generate insight about them.

Definition

To make an extension contextual, set extensionType: CONTEXTUAL_ACTION and include one or more of BOARDS, PLAN, and SHOWCASE in userApps.

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
    display:
      type: modal
      dimensions:
        width: 660px
        height: 300px
        maxWidth: 95vw
    iframeUrl: https://d2d3iqsj83sdf2.cloudfront.net
    extensionType: CONTEXTUAL_ACTION

Accessing the user's selection

Read the selected elements from getAppContext(). Each selected element may carry modelBindings linking it to the underlying data (for example, the bound item).

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];
      const itemRef = this.selectedElement.modelBindings.item;
      // your code
    }
  }
}