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

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Dynamic Component	v3.1.0	Experimental	2018-04-12

Preview Extension component

Displays dynamically-loaded extension components. If you want give a look on a real working viewer extension project you can look at aca monaco extensio

Class members

Properties

The viewer component when it recognize a new extension always pass the following two parameter as input:

Name	Type	Default value	Description
url	string		URL Of the content in the repository
node	Node		Node of the content to display

Details

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

The Module needs to know which is the Id of your extension:

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

Your viewer component extension 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
}

Your viewer component template:

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

Your viewer component extension.json:

{
  "$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"
        }
      ]
    }
  }
}

See also

• Extension service