Preview Extension component

Supports dynamically-loaded viewer preview extensions.

See the ACA monaco extension for an example of a real working viewer extension project.

Class members

Properties

Details

To create your custom extension viewer you need to create the following files in a separate project:

The Module needs to declare the ID of your extension:

export class YourExtensionViewerModule {
  constructor(extensions: ExtensionService) {
    extensions.setComponents({
      'your-extension.main.component': YourExtensionViewerComponent
    });
  }
}

Your viewer component extension contains the business logic:

import { Node } from '@alfresco/js-api';
import { ViewerExtensionInterface } from '@alfresco/adf-extensions';

@Component({
  selector: 'your-extension-viewer',
  templateUrl: './your-extension-view.component.html',
  styleUrls: ['./your-extension-view.component.css'],
  encapsulation: ViewEncapsulation.None
})
class YourExtensionViewerComponent implements ViewerExtensionInterface {

  showToolbar = true;

  @Input()
  url: string;

  @Input()
  node: Node;
  
  
  ....YOUR CUSTOM LOGIC
}

The viewer component also needs an HTML template (which is referenced by the templateUrl property in the @Component decorator of the component class above):

<div> This is your custom extension viewer template</div>

You also need to provide a viewer componentextension.json file containing its details:

{
  "$version": "1.0.0",
  "$name": "my viewer extension",
  "$description": "my viewer  plugin",
  "features": {
    "viewer": {
      "content": [
        {
          "id": "dev.tools.viewer.viewer",
          "fileExtension": ["png", "jpg"],
          "component": "your-extension.main.component"
        }
      ]
    }
  }
}

You can also use * wildcard to register a single component that opens all files:

{
  "$version": "1.0.0",
  "$name": "my viewer extension",
  "$description": "my viewer  plugin",
  "features": {
    "viewer": {
      "content": [
        {
          "id": "dev.tools.viewer.viewer",
          "fileExtension": "*",
          "component": "your-extension.main.component"
        }
      ]
    }
  }
}

It is recommended to use wildcard replacement only when introducing your own Viewer implementation.

See the App extensions page for further details of how to develop extensions.

See also

• Extension service
• App extensions