alfresco-content-app/docs/extending/routes.md

Title

Title
Routes

Routes

To create a new route, populate the routes section with the corresponding entries.

{
  "$schema": "../../../extension.schema.json",
  "$version": "1.0.0",
  "$name": "plugin1",

  "routes": [
    {
      "id": "plugin1.routes.bin",
      "path": "ext/bin",
      "layout": "app.layout.main",
      "component": "your.component.id",
      "children": [
        {
          "id": "plugin1.routes.bin.preview",
          "path": "preview/:nodeId",
          "component": "app.components.preview",
          "data": {
              "navigateBackAsClose": true,
              "simplestMode": true
          },
          "outlet": "viewer"
        }
      ],
      "parentRoute": "your-parent-route"
    }
  ]
}

Route properties

Name	Description
id	Unique identifier.
path	Runtime path of the route.
component	The main component to use for the route.
layout	The layout component to use for the route.
auth	List of authentication guards. Defaults to [ "app.auth" ].
data	Custom property bag to carry with the route.
children	List of child routes of the injected route. More info
parentRoute	The path that the route will become child of. See more info about and its limitations under the Child routes section

Use the app.layout.main value for the layout property to get the default application layout, with header, navigation sidebar and main content area. You can register any component to back the app.layout.main value.

Tip: By default, the app.layout.main is used if you do not specify any custom values. Use blank if you want your route component take the whole page.

You can define the full route schema like in the next example:

{
  "$schema": "../../../extension.schema.json",
  "$version": "1.0.0",
  "$name": "plugin1",

  "routes": [
    {
      "id": "plugin1.routes.bin",
      "path": "ext/bin",
      "component": "your.component.id",
      "layout": "app.layout.main",
      "auth": ["app.auth"],
      "data": {
        "title": "Custom Trashcan"
      },
      "parentRoute": "your-parent-route"
    }
  ]
}

All application routes require at least one authentication guard. Defaults to the ['app.auth'] value.

Child Routes

Injecting child routes under top-level routes: parentRoute

Extensions may register a routes that are children of some existing application routes. Imagine the situation when application has the following route structure:

export const APP_ROUTES: Routes = [
  {
    path: 'files',
    component: FilesComponent,
    children: [
      {
        path: 'bin',
        component: BinComponent,
      },
    ],
  }
]

Within the extension, you can declare a route like:

{
  "routes": [
    {
      "id": "custom.route",
      "parentRoute": "files",
      "path": "my-path",
      "layout": "app.layout.main",
      "component": "your.component.id"
    }
  ]
}

That registers a new route my-path that is a child of the existing files route, so giving you an option for nested linking: /files/my-path.

For the time being, you can provide child entries only for the root (top-level) routes.

Dynamically injected routes with their children

For a dynamically created route, we can define the children property as well, which contain the child routes of the mainly injected route. For the time being, for a child route, the following properties are supported and translated to Angular's Router configuration:

Property	Description
id	Unique identifier.
path	Runtime path of the route.
component	The main component to use for the route.
data	Custom property bag to carry with the route.
outlet	Router outlet's name. Especially useful when using the PluginPreviewAction within a plugin

Authentication Guards

Below is the list of the authentication guards main application registers on startup.

Key	Type	Description
app.auth	AuthGuardEcm	ADF guard, validates ACS authentication and redirects to Login if needed.
app.extensions.dataLoaderGuard	ExtensionsDataLoaderGuard	ACA guard, validates EXTENSION_DATA_LOADERS provider and redirects to Login if needed.

You can refer those guards from within your custom extensions, or register your custom implementations.