inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve documentation extension (#2266)

Browse Source 
* improve documentation step 1

* improve documentation step 2

* improve documentation step 3

* move in tutorials

* tutotrials

* fix

* fix

* fix

* fix links

* metadata extension configutation

* tutorials links revamp
This commit is contained in:
Eugenio Romano
2021-08-26 11:52:57 +02:00
committed by GitHub
parent 5212a40278
commit ee27271776
20 changed files with 814 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
docs/tutorials/file-preview.md Normal file
View File

@@ -0,0 +1,65 @@
---
Title: File preview
---
### 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));
}
}
```