Skip to content

Latest commit

 

History

History
128 lines (100 loc) · 3.29 KB

preview-extension.component.md

File metadata and controls

128 lines (100 loc) · 3.29 KB
Raw
Title Added Status Last reviewed
Preview Extension Component
v3.1.0
Experimental
2019-03-15

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

Name Type Default value Description
extension string File extension (.jpg, .png, etc) for the viewer.
id string ID string of the component to preview.
node Node Node containing the content to display.
url string URL 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
})
export 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