mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-05-12 17:04:46 +00:00
improve docs readability (#459)
* merge several pages together * docs cleanup * merge "Home" and "Features" together * fix broken links * update json example * fix link
This commit is contained in:
Denys Vuika
GitHub
parent
e600d437e3
commit
5a05aba280
@ -72,6 +72,6 @@ npm run stop:docker
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||
|
||||
[contributing]: ttps://github.com/Alfresco/alfresco-content-app/blob/master/CONTRIBUTING.md
|
||||
[contributing]: https://github.com/Alfresco/alfresco-content-app/blob/master/CONTRIBUTING.md
|
||||
[github]: https://github.com/Alfresco/alfresco-content-app/issues
|
||||
[jira]: https://issues.alfresco.com/jira/projects/ACA
|
||||
|
||||
367
docs/README.md
367
docs/README.md
@ -17,35 +17,370 @@ with a simple and easy to use interface for working with files stored in the Alf
|
||||
|
||||
This application uses the latest releases from Alfresco:
|
||||
|
||||
- [Alfresco ADF version 2.3](https://community.alfresco.com/community/application-development-framework/pages/get-started)
|
||||
- [Alfresco Content Services version 5.2.3](https://www.alfresco.com/platform/content-services-ecm)
|
||||
- [Alfresco Community Edition 201802 EA](https://www.alfresco.com/products/community/download)
|
||||
- [Alfresco ADF (2.4.0)](https://community.alfresco.com/community/application-development-framework/pages/get-started)
|
||||
- [Alfresco Content Services (5.2.3)](https://www.alfresco.com/platform/content-services-ecm)
|
||||
or [Alfresco Community Edition (201802 EA)](https://www.alfresco.com/products/community/download)
|
||||
|
||||
<p class="warning">
|
||||
You also need <a href="https://nodejs.org/en/" target="_blank">node.js</a> (8.9.1 or later) installed to build it locally from source code.
|
||||
You also need <a href="https://nodejs.org/en/" target="_blank">node.js</a> (LTS) installed to build it locally from source code.
|
||||
</p>
|
||||
|
||||
The latest version of the Alfresco Content platform is required
|
||||
due to the application using the latest [REST APIs](https://docs.alfresco.com/5.2/pra/1/topics/pra-welcome.html) developments.
|
||||
|
||||
## Contribution Policy
|
||||
## Features
|
||||
|
||||
### How to contribute
|
||||
The concept of this example is a simple user interface which makes accessing files in the Alfresco Content Services repository easy.
|
||||
|
||||
Fork our repository and submit a pull request when your code is ready for review.
|
||||
To be considered the Travis build must be green and all our automation tests must run without regressions.
|
||||
Often Content Management systems provide more capabilities out of the box than most users need;
|
||||
providing too many capabilities to these users prevents them from working efficiently,
|
||||
so they may end up using unsanctioned file management solutions which presents a proliferation of content storage
|
||||
and collaboration solutions as well as compliance issues for organizations.
|
||||
|
||||
### Contribute to the existing code base
|
||||
This application demonstrates how the complexity of Content Management can be simplified
|
||||
using the Alfresco Application Development Framework to easily and quickly create custom solutions for specific user cases.
|
||||
|
||||
What are we reviewing for?
|
||||
### User Interface - layout
|
||||
|
||||
- **License**: Every file should contain the Alfresco LICENSE header, LGPL Licence.
|
||||
- **Tests**: Add unit cases to cover the new behavior, and make sure all the existing tests are still green.
|
||||
- **JS Documentation**: Every class needs to have its own inline jsdoc, this documentation should explain the general purpose of the class and of each method.
|
||||
- **Documentation**: Update the documentation explaining how to use the new functionality, may not be necessary in the cases where change impacts only the CSS style.
|
||||
- **Clean Coding**: Some good rules are enforced by the tslint, but we want also our code to be easy to read. Please avoid comments inside the code or leaving pieces of code commented out.
|
||||
- **Localization**: Your contribution needs to support localization, with all new strings externalized, all translations are inside the i18n. The minimum requirement is English.
|
||||
There are three main areas of the application controlled by the [Layout component](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/layout):
|
||||
|
||||
- [(1) Application Header](#header)
|
||||
- [(2) Side Navigation](#side-navigation)
|
||||
- [(3) Document List](#document-list-layout)
|
||||
|
||||
|
||||
|
||||
### Header
|
||||
|
||||
The application [header](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/header) has three main elements.
|
||||
|
||||
1. [Logo and Color](#logo-and-color)
|
||||
2. [Search](#search)
|
||||
3. [Current User](#current-user)
|
||||
|
||||
|
||||
|
||||
#### Logo and Color
|
||||
|
||||
Logo & app primary color - logo and color are configurable by updating the
|
||||
[app.config.json](https://github.com/Alfresco/alfresco-content-app/blob/master/src/app.config.json) file in the root folder of the project.
|
||||
Please refer to the [Application Configuration](https://github.com/Alfresco/alfresco-content-app/blob/master/docs/configuration.md#application-logo) documentation for more information on how to change the logo and color.
|
||||
|
||||
#### Search
|
||||
|
||||
The application [Search](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/search) -
|
||||
uses the [ADF Search Component](https://github.com/Alfresco/alfresco-ng2-components/tree/master/lib/content-services/search)
|
||||
the app provides a 'live' search feature, where users can open files and folders directly from the Search API results.
|
||||
|
||||
|
||||
|
||||
#### Current User
|
||||
|
||||
[Current User](https://github.com/Alfresco/alfresco-content-app/tree/development/src/app/components/current-user) -
|
||||
displays the user's name, and a menu where users can logout.
|
||||
Optionally through updating the [app.config.json](https://github.com/Alfresco/alfresco-content-app/blob/master/src/app.config.json)
|
||||
a language switching menu can be displayed.
|
||||
|
||||
|
||||
|
||||
### Side Navigation
|
||||
|
||||
The application [side navigation](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/sidenav) has two features:
|
||||
a button menu and navigation links.
|
||||
|
||||
|
||||
|
||||
#### New button
|
||||
|
||||
The New button displays a menu which provides three actions:
|
||||
|
||||
- Create a new folder - provides a dialog which allows the creation of a new folder, the folder name is mandatory and the description is optional.
|
||||
- Upload a file - invokes the operating system file browser and allows a user to select file(s) to upload into their current location in the content repository.
|
||||
- Upload a folder - invokes the operating system folder browser and allows a user to select a folder to upload to their current location in the content repository.
|
||||
|
||||
When an upload starts the [upload component](https://github.com/Alfresco/alfresco-ng2-components/tree/master/lib/content-services/upload)
|
||||
is displayed which shows the user the progress of the uploads they have started.
|
||||
The upload dialog persists on the screen and can be minimized; users are able to continue using the application whilst uploads are in progress
|
||||
and uploads can be canceled which will stop uploads in progress or permanently delete already completed uploads.
|
||||
|
||||
|
||||
|
||||
#### Navigation
|
||||
|
||||
The navigation links are configurable via the [app.config.json](https://github.com/Alfresco/alfresco-content-app/blob/master/src/app.config.json).
|
||||
Default configuration creates two sections.
|
||||
See [Navigation](#navigation) for more information about configuring the side navigation.
|
||||
|
||||
### Document List Layout
|
||||
|
||||
The main area of the application is composed of several individual ADF components:
|
||||
|
||||
- (1) [Breadcrumb](https://alfresco.github.io/adf-component-catalog/components/BreadcrumbComponent.html)
|
||||
- (2) [Toolbar](https://alfresco.github.io/adf-component-catalog/components/ToolbarComponent.html)
|
||||
- (3) [Document List](https://alfresco.github.io/adf-component-catalog/components/DocumentListComponent.html)
|
||||
- (4) [Pagination](https://alfresco.github.io/adf-component-catalog/components/PaginationComponent.html)
|
||||
|
||||
|
||||
|
||||
The application has six different Document List views which share commonalities between each view and subtle differences depending on the content being loaded which are explained below.
|
||||
|
||||
#### Personal Files
|
||||
|
||||
Personal Files retrieves all content from the logged in user's home area (`/User Homes/<username>/`) in the repository;
|
||||
if the user is ‘admin’ who does not have a home folder then the repository root folder is shown.
|
||||
|
||||
Personal Files is the [Files](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/files) component,
|
||||
using the [Nodes API](https://api-explorer.alfresco.com/api-explorer/#/nodes).
|
||||
|
||||
#### File Libraries
|
||||
|
||||
File Libraries retrieves all the sites that the user is a member of including what type of site it is: public, moderated or private.
|
||||
File Libraries is the [Libraries](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/libraries) component,
|
||||
using the [Sites API](https://api-explorer.alfresco.com/api-explorer/#/sites).
|
||||
|
||||
When a user opens one of their sites then the content for the site's document library is shown.
|
||||
To display the files and folders from a site (`/Sites/<siteid>/Document Library/`) the [Files](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/files) component,
|
||||
using the [Nodes API](https://api-explorer.alfresco.com/api-explorer/#/nodes) is used.
|
||||
|
||||
#### Shared Files
|
||||
|
||||
The Shared Files view aggregates all files that have been shared using the QuickShare feature in the content repository.
|
||||
The [Shared Files](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/shared-files) component uses the [shared-links API](https://api-explorer.alfresco.com/api-explorer/#/shared-links)
|
||||
and includes extra columns to display where the file is
|
||||
[located](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/location-link)
|
||||
in the content repository and who created the shared link.
|
||||
|
||||
A feature for creating and removing Shared Links will be added in the future.
|
||||
|
||||
#### Recent Files
|
||||
|
||||
The Recent Files view shows all the files that have been created or modified within the last 30 days by the current user.
|
||||
The [Recent Files](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/current-user)
|
||||
component uses the Search API to query SOLR for changes made by the user and includes an extra column to display where the file is
|
||||
[located](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/location-link)
|
||||
in the content repository.
|
||||
|
||||
#### Favorites
|
||||
|
||||
The Favorites view shows all files and folders from the content repository that have been marked as a favorite by the current user.
|
||||
The [Favorites](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/favorites) component uses the
|
||||
[favorites](https://api-explorer.alfresco.com/api-explorer/#/favorites) API to retrieve all the favorite nodes for the user
|
||||
and includes an extra column to display where the file is
|
||||
[located](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/location-link)
|
||||
in the content repository.
|
||||
|
||||
#### Trash
|
||||
|
||||
The Trash view shows all the items that a user has deleted, admin will see items deleted by all users.
|
||||
The actions available in this view are Restore and Permanently Delete.
|
||||
The [Trashcan](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/trashcan) component uses the
|
||||
[trashcan](https://api-explorer.alfresco.com/api-explorer/#/trashcan) API to retrieve the deleted items
|
||||
and perform the actions requested by the user and includes an extra column to display where the item was
|
||||
[located](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/location-link)
|
||||
in the content repository before it was deleted.
|
||||
|
||||
#### Actions and the Actions Toolbar
|
||||
|
||||
All the views incorporate the [toolbar](https://alfresco.github.io/adf-component-catalog/components/ToolbarComponent.html)
|
||||
component from the Alfresco Application Development Framework;
|
||||
apart from the Trash view they all display the following actions when the current user has the necessary permissions,
|
||||
actions are automatically hidden when the user does not have permission.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<th>Action</th>
|
||||
<th>File</th>
|
||||
<th>Folder</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>View</td>
|
||||
<td>
|
||||
Opens the selected file using the <a href="https://github.com/Alfresco/alfresco-content-app/tree/development/src/app/components/preview" target="_blank">Preview</a> component,
|
||||
where the file cannot be displayed natively in a browser a PDF rendition is obtained from the repository.
|
||||
</td>
|
||||
<td>Not applicable</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Download</td>
|
||||
<td>Downloads single files to the user's computer, when multiple files are selected they are compressed into a ZIP and then downloaded.</td>
|
||||
<td>Folders are automatically compressed into a ZIP and then downloaded to the user's computer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Edit</td>
|
||||
<td>Not applicable</td>
|
||||
<td>The folder name and description can be edited in a dialog.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Favorite</td>
|
||||
<td colspan="2">
|
||||
Toggle the favorite mark on or off for files and folders, when multiple items are selected
|
||||
and one or more are not favorites then the mark will be toggled on.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Copy</td>
|
||||
<td colspan="2">
|
||||
Files and folders can be copied to another location in the content repository using the
|
||||
<a href="https://alfresco.github.io/adf-component-catalog/components/ContentNodeSelectorComponent.html" target="_blank">content-node-selector</a> component;
|
||||
once the copy action has completed the user is notified and can undo the action (which permanently deletes the created copies).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move</td>
|
||||
<td colspan="2">
|
||||
Files and folders can be moved to another location in the content repository using the
|
||||
<a href="https://alfresco.github.io/adf-component-catalog/components/ContentNodeSelectorComponent.html" target="_blank">content-node-selector</a> component;
|
||||
once the move action has completed the user is notified and can undo the action (which moves the items back to the original location).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Delete</td>
|
||||
<td colspan="2">
|
||||
Files and folders can be deleted from their location in the content repository;
|
||||
once the delete action has completed the user is notified and can undo the action (which restores the items from the trash).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Manage Versions</td>
|
||||
<td>
|
||||
Versions of files can be viewed, uploaded, restored, downloaded and deleted by using the version manager dialog;
|
||||
once each action has completed the list of versions is updated according to the change.
|
||||
</td>
|
||||
<td>Not applicable</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Besides the actions available in the toolbar users can single click an item to select it,
|
||||
or double click on a file to view it, and a folder to open it.
|
||||
|
||||
### File Viewer
|
||||
|
||||
The File Viewer has been created using the [ViewerComponent](https://alfresco.github.io/adf-component-catalog/components/ViewerComponent.html) from the ADF. The Viewer has four main areas:
|
||||
|
||||
|
||||
|
||||
1. [Header & Toolbar](#header-and-toolbar)
|
||||
2. [Content](#content)
|
||||
3. [Thumbnails side pane](#thumbnails-side-pane)
|
||||
4. [Viewer Controls](#viewer-controls)
|
||||
|
||||
#### Header and Toolbar
|
||||
|
||||
The Header & Toolbar section of the viewer contains a number of features that relate to the file currently being displayed:
|
||||
|
||||
- Close 'X' will return the user to the folder that contains the file.
|
||||
- The name and file type icon is shown in the middle.
|
||||
- Next and previous buttons will be displayed either side of the file name so that users can navigate to other files in the folder without navigating away from the viewer.
|
||||
- Finally, on the right hand side an actions toolbar provides users with the ability to download, favorite, move, copy, delete, manage versions and view info panel.
|
||||
|
||||
#### Content
|
||||
|
||||
The File Viewer consists of four separate views that handle displaying the content based on four types of content, covering various [file/mime](https://alfresco.github.io/adf-component-catalog/components/ViewerComponent.html#supported-file-formats) types:
|
||||
|
||||
- Document View: PDFs are displayed in the application File Viewer, for other document types (DOCX etc) then a PDF rendition is automatically retrieved.
|
||||
- Image View: JPEG, PNG, GIF, BMP and SVG images are natively displayed in the application File Viewer.
|
||||
- Media View: MP4, MP3, WAV, OGG and WEBM files are played natively application File Viewer. The File Viewer will download, by default, 50MB of the content at a time to ensure a smooth playback of the content.
|
||||
- Text View: TXT, XML, JS, HTML, JSON and TS files are natively displayed as text in the application File Viewer.
|
||||
|
||||
#### Thumbnails side pane
|
||||
|
||||
The Document View includes a thumbnails pane which can be activated by a button in the Viewer Actions toolbar. Clicking on a thumbnail will take a user directly to the selected page and as users scroll through a document the current page is highlighted in the pane.
|
||||
|
||||
#### Viewer Controls
|
||||
|
||||
At the bottom of the content the Viewer Controls allow users to interact with the content in various ways; the actions available are dependant on the type of content being displayed.
|
||||
|
||||
- Document View:
|
||||
- Activate/Deactivate thumbnails pane
|
||||
- Previous/Next page
|
||||
- Jump to page number
|
||||
- Zoom in/out
|
||||
- Fit to page
|
||||
- Image View:
|
||||
- Zoom in/out
|
||||
- Rotate left/right (does not alter content in the repository)
|
||||
- Reset image
|
||||
- Media View:
|
||||
- Play/pause
|
||||
- Timeline position
|
||||
- Audio mute/unmute
|
||||
- Audio volume
|
||||
- Full screen
|
||||
|
||||
### Info Drawer
|
||||
|
||||
The Info Drawer displays node information in the right sidebar panel. It is created by using the [InfoDrawerComponent](https://alfresco.github.io/adf-component-catalog/components/InfoDrawerComponent.html). This info is available for both folder and file nodes.
|
||||
|
||||
Currently, there are 2 tabs available: Properties and Versions.
|
||||
|
||||
#### Properties tab
|
||||
|
||||
The Properties tab displays the node's metadata info by using the [ContentMetadataCardComponent](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataCardComponent.html).
|
||||
|
||||
|
||||
|
||||
For more information, please check also the ADF's [ContentMetadataComponent](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html).
|
||||
|
||||
#### Versions tab
|
||||
|
||||
The Versions tab displays info about the node's versions and allows users to [manage versions](#version-manager), according to their permissions. Only the file nodes have version data available.
|
||||
|
||||
|
||||
|
||||
It uses the [VersionManagerComponent](https://alfresco.github.io/adf-component-catalog/components/VersionManagerComponent.html) from ADF framework.
|
||||
|
||||
Managing versions of a file can be possible also by accessing the 'Manage Versions' option from the 'More actions' menu. For more info on manage versions, please check the [version manager](#version-manager) page.
|
||||
|
||||
### Version Manager
|
||||
|
||||
The versions of a file can be viewed & managed by using the [VersionManagerComponent](https://alfresco.github.io/adf-component-catalog/components/VersionManagerComponent.html).
|
||||
|
||||
There are 2 ways users can access the Version Manager:
|
||||
|
||||
1. From the 'Manage Versions' option of the 'More actions' menu (check [Actions and the Actions Toolbar](#actions-and-the-actions-toolbar)):
|
||||
|
||||
|
||||
|
||||
|
||||
2. From the [Info Drawer](/info-drawer) (the Details right panel):
|
||||
|
||||
|
||||
|
||||
#### Upload new version
|
||||
|
||||
A new version for the selected file can be added by using this button. There is a restriction currently to only upload files of the same extension as the old version. The new version file will be automatically renamed to have the same name as the old version has. Please also check the [UploadVersionButtonComponent](https://alfresco.github.io/adf-component-catalog/components/UploadVersionButtonComponent.html).
|
||||
|
||||
#### Actions Menu
|
||||
|
||||
Each item in the version list has a couple of actions available: Restore, Download and Delete. These are displayed if user has permission to do that specific action. The 'Download' and 'Delete' can be also disabled from the app.config.
|
||||
|
||||
In the app.config.json file, these are the current settings for the ACA version manager:
|
||||
|
||||
```json
|
||||
{
|
||||
"adf-version-manager": {
|
||||
"allowComments": true,
|
||||
"allowDownload": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Set the allowComments to false if the version comments should not be displayed on the version list.
|
||||
|
||||
Clicking to delete a version of a file triggers a confirmation dialog. Please see the [ConfirmDialogComponent](https://alfresco.github.io/adf-component-catalog/components/ConfirmDialogComponent.html) for more info.
|
||||
|
||||
## How to contribute
|
||||
|
||||
Want to file a bug, contribute some code, or improve documentation? Excellent!
|
||||
Read up on our guidelines for [contributing][contributing]
|
||||
and then check out one of our issues in the [Jira][jira] or [GitHub][github]
|
||||
|
||||
### How long will it take for my contribution to be reviewed
|
||||
|
||||
The time necessary for a code review will vary, smaller changes may be reviewed within days, while larger changes may take longer.
|
||||
|
||||
[contributing]: https://github.com/Alfresco/alfresco-content-app/blob/master/CONTRIBUTING.md
|
||||
[github]: https://github.com/Alfresco/alfresco-content-app/issues
|
||||
[jira]: https://issues.alfresco.com/jira/projects/ACA
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
# Building from source code
|
||||
|
||||
The Content App is based on [Angular CLI](https://cli.angular.io), and you can use all the commands, generators and blueprints supported by the CLI.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- [Node.js](https://nodejs.org/en/) 8.9.1 or later LTS version
|
||||
- [Angular CLI](https://cli.angular.io/)
|
||||
|
||||
## Cloning and running
|
||||
|
||||
Use the following commands to clone the project, install dependencies and run it.
|
||||
|
||||
```sh
|
||||
git clone https://github.com/Alfresco/alfresco-content-app.git
|
||||
cd alfresco-content-app
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
The application runs at port 4200 by default, and should automatically open in the default browser once project compilation finishes.
|
||||
|
||||
## Proxy settings
|
||||
|
||||
The Content App provides a proxy configuration for local development server
|
||||
that allows you to address specific scenarios with CORS and native authentication dialog.
|
||||
|
||||
You can find settings in the "proxy.conf.js" file in the project root directory.
|
||||
|
||||
<p class="warning">
|
||||
The proxy settings get automatically applied every time you run the application with "npm start" script.
|
||||
You must restart the application every time you change the settings values.
|
||||
</p>
|
||||
|
||||
## Running documentation locally
|
||||
|
||||
For development purposes, you can run and test documentation locally.
|
||||
This is useful when working in different branches instead of a `master` one.
|
||||
|
||||
Run the following command to install the lightweight development server [wsrv](https://denysvuika.gitlab.io/wsrv/#/):
|
||||
|
||||
```sh
|
||||
npm install -g wsrv
|
||||
```
|
||||
|
||||
Now you can use the next command to serve the documentation folder in the browser:
|
||||
|
||||
```sh
|
||||
wsrv docs/ -s -l -o
|
||||
```
|
||||
|
||||
The browser page is going to automatically reload upon changes.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
@ -1,141 +0,0 @@
|
||||
# Application Configuration
|
||||
|
||||
The Content Application provides support for a global settings file `app.config.json` that you can use to customize the behavior of ACA and ADF components.
|
||||
|
||||
## Server settings
|
||||
|
||||
Once the Content Application starts, it needs to know where the Alfresco Content Services (either Community or Enterprise) server is.
|
||||
The "ecmHost" property allows you to set the address of the server using the dynamic or static format.
|
||||
|
||||
### Dynamic address
|
||||
|
||||
The example below demonstrates the most common dynamic format for development environment:
|
||||
|
||||
```json
|
||||
{
|
||||
"ecmHost": "http://{hostname}{:port}",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
The configuration above assumes you are running ACS and Content App on the same server and port
|
||||
and allows deploying to different servers having the same unified configuration file.
|
||||
|
||||
For example, a proxy server at `localhost:4200` hosting the Content App as the root application,
|
||||
and `localhost:4200/alfresco` for the ACS repository.
|
||||
|
||||
At runtime, the application is going to automatically substitute the "{hostname}" value with the original hostname.
|
||||
Optionally it can also use the value of the original port if present, for example, "4200" at local machines, or skip the value for port 80.
|
||||
|
||||
### Static address
|
||||
|
||||
Alternatively, you can provide a static address for the ACS server if necessary:
|
||||
|
||||
```json
|
||||
{
|
||||
"ecmHost": "http://localhost:4200",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
## Application settings
|
||||
|
||||
There are many settings you can change to alter the default behavior of the application.
|
||||
|
||||
### Application Name
|
||||
|
||||
The following block allows you to change the name of the application.
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"application": {
|
||||
"name": "Alfresco Example Content Application"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The value of the `application.name` key gets appended to every browser tab title at runtime
|
||||
with the format `[page title] - [application name]`,
|
||||
for example: "Personal Files - Alfresco Example Content Application".
|
||||
|
||||
### Application Logo
|
||||
|
||||
The default logo displayed in the top left corner of the Alfresco Content Application can be easily changed:
|
||||
|
||||
1. Place your custom logo image file in the [app-name]/src/assets/images folder. The displayed image will resize automatically, an image with extreme width/height might not retain its dimensions.
|
||||
|
||||
2. In the app.config.json file, set the value of the application.logo to contain the name of the custom logo image: "logo": "/assets/images/[image-name].[extension]"
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"application": {
|
||||
"logo": "/assets/images/alfresco-logo-white.svg"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Header Background color
|
||||
|
||||
You can change the header background color by specifying color code for the "headerColor" key:
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"headerColor": "#2196F3"
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Restricted content
|
||||
|
||||
You can restrict users from uploading certain types of files and folders by setting or extending the list of rules at the "files.excluded" path.
|
||||
|
||||
By default, the application ships with the following rules already predefined:
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"files": {
|
||||
"excluded": [
|
||||
".DS_Store",
|
||||
"desktop.ini",
|
||||
"thumbs.db",
|
||||
".git"
|
||||
]
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
<p class="tip">
|
||||
You can get more details on the supported rules in the following article: <a href="https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/upload.service.md" target="_blank">Upload Service</a>.
|
||||
</p>
|
||||
|
||||
### Pagination settings
|
||||
|
||||
You can change the default settings of the pagination that gets applied to all the document lists in the application.
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"pagination": {
|
||||
"supportedPageSizes": [
|
||||
25,
|
||||
50,
|
||||
100
|
||||
]
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
## Your custom settings
|
||||
|
||||
You can store any information in the application configuration file, and access it at runtime by using the `AppConfigService` service provided by ADF.
|
||||
|
||||
<p class="tip">
|
||||
Please refer to the <a href="https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/app-config.service.md" target="_blank">AppConfigService</a> documentation to get more details on Application Configuration features and API available.
|
||||
</p>
|
||||
21
docs/cors.md
21
docs/cors.md
@ -1,21 +0,0 @@
|
||||
# Cross Origin Resource Sharing (CORS)
|
||||
|
||||
## Chrome Workaround
|
||||
|
||||
For the Chrome browser, you can use the following plugin that allows you to toggle CORS:
|
||||
[Allow-Control-Allow-Origin](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi)
|
||||
|
||||
## Firefox Workaround
|
||||
|
||||
Firefox users can try the following plugin: [CORS Everywhere](https://addons.mozilla.org/en-Gb/firefox/addon/cors-everywhere/)
|
||||
|
||||
## Safari Workaround
|
||||
|
||||
If you are developing or testing with Safari then you can use the "Develop" menu to toggle the CORS mode.
|
||||
Please note that the page must be reloaded every time you change CORS settings.
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Using CORS](https://www.html5rocks.com/en/tutorials/cors/)
|
||||
143
docs/doc-list.md
143
docs/doc-list.md
@ -1,143 +0,0 @@
|
||||
### Document List Layout
|
||||
|
||||
The main area of the application is composed of several individual ADF components:
|
||||
|
||||
- (1) [Breadcrumb](https://alfresco.github.io/adf-component-catalog/components/BreadcrumbComponent.html)
|
||||
- (2) [Toolbar](https://alfresco.github.io/adf-component-catalog/components/ToolbarComponent.html)
|
||||
- (3) [Document List](https://alfresco.github.io/adf-component-catalog/components/DocumentListComponent.html)
|
||||
- (4) [Pagination](https://alfresco.github.io/adf-component-catalog/components/PaginationComponent.html)
|
||||
|
||||
|
||||
|
||||
The application has six different Document List views which share commonalities between each view and subtle differences depending on the content being loaded which are explained below.
|
||||
|
||||
#### Personal Files
|
||||
|
||||
Personal Files retrieves all content from the logged in user's home area (`/User Homes/<username>/`) in the repository;
|
||||
if the user is ‘admin’ who does not have a home folder then the repository root folder is shown.
|
||||
|
||||
Personal Files is the [Files](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/files) component,
|
||||
using the [Nodes API](https://api-explorer.alfresco.com/api-explorer/#/nodes).
|
||||
|
||||
#### File Libraries
|
||||
|
||||
File Libraries retrieves all the sites that the user is a member of including what type of site it is: public, moderated or private.
|
||||
File Libraries is the [Libraries](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/libraries) component,
|
||||
using the [Sites API](https://api-explorer.alfresco.com/api-explorer/#/sites).
|
||||
|
||||
When a user opens one of their sites then the content for the site's document library is shown.
|
||||
To display the files and folders from a site (`/Sites/<siteid>/Document Library/`) the [Files](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/files) component,
|
||||
using the [Nodes API](https://api-explorer.alfresco.com/api-explorer/#/nodes) is used.
|
||||
|
||||
#### Shared Files
|
||||
|
||||
The Shared Files view aggregates all files that have been shared using the QuickShare feature in the content repository.
|
||||
The [Shared Files](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/shared-files) component uses the [shared-links API](https://api-explorer.alfresco.com/api-explorer/#/shared-links)
|
||||
and includes extra columns to display where the file is
|
||||
[located](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/location-link)
|
||||
in the content repository and who created the shared link.
|
||||
|
||||
A feature for creating and removing Shared Links will be added in the future.
|
||||
|
||||
#### Recent Files
|
||||
|
||||
The Recent Files view shows all the files that have been created or modified within the last 30 days by the current user.
|
||||
The [Recent Files](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/current-user)
|
||||
component uses the Search API to query SOLR for changes made by the user and includes an extra column to display where the file is
|
||||
[located](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/location-link)
|
||||
in the content repository.
|
||||
|
||||
#### Favorites
|
||||
|
||||
The Favorites view shows all files and folders from the content repository that have been marked as a favorite by the current user.
|
||||
The [Favorites](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/favorites) component uses the
|
||||
[favorites](https://api-explorer.alfresco.com/api-explorer/#/favorites) API to retrieve all the favorite nodes for the user
|
||||
and includes an extra column to display where the file is
|
||||
[located](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/location-link)
|
||||
in the content repository.
|
||||
|
||||
#### Trash
|
||||
|
||||
The Trash view shows all the items that a user has deleted, admin will see items deleted by all users.
|
||||
The actions available in this view are Restore and Permanently Delete.
|
||||
The [Trashcan](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/trashcan) component uses the
|
||||
[trashcan](https://api-explorer.alfresco.com/api-explorer/#/trashcan) API to retrieve the deleted items
|
||||
and perform the actions requested by the user and includes an extra column to display where the item was
|
||||
[located](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/location-link)
|
||||
in the content repository before it was deleted.
|
||||
|
||||
#### Actions and the Actions Toolbar
|
||||
|
||||
All the views incorporate the [toolbar](https://alfresco.github.io/adf-component-catalog/components/ToolbarComponent.html)
|
||||
component from the Alfresco Application Development Framework;
|
||||
apart from the Trash view they all display the following actions when the current user has the necessary permissions,
|
||||
actions are automatically hidden when the user does not have permission.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<th>Action</th>
|
||||
<th>File</th>
|
||||
<th>Folder</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>View</td>
|
||||
<td>
|
||||
Opens the selected file using the <a href="https://github.com/Alfresco/alfresco-content-app/tree/development/src/app/components/preview" target="_blank">Preview</a> component,
|
||||
where the file cannot be displayed natively in a browser a PDF rendition is obtained from the repository.
|
||||
</td>
|
||||
<td>Not applicable</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Download</td>
|
||||
<td>Downloads single files to the user's computer, when multiple files are selected they are compressed into a ZIP and then downloaded.</td>
|
||||
<td>Folders are automatically compressed into a ZIP and then downloaded to the user's computer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Edit</td>
|
||||
<td>Not applicable</td>
|
||||
<td>The folder name and description can be edited in a dialog.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Favorite</td>
|
||||
<td colspan="2">
|
||||
Toggle the favorite mark on or off for files and folders, when multiple items are selected
|
||||
and one or more are not favorites then the mark will be toggled on.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Copy</td>
|
||||
<td colspan="2">
|
||||
Files and folders can be copied to another location in the content repository using the
|
||||
<a href="https://alfresco.github.io/adf-component-catalog/components/ContentNodeSelectorComponent.html" target="_blank">content-node-selector</a> component;
|
||||
once the copy action has completed the user is notified and can undo the action (which permanently deletes the created copies).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move</td>
|
||||
<td colspan="2">
|
||||
Files and folders can be moved to another location in the content repository using the
|
||||
<a href="https://alfresco.github.io/adf-component-catalog/components/ContentNodeSelectorComponent.html" target="_blank">content-node-selector</a> component;
|
||||
once the move action has completed the user is notified and can undo the action (which moves the items back to the original location).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Delete</td>
|
||||
<td colspan="2">
|
||||
Files and folders can be deleted from their location in the content repository;
|
||||
once the delete action has completed the user is notified and can undo the action (which restores the items from the trash).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Manage Versions</td>
|
||||
<td>
|
||||
Versions of files can be viewed, uploaded, restored, downloaded and deleted by using the version manager dialog;
|
||||
once each action has completed the list of versions is updated according to the change.
|
||||
</td>
|
||||
<td>Not applicable</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Besides the actions available in the toolbar users can single click an item to select it,
|
||||
or double click on a file to view it, and a folder to open it.
|
||||
158
docs/docker.md
158
docs/docker.md
@ -1,158 +0,0 @@
|
||||
# Using with Docker
|
||||
|
||||
<p class="warning">
|
||||
This article assumes you are familiar with Docker and know how to create images and containers.
|
||||
</p>
|
||||
|
||||
You can create a Docker image to run Alfresco Content App in the container.
|
||||
|
||||
## Using public Docker images
|
||||
|
||||
You can find all latest images for ACA in the [alfresco-content-app]( https://hub.docker.com/r/alfresco/alfresco-content-app/) DockerHub repository.
|
||||
|
||||
### Tags
|
||||
|
||||
- `latest`: latest stable release (`master` branch), available with 1.1 release or later
|
||||
- `development`: most recent code (`development` branch)
|
||||
|
||||
In addition, there are images for feature branches, pull requests and Travis CI builds.
|
||||
|
||||
### Example
|
||||
|
||||
You can run latest `development` build locally with the following command:
|
||||
|
||||
```sh
|
||||
docker run -p 3000:80 alfresco/alfresco-content-app:development
|
||||
```
|
||||
|
||||
The default image expects an ACS 5.2.2 or later running at port `8080`.
|
||||
You may also need CORS settings to be applied for your ACS installation or image.
|
||||
|
||||
## Building from source code
|
||||
|
||||
You need to run the following commands to build the project from the source code:
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
That produces a build in the "dist" folder that you can use with a Docker image.
|
||||
|
||||
<p class="tip">
|
||||
Also, you may need to update the `dist/app.config.json` file with the settings relevant to your scenario.
|
||||
</p>
|
||||
|
||||
## Creating an image
|
||||
|
||||
The Content Application provides a "Dockerfile" file in the repository root.
|
||||
You can build the image with the following command:
|
||||
|
||||
```sh
|
||||
docker image build -t content-app .
|
||||
```
|
||||
|
||||
## Running image in a container
|
||||
|
||||
To run the image locally, you can use the following command:
|
||||
|
||||
```sh
|
||||
docker container run -p 8888:80 --rm content-app
|
||||
```
|
||||
|
||||
Navigate to "http://localhost:8888" to access the running application.
|
||||
|
||||
## Docker Compose file
|
||||
|
||||
You can also use the "docker-compose" file for local development and testing.
|
||||
To build and run a container run the following command in the root project folder:
|
||||
|
||||
```sh
|
||||
docker-compose up
|
||||
```
|
||||
|
||||
To perform a cleanup operation, use the next command:
|
||||
|
||||
```sh
|
||||
docker-compose down --rmi all
|
||||
```
|
||||
|
||||
Navigate to "http://localhost:4200" to access the running application.
|
||||
|
||||
<p class="warning">
|
||||
Please keep in mind that you should manually build the project every time you want to publish the image or run it locally with the container.
|
||||
</p>
|
||||
|
||||
## Using with local ACS setup
|
||||
|
||||
If you run ACS at port 8080 as a Docker container (typical development configuration), you can use the following command to build the project before creating an image:
|
||||
|
||||
```sh
|
||||
npm run build:dev
|
||||
```
|
||||
|
||||
The command above updates the "dist/app.config.json" file to point the Content App to "http://localhost:8080" upon startup.
|
||||
Alternatively, you can change the configuration file manually before generating an image.
|
||||
|
||||
So, the development workflow, in this case, is going to be:
|
||||
|
||||
```sh
|
||||
npm run build:dev
|
||||
docker-compose up
|
||||
```
|
||||
|
||||
Navigate to "http://localhost:4200" to access the running application.
|
||||
|
||||
To perform a cleanup operation, use the next command:
|
||||
|
||||
```sh
|
||||
docker-compose down --rmi all
|
||||
```
|
||||
|
||||
## Publishing to Docker Hub
|
||||
|
||||
First of all, if you do not have a Docker Hub account, you can register here: https://hub.docker.com/, the registration is absolutely free.
|
||||
|
||||
Next, it is recommended that you get a clean build of the application:
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build:dev
|
||||
```
|
||||
|
||||
The commands above are going to produce a fresh build that is stored in the `dist` folder.
|
||||
At this point, you can make modifications to the final code in the `dist` folder if needed.
|
||||
For example you may want to change the `app.config.json` file content.
|
||||
|
||||
Now you can build your first version of the image:
|
||||
|
||||
```sh
|
||||
docker image build -t myaccount/content-app:1.0 .
|
||||
```
|
||||
|
||||
Where `myaccount` is usually your Docker Hub account name.
|
||||
|
||||
<p class="warning">
|
||||
Please note the ending "." symbol at the end of the command. It instructs the Docker to take current folder where the `Dockerfile` is located.
|
||||
</p>
|
||||
|
||||
To publish the newly created image use the next command:
|
||||
|
||||
```sh
|
||||
docker push myaccount/content-app:1.0
|
||||
```
|
||||
|
||||
## Running from Docker Hub
|
||||
|
||||
To quickly test the published image, or run it on another machine, use the following command:
|
||||
|
||||
```sh
|
||||
docker container run -p 80:80 --rm myaccount/content-app:1.0
|
||||
```
|
||||
|
||||
The `--rm` switch means the Docker will cleanup the container and image data once you stop the process.
|
||||
|
||||
<p class="tip">
|
||||
You may also want to remove your local image before trying out the Docker Hub:<br>
|
||||
`docker image rm myaccount/content-app:1.0`
|
||||
</p>
|
||||
33
docs/faq.md
33
docs/faq.md
@ -1,33 +0,0 @@
|
||||
# Frequently asked questions
|
||||
|
||||
## How do I log an issue (bug, enhancement, feature)?
|
||||
|
||||
Log any issues in the ['ACA' JIRA project](https://issues.alfresco.com/jira/projects/ACA),
|
||||
please include a clear description, steps to reproduce and screenshots where appropriate.
|
||||
All issues will be reviewed; bugs will be categorized if reproducible and enhancement/feature suggestions
|
||||
will be considered against existing priorities if the use case serves a general-purpose need.
|
||||
|
||||
## Does Alfresco provide customer support for the example content application?
|
||||
|
||||
Alfresco does not provide Customer Support, it is an example application for developers; [Developer Support Services](https://www.alfresco.com/alfresco-developer-support-services) are available from Alfresco.
|
||||
|
||||
## Does this/Will this application replace Alfresco Share?
|
||||
|
||||
This example application is designed to demonstrate how to construct a content application using the Alfresco Application Development Framework,
|
||||
it is not intended to be a replacement for Alfresco Share.
|
||||
|
||||
## Where can I get help building an application?
|
||||
|
||||
See [Where to get help](/?id=where-to-get-help) section.
|
||||
|
||||
## How do I contribute to the project?
|
||||
|
||||
See [Contribution Policy](/?id=contribution-policy) section.
|
||||
|
||||
## What would you like me to contribute?
|
||||
|
||||
Please refer to the ['ACA' JIRA project](https://issues.alfresco.com/jira/projects/ACA) for tickets in the project backlog.
|
||||
|
||||
## How often will this project be updated?
|
||||
|
||||
This project will continue to evolve as the Alfresco ADF evolves, with Alfresco and community developers contributing to its progress.
|
||||
@ -1,19 +0,0 @@
|
||||
# Features
|
||||
## Introduction
|
||||
The concept of this example is a simple user interface which makes accessing files in the Alfresco Content Services repository easy.
|
||||
|
||||
Often Content Management systems provide more capabilities out of the box than most users need;
|
||||
providing too many capabilities to these users prevents them from working efficiently,
|
||||
so they may end up using unsanctioned file management solutions which presents a proliferation of content storage
|
||||
and collaboration solutions as well as compliance issues for organizations.
|
||||
|
||||
This application demonstrates how the complexity of Content Management can be simplified
|
||||
using the Alfresco Application Development Framework to easily and quickly create custom solutions for specific user cases.
|
||||
|
||||
## User Interface - layout
|
||||
There are three main areas of the application controlled by the [Layout component](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/layout):
|
||||
- [(1) Application Header](/header)
|
||||
- [(2) Side Navigation](/side-nav)
|
||||
- [(3) Document List](/doc-list)
|
||||
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
### File Viewer
|
||||
|
||||
The File Viewer has been created using the [ViewerComponent](https://alfresco.github.io/adf-component-catalog/components/ViewerComponent.html) from the ADF. The Viewer has four main areas:
|
||||
|
||||
|
||||
|
||||
#### Header & Toolbar (1)
|
||||
The Header & Toolbar section of the viewer contains a number of features that relate to the file currently being displayed:
|
||||
- Close 'X' will return the user to the folder that contains the file.
|
||||
- The name and file type icon is shown in the middle.
|
||||
- Next and previous buttons will be displayed either side of the file name so that users can navigate to other files in the folder without navigating away from the viewer.
|
||||
- Finally, on the right hand side an actions toolbar provides users with the ability to download, favorite, move, copy, delete, manage versions and view info panel.
|
||||
|
||||
#### Content (2)
|
||||
The File Viewer consists of four separate views that handle displaying the content based on four types of content, covering various [file/mime](https://alfresco.github.io/adf-component-catalog/components/ViewerComponent.html#supported-file-formats) types:
|
||||
|
||||
- Document View: PDFs are displayed in the application File Viewer, for other document types (DOCX etc) then a PDF rendition is automatically retrieved.
|
||||
- Image View: JPEG, PNG, GIF, BMP and SVG images are natively displayed in the application File Viewer.
|
||||
- Media View: MP4, MP3, WAV, OGG and WEBM files are played natively application File Viewer. The File Viewer will download, by default, 50MB of the content at a time to ensure a smooth playback of the content.
|
||||
- Text View: TXT, XML, JS, HTML, JSON and TS files are natively displayed as text in the application File Viewer.
|
||||
|
||||
#### Thumbnails side pane (3)
|
||||
The Document View includes a thumbnails pane which can be activated by a button in the Viewer Actions toolbar. Clicking on a thumbnail will take a user directly to the selected page and as users scroll through a document the current page is highlighted in the pane.
|
||||
|
||||
#### Viewer Controls (4)
|
||||
At the bottom of the content the Viewer Controls allow users to interact with the content in various ways; the actions available are dependant on the type of content being displayed.
|
||||
|
||||
- Document View:
|
||||
- Activate/Deactivate thumbnails pane
|
||||
- Previous/Next page
|
||||
- Jump to page number
|
||||
- Zoom in/out
|
||||
- Fit to page
|
||||
- Image View:
|
||||
- Zoom in/out
|
||||
- Rotate left/right (does not alter content in the repository)
|
||||
- Reset image
|
||||
- Media View:
|
||||
- Play/pause
|
||||
- Timeline position
|
||||
- Audio mute/unmute
|
||||
- Audio volume
|
||||
- Full screen
|
||||
556
docs/getting-started.md
Normal file
556
docs/getting-started.md
Normal file
@ -0,0 +1,556 @@
|
||||
# Getting Started
|
||||
|
||||
## Prerequisites
|
||||
|
||||
This application uses the latest releases from Alfresco:
|
||||
|
||||
- [Alfresco ADF (2.4.0)](https://community.alfresco.com/community/application-development-framework/pages/get-started)
|
||||
- [Alfresco Content Services (5.2.3)](https://www.alfresco.com/platform/content-services-ecm)
|
||||
or [Alfresco Community Edition (201802 EA)](https://www.alfresco.com/products/community/download)
|
||||
|
||||
<p class="warning">
|
||||
You also need <a href="https://nodejs.org/en/" target="_blank">node.js</a> (LTS) installed to build it locally from source code.
|
||||
</p>
|
||||
|
||||
The latest version of the Alfresco Content platform is required
|
||||
due to the application using the latest [REST APIs](https://docs.alfresco.com/5.2/pra/1/topics/pra-welcome.html) developments.
|
||||
|
||||
## Building from source
|
||||
|
||||
The Content App is based on [Angular CLI](https://cli.angular.io), and you can use all the commands, generators and blueprints supported by the CLI.
|
||||
|
||||
### Prerequisites for building
|
||||
|
||||
- [Node.js](https://nodejs.org/en/) LTS
|
||||
- [Angular CLI](https://cli.angular.io/) 1.7.3
|
||||
|
||||
### Cloning and running
|
||||
|
||||
Use the following commands to clone the project, install dependencies and run it.
|
||||
|
||||
```sh
|
||||
git clone https://github.com/Alfresco/alfresco-content-app.git
|
||||
cd alfresco-content-app
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
The application runs at port `4200` by default, and should automatically open in the default browser once project compilation finishes.
|
||||
|
||||
### Proxy settings
|
||||
|
||||
The Content App provides a proxy configuration for local development server
|
||||
that allows you to address specific scenarios with CORS and native authentication dialog.
|
||||
|
||||
You can find settings in the "proxy.conf.js" file in the project root directory.
|
||||
|
||||
<p class="warning">
|
||||
The proxy settings get automatically applied every time you run the application with "npm start" script.
|
||||
You must restart the application every time you change the settings values.
|
||||
</p>
|
||||
|
||||
### Running unit tests
|
||||
|
||||
Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Internationalization (i18n)
|
||||
|
||||
The Content Application provides support for the following languages:
|
||||
|
||||
- German (`de`)
|
||||
- English (`en`)
|
||||
- Spanish (`es`)
|
||||
- French (`fr`)
|
||||
- Italian (`it`)
|
||||
- Japanese (`ja`)
|
||||
- Norwegian (`nb`)
|
||||
- Dutch (`nl`)
|
||||
- Brazilian Portuguese (`pt-BR`)
|
||||
- Russian (`ru`)
|
||||
- Simplified Chinese (`zh-CN`)
|
||||
|
||||
The fallback locale is the English one, however current browser language is taken as the default one automatically when the application starts.
|
||||
|
||||
### User-defined language
|
||||
|
||||
You can allow users to set custom language that gets saved to user preferences.
|
||||
The main application menu already has the [ADF Language Menu](https://github.com/Alfresco/alfresco-ng2-components/blob/development/docs/language-menu.component.md) component integrated and pre-filled with the supported items.
|
||||
|
||||
To change the default language set edit the `app.config.json` file and add or remove items:
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"languages": [
|
||||
{
|
||||
"key": "de",
|
||||
"label": "German"
|
||||
},
|
||||
{
|
||||
"key": "en",
|
||||
"label": "English"
|
||||
},
|
||||
{
|
||||
"key": "es",
|
||||
"label": "Spanish"
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
The file is located at the following path: `/src/app.config.json`.
|
||||
|
||||
### Custom languages
|
||||
|
||||
To add a custom language, add a new "JSON" file to the "/src/assets/i18n" folder
|
||||
with the name of the target locale, for instance, a "de.json" for the "German".
|
||||
|
||||
Translate the resource strings based on the default "en.json" file.
|
||||
You can copy the content over to your newly created file and replace English values with translated text.
|
||||
|
||||
```json
|
||||
{
|
||||
"APP": {
|
||||
"SIGN_IN": "Anmelden",
|
||||
"SIGN_OUT": "Abmelden",
|
||||
"NEW_MENU": {
|
||||
"LABEL": "Neu",
|
||||
"MENU_ITEMS": {
|
||||
"CREATE_FOLDER": "Ordner erstellen",
|
||||
"UPLOAD_FILE": "Datei hochladen",
|
||||
"UPLOAD_FOLDER": "Ordner hochladen"
|
||||
},
|
||||
...
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
The Content Application automatically bundles your file upon project build.
|
||||
You can test your locale by changing the browser language settings and reloading the page.
|
||||
|
||||
Optionally, you can extend the [ADF Language Menu](https://github.com/Alfresco/alfresco-ng2-components/blob/development/docs/language-menu.component.md) component with the newly added language by updating the `app.config.json` file.
|
||||
|
||||
### Customizing ADF translations
|
||||
|
||||
In addition to creating a custom language file for the Content Application,
|
||||
you can also provide translations for the ADF resources.
|
||||
|
||||
Your `/src/assets/i18n/<lang>.json` file can reflect the structure of one of the ADF language files:
|
||||
|
||||
- ADF Core ([en.json](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/i18n/en.json))
|
||||
- ADF Content Services ([en.json](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/content-services/i18n/en.json))
|
||||
- ADF Process Services ([en.json](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/process-services/i18n/en.json))
|
||||
- ADF Insights ([en.json](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/insights/i18n/en.json))
|
||||
|
||||
At runtime, the application-level strings have the highest priority.
|
||||
That means you can replace the value of any ADF resource string if needed.
|
||||
|
||||
For example, let's change the title of the "Create Folder" dialog shipped with the ADF.
|
||||
Modify the `/src/assets/i18n/en.json` file and append the "CORE" section like in the example below:
|
||||
|
||||
```json
|
||||
{
|
||||
"APP": {
|
||||
...
|
||||
},
|
||||
"CORE": {
|
||||
"FOLDER_DIALOG": {
|
||||
"CREATE_FOLDER_TITLE": "Custom title"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now, if you run the application and click the "New → Create Folder" menu,
|
||||
the title of the dialog should look like the following:
|
||||
|
||||
|
||||
|
||||
### Language picker
|
||||
|
||||
You can enable internal language picker in the `app.config.json` file:
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
|
||||
"languagePicker": true,
|
||||
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## CORS
|
||||
|
||||
The ACA already comes with the proxy configuration for Angular CLI to address CORS-related issues for development.
|
||||
Also, the docker images contain Nginx settings needed for CORS when developing and debugging application locally.
|
||||
|
||||
### Chrome Workaround
|
||||
|
||||
For the Chrome browser, you can use the following plugin that allows you to toggle CORS:
|
||||
[Allow-Control-Allow-Origin](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi)
|
||||
|
||||
### Firefox Workaround
|
||||
|
||||
Firefox users can try the following plugin: [CORS Everywhere](https://addons.mozilla.org/en-Gb/firefox/addon/cors-everywhere/)
|
||||
|
||||
### Safari Workaround
|
||||
|
||||
If you are developing or testing with Safari then you can use the "Develop" menu to toggle the CORS mode.
|
||||
Please note that the page must be reloaded every time you change CORS settings.
|
||||
|
||||
|
||||
|
||||
### See also
|
||||
|
||||
- [Using CORS](https://www.html5rocks.com/en/tutorials/cors/)
|
||||
|
||||
## Configuration
|
||||
|
||||
The Content Application provides support for a global settings file `app.config.json` that you can use to customize the behavior of ACA and ADF components.
|
||||
|
||||
### Server settings
|
||||
|
||||
Once the Content Application starts, it needs to know where the Alfresco Content Services (either Community or Enterprise) server is.
|
||||
The "ecmHost" property allows you to set the address of the server using the dynamic or static format.
|
||||
|
||||
#### Dynamic address
|
||||
|
||||
The example below demonstrates the most common dynamic format for development environment:
|
||||
|
||||
```json
|
||||
{
|
||||
"ecmHost": "http://{hostname}{:port}",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
The configuration above assumes you are running ACS and Content App on the same server and port
|
||||
and allows deploying to different servers having the same unified configuration file.
|
||||
|
||||
For example, a proxy server at `localhost:4200` hosting the Content App as the root application,
|
||||
and `localhost:4200/alfresco` for the ACS repository.
|
||||
|
||||
At runtime, the application is going to automatically substitute the "{hostname}" value with the original hostname.
|
||||
Optionally it can also use the value of the original port if present, for example, "4200" at local machines, or skip the value for port 80.
|
||||
|
||||
#### Static address
|
||||
|
||||
Alternatively, you can provide a static address for the ACS server if necessary:
|
||||
|
||||
```json
|
||||
{
|
||||
"ecmHost": "http://localhost:4200",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### Application settings
|
||||
|
||||
There are many settings you can change to alter the default behavior of the application.
|
||||
|
||||
#### Application Name
|
||||
|
||||
The following block allows you to change the name of the application.
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"application": {
|
||||
"name": "Alfresco Example Content Application"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The value of the `application.name` key gets appended to every browser tab title at runtime
|
||||
with the format `[page title] - [application name]`,
|
||||
for example: "Personal Files - Alfresco Example Content Application".
|
||||
|
||||
#### Application Logo
|
||||
|
||||
The default logo displayed in the top left corner of the Alfresco Content Application can be easily changed:
|
||||
|
||||
1. Place your custom logo image file in the [app-name]/src/assets/images folder. The displayed image will resize automatically, an image with extreme width/height might not retain its dimensions.
|
||||
|
||||
2. In the app.config.json file, set the value of the application.logo to contain the name of the custom logo image: "logo": "/assets/images/[image-name].[extension]"
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"application": {
|
||||
"logo": "/assets/images/alfresco-logo-white.svg"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Header Background color
|
||||
|
||||
You can change the header background color by specifying color code for the "headerColor" key:
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"headerColor": "#2196F3"
|
||||
}
|
||||
```
|
||||
|
||||
#### Restricted content
|
||||
|
||||
You can restrict users from uploading certain types of files and folders by setting or extending the list of rules at the "files.excluded" path.
|
||||
|
||||
By default, the application ships with the following rules already predefined:
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"files": {
|
||||
"excluded": [
|
||||
".DS_Store",
|
||||
"desktop.ini",
|
||||
"thumbs.db",
|
||||
".git"
|
||||
]
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
<p class="tip">
|
||||
You can get more details on the supported rules in the following article: <a href="https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/upload.service.md" target="_blank">Upload Service</a>.
|
||||
</p>
|
||||
|
||||
#### Pagination settings
|
||||
|
||||
You can change the default settings of the pagination that gets applied to all the document lists in the application.
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"pagination": {
|
||||
"supportedPageSizes": [
|
||||
25,
|
||||
50,
|
||||
100
|
||||
]
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### Your custom settings
|
||||
|
||||
You can store any information in the application configuration file, and access it at runtime by using the `AppConfigService` service provided by ADF.
|
||||
|
||||
<p class="tip">
|
||||
Please refer to the <a href="https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/app-config.service.md" target="_blank">AppConfigService</a> documentation to get more details on Application Configuration features and API available.
|
||||
</p>
|
||||
|
||||
## Navigation
|
||||
|
||||
The Alfresco Content Application provides the following navigation links:
|
||||
|
||||
- Personal Files
|
||||
- File Libraries
|
||||
- Shared
|
||||
- Recent Files
|
||||
- Favorites
|
||||
- Trash
|
||||
|
||||
The side navigation provides support to customize the appearance of the links by editing the `app.config.json`.
|
||||
|
||||
### Customization
|
||||
|
||||
Navigation configuration supports array and object like schema. Defining an object helps navigation to render visual delimiters between different groups of links.
|
||||
|
||||
```json
|
||||
{
|
||||
"navigation": {
|
||||
"main": [
|
||||
...
|
||||
],
|
||||
"secondary": [
|
||||
...
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"navigation": [
|
||||
{ ... },
|
||||
{ ... },
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Customize icons and text
|
||||
|
||||
`icon` - supported value can be anything from [Material Design](https://material.io/icons) icons library. If not defined, the link will render just the label value.
|
||||
|
||||
`title` - instructs the link to render a native browser tooltip with the given value. It can be a string or a i18n defined reference. If not defined, the link will not show a tooltip.
|
||||
|
||||
`label` - represents the visual name of the link. It can be a string or a i18n defined reference.
|
||||
|
||||
<p class="danger">
|
||||
Changing ` "route": { "url": "/..." } ` value will affect the navigation since these are mapped to application routing system.
|
||||
</p>
|
||||
|
||||
#### Custom text (i18n)
|
||||
|
||||
To change the `title` and `label` of navigation links edit the values under `BROWSE` entry found at `/src/assets/i18n/en.json`
|
||||
|
||||
```json
|
||||
"APP" : {
|
||||
...
|
||||
"BROWSE": {
|
||||
"PERSONAL": {
|
||||
"TITLE": "Personal Files",
|
||||
"SIDENAV_LINK": {
|
||||
"LABEL": "Personal Files",
|
||||
"TOOLTIP": "View your Personal Files"
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
For more information about internationalization see [Internationalization (i18n)](/i18n) section.
|
||||
|
||||
### User-defined navigation
|
||||
|
||||
To add custom navigation link for the application, first we need to create a component.
|
||||
|
||||
`src/app/components/custom-page/custom-page.component.ts`
|
||||
|
||||
```js
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h4>{{ title }}</h4>
|
||||
`
|
||||
})
|
||||
export class CustomPage {
|
||||
title = 'My Custom Page'
|
||||
}
|
||||
```
|
||||
|
||||
Register the component in ```app.module.ts```
|
||||
|
||||
```javascript
|
||||
|
||||
...
|
||||
import { CustomPage } from './components/custom-page/custom-page.component';
|
||||
|
||||
@NgModule({
|
||||
...
|
||||
declarations: [
|
||||
...,
|
||||
CustomPage
|
||||
],
|
||||
...
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
In the `app.config.json` define a link entry which will point to the custom page
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"navigation": [
|
||||
"main": [ ... ],
|
||||
"secondary": [ ... ],
|
||||
"custom": [
|
||||
{
|
||||
"icon": "work",
|
||||
"label": "Link",
|
||||
"title": "My custome link",
|
||||
"route": {
|
||||
"url": "/custom-route"
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Map the `/custom-route` in `app.routes.ts` as a child of `LayoutComponent` definition.
|
||||
|
||||
```js
|
||||
|
||||
import { CustomPage } from './components/custom-page/custom-page.component.ts';
|
||||
|
||||
...
|
||||
{
|
||||
path: '',
|
||||
component: LayoutComponent,
|
||||
children: [
|
||||
...,
|
||||
{
|
||||
path: 'custom-route',
|
||||
component: CustomPage
|
||||
}
|
||||
]
|
||||
}
|
||||
...,
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
For more information about the content of a custom page see [Document List Layout](/doc-list) section.
|
||||
|
||||
## Docker
|
||||
|
||||
The ACA comes with the ACS 6.0 Community Edition preconfigured.
|
||||
The application runs in to modes:
|
||||
|
||||
- Development (runs latest source code, requires building application)
|
||||
- Preview (runs with latest published containers, master branch)
|
||||
|
||||
### Development Mode
|
||||
|
||||
Run the local instance of the application packaged into the docker image together with the ACS images:
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
npm run start:docker
|
||||
```
|
||||
|
||||
The ACA runs on port `4000` when served from within container.
|
||||
|
||||
Use the following command to stop all the containers:
|
||||
|
||||
```sh
|
||||
npm run stop:docker
|
||||
```
|
||||
|
||||
### Preview Mode
|
||||
|
||||
<p class="tip">
|
||||
With this mode, you do not need building application from source code or installing dependencies.
|
||||
</p>
|
||||
|
||||
To run the latest published container go to the `docker-compose` folder and start docker compose from there:
|
||||
|
||||
```sh
|
||||
cd docker-compose
|
||||
docker-compose up
|
||||
```
|
||||
|
||||
The application is available at the `http://localhost:3000` address.
|
||||
@ -1,25 +0,0 @@
|
||||
## Header
|
||||
|
||||
The application [header](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/header) has three main elements.
|
||||
|
||||
|
||||
|
||||
### (1) Logo and Color
|
||||
Logo & app primary color - logo and color are configurable by updating the
|
||||
[app.config.json](https://github.com/Alfresco/alfresco-content-app/blob/master/src/app.config.json) file in the root folder of the project.
|
||||
Please refer to the [Application Configuration](https://github.com/Alfresco/alfresco-content-app/blob/master/docs/configuration.md#application-logo) documentation for more information on how to change the logo and color.
|
||||
|
||||
### (2) Search
|
||||
The application [Search](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/search) -
|
||||
uses the [ADF Search Component](https://github.com/Alfresco/alfresco-ng2-components/tree/master/lib/content-services/search)
|
||||
the app provides a 'live' search feature, where users can open files and folders directly from the Search API results.
|
||||
|
||||
|
||||
|
||||
### (3) Current User
|
||||
[Current User](https://github.com/Alfresco/alfresco-content-app/tree/development/src/app/components/current-user) -
|
||||
displays the user's name, and a menu where users can logout.
|
||||
Optionally through updating the [app.config.json](https://github.com/Alfresco/alfresco-content-app/blob/master/src/app.config.json)
|
||||
a language switching menu can be displayed.
|
||||
|
||||
|
||||
29
docs/help.md
29
docs/help.md
@ -32,11 +32,30 @@ The most cost-effective way to take advantage of this valuable training is throu
|
||||
Visit the Alfresco University section on the Alfresco website for more information:
|
||||
https://www.alfresco.com/alfresco-university
|
||||
|
||||
# Building and running locally
|
||||
## Frequently asked questions
|
||||
|
||||
Please refer to the [developer docs](/build) to get more details on building and running application on your local machine.
|
||||
### How do I log an issue (bug, enhancement, feature)?
|
||||
|
||||
# Using with Docker
|
||||
Log any issues in the [Jira][jira],
|
||||
please include a clear description, steps to reproduce and screenshots where appropriate.
|
||||
All issues will be reviewed; bugs will be categorized if reproducible and enhancement/feature suggestions
|
||||
will be considered against existing priorities if the use case serves a general-purpose need.
|
||||
|
||||
The Content App provides a "Dockerfile" and "docker-compose" files to aid in running application in a container.
|
||||
Please refer to the "[Using with Docker](/docker)" article for more details.
|
||||
### Does this/Will this application replace Alfresco Share?
|
||||
|
||||
This example application is designed to demonstrate how to construct a content application using the Alfresco Application Development Framework,
|
||||
it is not intended to be a replacement for Alfresco Share.
|
||||
|
||||
### How do I contribute to the project?
|
||||
|
||||
Want to file a bug, contribute some code, or improve documentation? Excellent!
|
||||
Read up on our guidelines for [contributing][contributing]
|
||||
and then check out one of our issues in the [Jira][jira] or [GitHub][github]
|
||||
|
||||
### How often will this project be updated?
|
||||
|
||||
This project will continue to evolve as the Alfresco ADF evolves, with Alfresco and community developers contributing to its progress.
|
||||
|
||||
[contributing]: https://github.com/Alfresco/alfresco-content-app/blob/master/CONTRIBUTING.md
|
||||
[github]: https://github.com/Alfresco/alfresco-content-app/issues
|
||||
[jira]: https://issues.alfresco.com/jira/projects/ACA
|
||||
|
||||
131
docs/i18n.md
131
docs/i18n.md
@ -1,131 +0,0 @@
|
||||
# Internationalization (i18n)
|
||||
|
||||
The Content Application provides support for the following languages:
|
||||
|
||||
- German (`de`)
|
||||
- English (`en`)
|
||||
- Spanish (`es`)
|
||||
- French (`fr`)
|
||||
- Italian (`it`)
|
||||
- Japanese (`ja`)
|
||||
- Norwegian (`nb`)
|
||||
- Dutch (`nl`)
|
||||
- Brazilian Portuguese (`pt-BR`)
|
||||
- Russian (`ru`)
|
||||
- Simplified Chinese (`zh-CN`)
|
||||
|
||||
The fallback locale is the English one, however current browser language is taken as the default one automatically when the application starts.
|
||||
|
||||
## User-defined language
|
||||
|
||||
You can allow users to set custom language that gets saved to user preferences.
|
||||
The main application menu already has the [ADF Language Menu](https://github.com/Alfresco/alfresco-ng2-components/blob/development/docs/language-menu.component.md) component integrated and pre-filled with the supported items.
|
||||
|
||||
To change the default language set edit the `app.config.json` file and add or remove items:
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"languages": [
|
||||
{
|
||||
"key": "de",
|
||||
"label": "German"
|
||||
},
|
||||
{
|
||||
"key": "en",
|
||||
"label": "English"
|
||||
},
|
||||
{
|
||||
"key": "es",
|
||||
"label": "Spanish"
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
The file is located at the following path: `/src/app.config.json`.
|
||||
|
||||
## Custom languages
|
||||
|
||||
To add a custom language, add a new "JSON" file to the "/src/assets/i18n" folder
|
||||
with the name of the target locale, for instance, a "de.json" for the "German".
|
||||
|
||||
Translate the resource strings based on the default "en.json" file.
|
||||
You can copy the content over to your newly created file and replace English values with translated text.
|
||||
|
||||
```json
|
||||
{
|
||||
"APP": {
|
||||
"SIGN_IN": "Anmelden",
|
||||
"SIGN_OUT": "Abmelden",
|
||||
"NEW_MENU": {
|
||||
"LABEL": "Neu",
|
||||
"MENU_ITEMS": {
|
||||
"CREATE_FOLDER": "Ordner erstellen",
|
||||
"UPLOAD_FILE": "Datei hochladen",
|
||||
"UPLOAD_FOLDER": "Ordner hochladen"
|
||||
},
|
||||
...
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
The Content Application automatically bundles your file upon project build.
|
||||
You can test your locale by changing the browser language settings and reloading the page.
|
||||
|
||||
Optionally, you can extend the [ADF Language Menu](https://github.com/Alfresco/alfresco-ng2-components/blob/development/docs/language-menu.component.md) component with the newly added language by updating the `app.config.json` file.
|
||||
|
||||
## Customizing ADF translations
|
||||
|
||||
In addition to creating a custom language file for the Content Application,
|
||||
you can also provide translations for the ADF resources.
|
||||
|
||||
Your `/src/assets/i18n/<lang>.json` file can reflect the structure of one of the ADF language files:
|
||||
|
||||
- ADF Core ([en.json](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/i18n/en.json))
|
||||
- ADF Content Services ([en.json](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/content-services/i18n/en.json))
|
||||
- ADF Process Services ([en.json](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/process-services/i18n/en.json))
|
||||
- ADF Insights ([en.json](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/insights/i18n/en.json))
|
||||
|
||||
At runtime, the application-level strings have the highest priority.
|
||||
That means you can replace the value of any ADF resource string if needed.
|
||||
|
||||
For example, let's change the title of the "Create Folder" dialog shipped with the ADF.
|
||||
Modify the `/src/assets/i18n/en.json` file and append the "CORE" section like in the example below:
|
||||
|
||||
```json
|
||||
{
|
||||
"APP": {
|
||||
...
|
||||
},
|
||||
"CORE": {
|
||||
"FOLDER_DIALOG": {
|
||||
"CREATE_FOLDER_TITLE": "Custom title"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now, if you run the application and click the "New → Create Folder" menu,
|
||||
the title of the dialog should look like the following:
|
||||
|
||||
|
||||
|
||||
## Language picker
|
||||
|
||||
You can enable internal language picker in the `app.config.json` file:
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
|
||||
"languagePicker": true,
|
||||
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -19,76 +19,8 @@
|
||||
path: '/'
|
||||
},
|
||||
{
|
||||
title: 'Features',
|
||||
type: 'dropdown',
|
||||
items: [
|
||||
{
|
||||
title: 'Introduction',
|
||||
path: 'features'
|
||||
},
|
||||
{
|
||||
title: 'Application Header',
|
||||
path: 'header'
|
||||
},
|
||||
{
|
||||
title: 'Side Navigation',
|
||||
path: 'side-nav'
|
||||
},
|
||||
{
|
||||
title: 'Document List',
|
||||
path: 'doc-list'
|
||||
},
|
||||
{
|
||||
title: 'File Viewer',
|
||||
path: 'file-viewer'
|
||||
},
|
||||
{
|
||||
title: 'Info Drawer',
|
||||
path: 'info-drawer'
|
||||
},
|
||||
{
|
||||
title: 'Version Manager',
|
||||
path: 'version-manager'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Building',
|
||||
path: 'build'
|
||||
},
|
||||
{
|
||||
title: 'Docker',
|
||||
path: 'docker'
|
||||
},
|
||||
{
|
||||
title: 'FAQ',
|
||||
path: 'faq'
|
||||
},
|
||||
{
|
||||
title: 'Guides',
|
||||
type: 'dropdown',
|
||||
items: [
|
||||
{
|
||||
title: 'Building',
|
||||
path: 'build'
|
||||
},
|
||||
{
|
||||
title: 'Internationalization (i18n)',
|
||||
path: 'i18n'
|
||||
},
|
||||
{
|
||||
title: 'CORS',
|
||||
path: 'cors'
|
||||
},
|
||||
{
|
||||
title: 'Configuration',
|
||||
path: 'configuration'
|
||||
},
|
||||
{
|
||||
title: 'Navigation',
|
||||
path: 'navigation'
|
||||
}
|
||||
]
|
||||
title: 'Getting Started',
|
||||
path: 'getting-started'
|
||||
},
|
||||
{
|
||||
title: 'Get Help',
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
### Info Drawer
|
||||
|
||||
The Info Drawer displays node information in the right sidebar panel. It is created by using the [InfoDrawerComponent](https://alfresco.github.io/adf-component-catalog/components/InfoDrawerComponent.html). This info is available for both folder and file nodes.
|
||||
|
||||
Currently, there are 2 tabs available: Properties and Versions.
|
||||
|
||||
#### Properties tab
|
||||
|
||||
The Properties tab displays the node's metadata info by using the [ContentMetadataCardComponent](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataCardComponent.html).
|
||||
|
||||
|
||||
|
||||
For more information, please check also the ADF's [ContentMetadataComponent](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html).
|
||||
|
||||
#### Versions tab
|
||||
|
||||
The Versions tab displays info about the node's versions and allows users to [manage versions](/version-manager), according to their permissions. Only the file nodes have version data available.
|
||||
|
||||
|
||||
|
||||
It uses the [VersionManagerComponent](https://alfresco.github.io/adf-component-catalog/components/VersionManagerComponent.html) from ADF framework.
|
||||
|
||||
Managing versions of a file can be possible also by accessing the 'Manage Versions' option from the 'More actions' menu. For more info on manage versions, please check the [version manager](/version-manager) page.
|
||||
@ -1,163 +0,0 @@
|
||||
# Navigation
|
||||
|
||||
The Alfresco Content Application provides the following navigation links:
|
||||
|
||||
- Personal Files
|
||||
- File Libraries
|
||||
- Shared
|
||||
- Recent Files
|
||||
- Favorites
|
||||
- Trash
|
||||
|
||||
The side navigation provides support to customize the appearance of the links by editing the `app.config.json`.
|
||||
|
||||
## Customization
|
||||
|
||||
Navigation configuration supports array and object like schema. Defining an object helps navigation to render visual delimiters between different groups of links.
|
||||
|
||||
```json
|
||||
{
|
||||
"navigation": {
|
||||
"main": [
|
||||
...
|
||||
],
|
||||
"secondary": [
|
||||
...
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"navigation": [
|
||||
{ ... },
|
||||
{ ... },
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Customize icons and text
|
||||
|
||||
`icon` - supported value can be anything from [Material Design](https://material.io/icons) icons library. If not defined, the link will render just the label value.
|
||||
|
||||
`title` - instructs the link to render a native browser tooltip with the given value. It can be a string or a i18n defined reference. If not defined, the link will not show a tooltip.
|
||||
|
||||
`label` - represents the visual name of the link. It can be a string or a i18n defined reference.
|
||||
|
||||
<p class="danger">
|
||||
Changing ` "route": { "url": "/..." } ` value will affect the navigation since these are mapped to application routing system.
|
||||
</p>
|
||||
|
||||
### Custom text (i18n)
|
||||
|
||||
To change the `title` and `label` of navigation links edit the values under `BROWSE` entry found at `/src/assets/i18n/en.json`
|
||||
|
||||
```json
|
||||
"APP" : {
|
||||
...
|
||||
"BROWSE": {
|
||||
"PERSONAL": {
|
||||
"TITLE": "Personal Files",
|
||||
"SIDENAV_LINK": {
|
||||
"LABEL": "Personal Files",
|
||||
"TOOLTIP": "View your Personal Files"
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
For more information about internationalization see [Internationalization (i18n)](/i18n) section.
|
||||
|
||||
## User-defined navigation
|
||||
|
||||
To add custom navigation link for the application, first we need to create a component.
|
||||
|
||||
`src/app/components/custom-page/custom-page.component.ts`
|
||||
|
||||
```js
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h4>{{ title }}</h4>
|
||||
`
|
||||
})
|
||||
export class CustomPage {
|
||||
title = 'My Custom Page'
|
||||
}
|
||||
```
|
||||
|
||||
Register the component in ```app.module.ts```
|
||||
|
||||
```javascript
|
||||
|
||||
...
|
||||
import { CustomPage } from './components/custom-page/custom-page.component';
|
||||
|
||||
@NgModule({
|
||||
...
|
||||
declarations: [
|
||||
...,
|
||||
CustomPage
|
||||
],
|
||||
...
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
In the `app.config.json` define a link entry which will point to the custom page
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"navigation": [
|
||||
"main": [ ... ],
|
||||
"secondary": [ ... ],
|
||||
"custom": [
|
||||
{
|
||||
"icon": "work",
|
||||
"label": "Link",
|
||||
"title": "My custome link",
|
||||
"route": {
|
||||
"url": "/custom-route"
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Map the `/custom-route` in `app.routes.ts` as a child of `LayoutComponent` definition.
|
||||
|
||||
```js
|
||||
|
||||
import { CustomPage } from './components/custom-page/custom-page.component.ts';
|
||||
|
||||
...
|
||||
{
|
||||
path: '',
|
||||
component: LayoutComponent,
|
||||
children: [
|
||||
...,
|
||||
{
|
||||
path: 'custom-route',
|
||||
component: CustomPage
|
||||
}
|
||||
]
|
||||
}
|
||||
...,
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
For more information about the content of a custom page see [Document List Layout](/doc-list) section.
|
||||
@ -1,27 +0,0 @@
|
||||
### Side Nav
|
||||
|
||||
The application [side navigation](https://github.com/Alfresco/alfresco-content-app/tree/master/src/app/components/sidenav) has two features:
|
||||
a button menu and navigation links.
|
||||
|
||||
|
||||
|
||||
#### New button
|
||||
|
||||
The New button displays a menu which provides three actions:
|
||||
|
||||
- Create a new folder - provides a dialog which allows the creation of a new folder, the folder name is mandatory and the description is optional.
|
||||
- Upload a file - invokes the operating system file browser and allows a user to select file(s) to upload into their current location in the content repository.
|
||||
- Upload a folder - invokes the operating system folder browser and allows a user to select a folder to upload to their current location in the content repository.
|
||||
|
||||
When an upload starts the [upload component](https://github.com/Alfresco/alfresco-ng2-components/tree/master/lib/content-services/upload)
|
||||
is displayed which shows the user the progress of the uploads they have started.
|
||||
The upload dialog persists on the screen and can be minimized; users are able to continue using the application whilst uploads are in progress
|
||||
and uploads can be canceled which will stop uploads in progress or permanently delete already completed uploads.
|
||||
|
||||
|
||||
|
||||
#### Navigation
|
||||
|
||||
The navigation links are configurable via the [app.config.json](https://github.com/Alfresco/alfresco-content-app/blob/master/src/app.config.json).
|
||||
Default configuration creates two sections.
|
||||
See [Navigation](/navigation) for more information about configuring the side navigation.
|
||||
@ -1,33 +0,0 @@
|
||||
## Version Manager
|
||||
|
||||
The versions of a file can be viewed & managed by using the [VersionManagerComponent](https://alfresco.github.io/adf-component-catalog/components/VersionManagerComponent.html).
|
||||
|
||||
There are 2 ways users can access the Version Manager:
|
||||
|
||||
1. From the 'Manage Versions' option of the 'More actions' menu (check [Actions and the Actions Toolbar](/doc-list?id=actions-and-the-actions-toolbar)):
|
||||
|
||||
|
||||
|
||||
2. From the [Info Drawer](/info-drawer) (the Details right panel):
|
||||
|
||||
|
||||
### Upload new version
|
||||
|
||||
A new version for the selected file can be added by using this button. There is a restriction currently to only upload files of the same extension as the old version. The new version file will be automatically renamed to have the same name as the old version has. Please also check the [UploadVersionButtonComponent](https://alfresco.github.io/adf-component-catalog/components/UploadVersionButtonComponent.html).
|
||||
|
||||
### Actions Menu
|
||||
|
||||
Each item in the version list has a couple of actions available: Restore, Download and Delete. These are displayed if user has permission to do that specific action. The 'Download' and 'Delete' can be also disabled from the app.config.
|
||||
|
||||
In the app.config.json file, these are the current settings for the ACA version manager:
|
||||
```
|
||||
"adf-version-manager": {
|
||||
"allowComments": true,
|
||||
"allowDownload": true,
|
||||
"allowDelete": true
|
||||
},
|
||||
...
|
||||
```
|
||||
Set the allowComments to false if the version comments should not be displayed on the version list.
|
||||
|
||||
Clicking to delete a version of a file triggers a confirmation dialog. Please see the [ConfirmDialogComponent](https://alfresco.github.io/adf-component-catalog/components/ConfirmDialogComponent.html) for more info.
|
||||
Loading…
x
Reference in New Issue
Block a user