Create a Digital Workspace extension - Create a Digital Workspace extension - Alfresco - Alfresco Digital Workspace - Alfresco/Alfresco-Digital-Workspace/4.2/Alfresco-Digital-Workspace/Alfresco-Digital-Workspace/Develop/Build-extensions/How-to-create-an-extension/Create-a-Digital-Workspace-extension - 4.2

Use the Nx developer tools for monorepos to create the Digital Workspace extension.

1. Install nx cli globally:

   npm install -g nx
   

2. Create a new extension called my-extension from the root directory of the Digital Workspace project:

   nx g @nrwl/angular:lib my-extension
   

   Leave the default values of the command unless you're familiar with what they mean.

   In the libs/my-extension path you'll find the following structure:

   • The src folder contains all the typescript source code
   • The index.ts file defines all the inclusions of the extension
   • The lib/my-extension.module.ts file defines the module class for the extension
   • The README.md file contains documentation
   • Other files are for testing and configuration

   Note

   For more on creating libraries using Nx see Angular Nx Tutorial - Step 8: Create Libs

3. Once my-extension is created, add the configuration to the extension module by editing the ./libs/my-extension/src/lib/my-extension.module.ts file:

   // Add the following import to the page.
   import { provideExtensionConfig } from '@alfresco/adf-extensions';
   // Add providers as described below.
   NgModule({
     imports: [CommonModule],
     providers: [
       provideExtensionConfig(['my-extension.json'])
     ]
   })
   export class MyExtensionModule {}
   

4. Create a directory called libs/my-extension/assets:

   This directory is used to program the extension to add a new item called hello world to the New button on the landing page of the Digital Workspace.

5. Create a file called libs/my-extension/assets/my-extension.json with the following content:

   {
     "$version": "1.0.0",
     "$id": "my.extension",
     "$name": "my adf extension",
     "$description": "my adf extension",
     "$license": "Apache-2.0",
     "actions": [],
     "features": {
       "create": [
         {
           "id": "my.extension.hello.world",
           "title": "BYE BYE WORLD! (Logout)",
           "order": 50,
           "actions": {
             "click": "LOGOUT"
           }
         }
       ]
     },
     "routes": [],
     "rules": []
   }
   

   Note

   After the Digital Workspace extension has been created, ensure the tsconfig.base.json file includes a link to the libs/my-extension/src/index.ts file as part of the paths item. These are default paths that are set during the creation of the extension. It's useful to verify the paths when troubleshooting.

6. Edit the apps/content-ee/src/app/extensions.module.ts file to add the extension module to the application using the following format:

   // Add the following import to the page.
   import { MyExtensionModule } from '@alfresco-dbp/my-extension';
   @NgModule({
       imports: [
           ...,
           MyExtensionModule,
       ],
   })
   export class AppExtensionsModule {}
   

7. Edit the angular.json file by adding the following configuration to the projects/content-ee/targets/build/options/assets section:

   This configuration ensures the extension is visible from the Digital Workspace app.

   {
     "input": "libs/my-extension/assets",
     "output": "/assets/plugins/",
     "glob": "my-extension.json"
   },
   

8. From a command prompt start the Digital Workspace:

   npm start content-ee
   

You have now added a new option to the New button called BYE BYE WORLD!. The new option initiates the logout command from the current Digital Workspace session. For more see Extending and Application Development Framework Tutorials.