mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[ACA-3394] Generally available file preview feature for extensions (#1496)
* 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
This commit is contained in:
Popovics András
GitHub
@@ -20,6 +20,7 @@ The components are used to create custom:
|
||||
| app.toolbar.toggleFavoriteLibrary | ToggleFavoriteLibraryComponent | The toolbar button component that toggles Favorite library state for the selection. |
|
||||
| app.toolbar.toggleJoinLibrary | ToggleJoinLibraryComponent | The toolbar button component that toggles Join/Cancel Join request for the selected library |
|
||||
| app.toolbar.viewNode | ViewNodeComponent | Action component to view files |
|
||||
| app.components.preview | PreviewComponent | Preview feature which can be used by plugins. For more info see the [tutorials](/extending/tutorials) about the Preview. |
|
||||
|
||||
See [Registration](/extending/registration) section for more details
|
||||
on how to register your own entries to be re-used at runtime.
|
||||
|
||||
@@ -18,6 +18,18 @@ To create a new route, populate the `routes` section with the corresponding entr
|
||||
"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"
|
||||
}
|
||||
]
|
||||
@@ -34,7 +46,8 @@ To create a new route, populate the `routes` section with the corresponding entr
|
||||
| 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. |
|
||||
| parentRoute | The path that the route will become child of |
|
||||
| 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.
|
||||
@@ -72,6 +85,8 @@ 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:
|
||||
|
||||
@@ -109,6 +124,18 @@ 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.
|
||||
|
||||
@@ -259,3 +259,67 @@ Update the `src/assets/app.extensions.json` file, and insert a new entry to the
|
||||
```
|
||||
|
||||
Now, once you run the application, you should see an extra button that invokes your dialog on every click.
|
||||
|
||||
### File preview from a plugin with custom route
|
||||
|
||||
There might be scenarios where you build a plugin with a custom route, and from that route you might want to preview a file within an overlay.
|
||||
When having a plugin's entry point in a custom route, using the `/view` root-level application routes for previewing a file might be contradictory, since hitting any of these urls results a navigation away from the original route implying a reload of the original route's entry component when closing the preview panel (navigating back).
|
||||
|
||||
#### Example
|
||||
|
||||
Let's say you have a custom plugin with which you can start a process with any of your files. The plugin registers a custom route (`start-process`) with its entry component, where the user can start a process.
|
||||
In this component the user can fill in a form with different values for text fields and selectboxes and select a file. But for file selection, we would like to provide a preview functionality (with the `PreviewComponent` provided by the core application) to let the user be sure that the right file was selected. Obviously having a form filled in values (but not saved) means, that we don't want to loose our filled in data just because we are previewing a file. Because of this we would like the file preview to be opened in an overlay mode. The core application has one overlay region already defined for this reason, called `viewer`. This is the named router outlet we need to target without route change.
|
||||
|
||||
#### Solution
|
||||
|
||||
In our plugin we need to do the following steps:
|
||||
|
||||
##### Registering the custom route in the plugin.json
|
||||
|
||||
We need to add the custom route with our entry component and its child route for the preview:
|
||||
|
||||
```json
|
||||
{
|
||||
...
|
||||
"routes": [{
|
||||
"id": "start-process",
|
||||
"path": "start-process",
|
||||
"parentRoute": "",
|
||||
"layout": "app.layout.main",
|
||||
// The component we register to be our entry point for this particular route
|
||||
"component": "myplugin.components.start-process",
|
||||
"children": [
|
||||
{
|
||||
"id": "start-process-preview",
|
||||
// It can be accessed on the "/start-process(viewer:preview/nodeId)" route
|
||||
"path": "preview/:nodeId",
|
||||
"component": "app.components.preview",
|
||||
"data": {
|
||||
// Using history.back() when closing the preview
|
||||
"navigateBackAsClose": true,
|
||||
// Disabling complex action and buttons for the preview
|
||||
"simplestMode": true
|
||||
},
|
||||
// We would like to target that named router outlet which is used for the viewer overlay
|
||||
"outlet": "viewer"
|
||||
}
|
||||
]
|
||||
}]
|
||||
...
|
||||
```
|
||||
|
||||
|
||||
##### Dispatching the right action within our component to open the file preview
|
||||
|
||||
```ts
|
||||
import { PluginPreviewAction } from '@alfresco/aca-shared/store';
|
||||
|
||||
@Component({...})
|
||||
export class StartProcessComponent {
|
||||
...
|
||||
|
||||
onFilePreview({ nodeId }) {
|
||||
this.store.dispatch(new PluginPreviewAction('start-process-cloud', nodeId));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user