Extend the viewer - Extend the viewer - Alfresco - Alfresco Digital Workspace - Alfresco/Alfresco-Digital-Workspace/6.0/Alfresco-Digital-Workspace/Develop/Build-extensions/Extend-the-viewer - 6.0 - 6.0

Alfresco Digital Workspace

Platform
Alfresco
Product
Alfresco Digital Workspace
Release
6.0
License
ft:lastPublication
2025-10-15T22:17:23.874000
ft:locale
en-US

To extend the viewer, create the new viewer component, register the custom viewer, and declare the new viewer in the descriptor.

  1. 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  
  2. 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,
       })    
     }
    }
  3. Declare the new viewer in the descriptor:
           "viewer" : {
                "extensions" : [
                    {
                        "fileExtension": "pdf",
                        "component": "my-org.components.custom-viewer"
                    }
                ]
            }