Supports dynamically-loaded viewer preview extensions.

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

Class members

Properties

NameTypeDefault valueDescription
extensionstringFile extension (.jpg, .png, etc) for the viewer.
idstringID string of the component to preview.
urlstringURL of the content in the repository.

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

© 2023 Alfresco Software, Inc. All Rights Reserved.