mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-05-26 17:24:45 +00:00
cd1252cb94
* Adding general purpose preview overlay route Preparation for file preview feature Remove unnecessary preview root route and ability to use loadChildren Extract RouterExtensionService Remove loadChildren support and use component instead Cover RouterExtensionService with unit tests Fix tests Fix build Fix rebase issue Add generally available PluginPreviewAction Add data option to child routes and navigateBackAsClose option for the preview component Support plain mode preview Fix linting Update to latest alpha of ADF * Adding documentation * Rebase fix * Update to latest adf
150 lines
5.2 KiB
Markdown
150 lines
5.2 KiB
Markdown
---
|
|
Title: Routes
|
|
---
|
|
|
|
# Routes
|
|
|
|
To create a new route, populate the `routes` section with the corresponding entries.
|
|
|
|
```json
|
|
{
|
|
"$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](/extending/components) to use for the route. |
|
|
| layout | The layout [component](/extending/components) to use for the route. |
|
|
| auth | List of [authentication guards](#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](#dynamically-injected-routes-with-their-children) |
|
|
| parentRoute | The path that the route will become child of. See more info about and its limitations under the [Child routes](#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:
|
|
|
|
```json
|
|
{
|
|
"$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:
|
|
|
|
```ts
|
|
{
|
|
path: 'files,
|
|
component: FilesComponent,
|
|
children: [
|
|
{
|
|
path: 'bin',
|
|
component: BinComponent,
|
|
},
|
|
],
|
|
}
|
|
```
|
|
|
|
Within the extension, you can declare a route like:
|
|
|
|
```json
|
|
{
|
|
"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](/extending/components) 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](/extending/registration) your custom implementations.
|