To extend the viewer, create the new viewer component, register the custom viewer, and declare the new viewer in the descriptor.
-
Generate a new component to create a new viewer component:
npx nx generate @nx/angular:component --name=custom-viewer --directory=./extensions/my-customization/viewer/custom-viewer --standalone=true --nameAndDirectoryFormat=as-provided --no-interactive --dry-run
-
Register the custom viewer:
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ExtensionService, provideExtensionConfig } from '@alfresco/adf-extensions'; import { CustomViewerComponent } from './viewer/custom-viewer/customViewer.component'; @NgModule({ imports: [CommonModule, CustomViewerComponent], providers: [provideExtensionConfig(['myorg.my-customization.json'])] }) export class MyCustomizationModule { constructor(extension : ExtensionService) { extension.setComponents({'my-org.components.custom-viewer': CustomViewerComponent, }) } } -
Declare the new viewer in the descriptor:
"viewer" : { "extensions" : [ { "fileExtension": "pdf", "component": "my-org.components.custom-viewer" } ] }