VirtualViewer for Alfresco Example Content Application

Installation

To install this library, run:

$ npm install @snowbound/virtualviewer-alfresco-content-app --save

Extending the Content Application

There are three steps to connecting the VirtualViewer extension to the Alfresco Content App.

1. Import the VVContentModule (and optionally configure the VirtualViewer module's URL from the default 'http://localhost:8080/virtualviewer'):

app.module.ts

//Import the base config object VirtualViewerConfig if you wish to change default configuration
import { VVContentAppModule, VirtualViewerConfig } from '@snowbound/virtualviewer-alfresco-content-app';

//To change configuration, create a VirtualViewerConfig with your desired configuration
const myVirtualViewerConfig: VirtualViewerConfig = {
    baseUrl: "http://my-virtual-viewer-url:8080";
}

@NgModule({
  imports: [
        //...
        //import VirtualViewer
        //VirtualViewerConfig can be provided as an optional parameter
        VVContentAppModule.forRoot(myVirtualViewerConfig);
  ],
  //...
})
export class AppModule { }

2. Modify angular.json to copy the VirtualViewer extension json into the assets folder:

angular.json (minimal version to show where JSON should be added)

{
    "projects": {
        "app": {
            "architect": {
                "build": {
                    "options": {
                        "assets":[ 
                            "src/assets",
                            //This entry copies the VirtualViewer extension JSON into the build's assets 
                            {
                                "glob": "**/*.json",
                                "input": "node_modules/@snowbound/virtualviewer-alfresco-content-app/assets",
                                "output": "./assets/plugins"    
                            }
                        ]
                    }
                }
            }
        }
    }
}

3. Add VirtualViewer extension JSON as reference in extension JSON:

app.extensions.json

{
    "$schema": "../../extension.schema.json",
    "$name": "app",
    "$version": "1.0.0",
    "$references": [
        "plugin1.json",
        "plugin2.json",
        "dev.tools.json",
        "virtualviewer-alfresco-content-app.json"
    ],
    //...
}

The Alfresco Viewer will now use VirtualViewer to open supported file formats.

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint