How to add a new page and menu item - How to add a new page and menu item - Alfresco - Alfresco Digital Workspace - Alfresco/Alfresco-Digital-Workspace/4.2/Alfresco-Digital-Workspace/Alfresco-Digital-Workspace/Develop/Build-extensions/How-to-add-a-new-page-and-menu-item - 4.2

You can create a new page and a new menu item in the Digital Workspace. To achieve this you must have a working Digital Workspace extension as well as the full repository. Using the examples above, you should have an extension called my-extension.

1. Create a new folder called libs/my-extension/src/lib/my-first-page, and add a new file into it called my-first-page.component.ts with the following information:

   import { Component, } from '@angular/core';
   @Component({
       selector: 'my-first-page',
       template: "<h1>HELLO WORLD!</h1>"
       })
   export class MyFirstPageComponent {}
   

2. Edit the my-extension.json file in the libs/my-extension/assets folder and add the following to the routes array:

   {
       ...,
       "routes": [
           {
               "id": "my.extension.myFirstPage",
               "path": "my-first-page",
               "parentRoute": "",
               "layout": "app.layout.main",
               "component": "my.extension.components.my-first-page",
               "auth": [
                   "content-services.auth"
               ]
           }
       ],
       "rules": []
   }
   

3. Declare the component identifier directly in the extension's module by editing the libs/my-extension/src/lib/my-extension.module.ts file with the following:

   // Add the following imports.
   import { ExtensionService } from '@alfresco/adf-extensions';
   import { MyFirstPageComponent } from './my-first-page/my-first-page.component';
   // Change the NgModule as follows.
   @NgModule({
     ...,
     declarations: [MyFirstPageComponent]
   })
   export class MyExtensionModule {
     constructor(extensions: ExtensionService) {
       extensions.setComponents({
         'my.extension.components.my-first-page': MyFirstPageComponent,
       });
     }
   }
   

   You have added a new route (URI) to the application through the extension. You can test everything is working properly by launching the npm start content-ee command and pointing your browser to http://localhost:4200/#my-first-page.

4. To add a menu item that points to the new page, edit the my-extension.json file in the libs/my-extension/assets folder and add the following to the features element:

   {
     ...
     "features": {
       ...,
       "navbar": [
         {
           "id": "app.navbar.primary",
           "items": [
             {
               "id": "app.navbar.libraries.menu",
               "children": [
                 {
                   "id": "app.navbar.libraries.all-libraries",
                   "title": "My first page",
                   "description": "My first page",
                   "order": 400,
                   "route": "my-first-page",
                   "rules": {
                     "visible": "app.content-services.isEnabled"
                   }
                 }]
             }]
         }]
     },
     ...
   }
   

Below you can see what the layout looks like: