alfresco-ng2-components/docs/extensions/components/preview-extension.component.md

Title, Added, Status, Last reviewed

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

• Extension service
• App extensions