mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-05-12 17:04:46 +00:00
[ACA-1889] Split Getting Started section into separate pages (#710)
* [ACA-1889] Split Getting Started section into separate files * [ACA-1889] Removed original Getting Started page * [ACA-1889] Fixed in-page links to new files
This commit is contained in:
Andy Stark
Denys Vuika
parent
538d89d267
commit
933f426759
@ -65,7 +65,7 @@ The application [header](https://github.com/Alfresco/alfresco-content-app/tree/m
|
||||
|
||||
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](/getting-started#application-logo) documentation for more information on how to change the logo and color.
|
||||
Please refer to the [Application Configuration](/getting-started/configuration) documentation for more information on how to change the logo and color.
|
||||
|
||||
#### Search
|
||||
|
||||
@ -113,7 +113,7 @@ and uploads can be canceled which will stop uploads in progress or permanently d
|
||||
|
||||
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](/getting-started#navigation) for more information about configuring the side navigation.
|
||||
See [Navigation](/getting-started/navigation) for more information about configuring the side navigation.
|
||||
|
||||
### Document List Layout
|
||||
|
||||
|
||||
@ -1,559 +0,0 @@
|
||||
---
|
||||
title: Getting Started
|
||||
---
|
||||
|
||||
# Getting Started
|
||||
|
||||
## Prerequisites
|
||||
|
||||
This application uses the latest releases from Alfresco:
|
||||
|
||||
- [Alfresco ADF (2.5.0)](https://community.alfresco.com/community/application-development-framework/pages/get-started)
|
||||
- [Alfresco Content Services (6.0)](https://www.alfresco.com/platform/content-services-ecm)
|
||||
or [Alfresco Community Edition (6.0 - General Release: 201806)](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 the project has compiled.
|
||||
|
||||
### Proxy settings
|
||||
|
||||
The Content App provides a proxy configuration for a local development server that allows you to address specific scenarios with CORS and a 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 the "npm start" script.
|
||||
You must restart the application every time you change its settings.
|
||||
</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 default language is English, however the current browser language is taken as the default one automatically when the application starts.
|
||||
|
||||
### User-defined language
|
||||
|
||||
You can allow users to set custom languages that are saved to their preferences.
|
||||
The main application menu already has the [ADF Language Menu](https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/core/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 here: `/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 language, for instance, a "de.json" for "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 the 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 when the project builds.
|
||||
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/master/docs/core/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 that was shipped with 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 Alfresco Content Application 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 an 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
|
||||
|
||||
For the Chrome browser, you can use 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.
|
||||
Note, the page must be reloaded every time you change the CORS settings.
|
||||
|
||||
|
||||
|
||||
### See also
|
||||
|
||||
- [Using CORS](https://www.html5rocks.com/en/tutorials/cors/)
|
||||
|
||||
## Configuration
|
||||
|
||||
The Alfresco Content Application provides support for the global settings file `app.config.json` that you can use to customize the behavior of the Content Application 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 a development environment:
|
||||
|
||||
```json
|
||||
{
|
||||
"ecmHost": "http://{hostname}{:port}",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
The configuration above assumes you are running ACS and the Alfresco Content Application 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 Alfresco Content Application 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 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 the 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/core/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/core/app-config.service.md" target="_blank">AppConfigService</a> documentation to get more details on Application Configuration features and API's 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)](#internationalization-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 custom 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](/#document-list-layout) 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.
|
||||
16
docs/getting-started/README.md
Normal file
16
docs/getting-started/README.md
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
---
|
||||
|
||||
# Getting started
|
||||
|
||||
Learn how to start developing with the Alfresco Content Application.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Prerequisites](/getting-started/prerequisites)
|
||||
- [Building from source](/getting-started/building-from-source)
|
||||
- [Internationalization (i18n)](/getting-started/internationalization)
|
||||
- [CORS](/getting-started/cors)
|
||||
- [Configuration](/getting-started/configuration)
|
||||
- [Navigation](/getting-started/navigation)
|
||||
- [Docker](/getting-started/docker)
|
||||
39
docs/getting-started/building-from-source.md
Normal file
39
docs/getting-started/building-from-source.md
Normal file
@ -0,0 +1,39 @@
|
||||
---
|
||||
---
|
||||
|
||||
# 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 the project has compiled.
|
||||
|
||||
## Proxy settings
|
||||
|
||||
The Content App provides a proxy configuration for a local development server that allows you to address specific scenarios with CORS and a 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 the "npm start" script.
|
||||
You must restart the application every time you change its settings.
|
||||
</p>
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
143
docs/getting-started/configuration.md
Normal file
143
docs/getting-started/configuration.md
Normal file
@ -0,0 +1,143 @@
|
||||
---
|
||||
---
|
||||
|
||||
# Configuration
|
||||
|
||||
The Alfresco Content Application provides support for the global settings file `app.config.json` that you can use to customize the behavior of the Content Application 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 a development environment:
|
||||
|
||||
```json
|
||||
{
|
||||
"ecmHost": "http://{hostname}{:port}",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
The configuration above assumes you are running ACS and the Alfresco Content Application 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 Alfresco Content Application 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 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 the 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/core/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/core/app-config.service.md" target="_blank">AppConfigService</a> documentation to get more details on Application Configuration features and API's available.
|
||||
</p>
|
||||
27
docs/getting-started/cors.md
Normal file
27
docs/getting-started/cors.md
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
---
|
||||
|
||||
# CORS
|
||||
|
||||
The Alfresco Content Application 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 an 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
|
||||
|
||||
For the Chrome browser, you can use 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.
|
||||
Note, the page must be reloaded every time you change the CORS settings.
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Using CORS](https://www.html5rocks.com/en/tutorials/cors/)
|
||||
42
docs/getting-started/docker.md
Normal file
42
docs/getting-started/docker.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
---
|
||||
|
||||
# Docker
|
||||
|
||||
The ACA comes with the ACS 6.0 Community Edition preconfigured.
|
||||
The application runs in two 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.
|
||||
134
docs/getting-started/internationalization.md
Normal file
134
docs/getting-started/internationalization.md
Normal file
@ -0,0 +1,134 @@
|
||||
---
|
||||
---
|
||||
|
||||
# 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 default language is English, however the current browser language is taken as the default one automatically when the application starts.
|
||||
|
||||
## User-defined language
|
||||
|
||||
You can allow users to set custom languages that are saved to their preferences.
|
||||
The main application menu already has the [ADF Language Menu](https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/core/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 here: `/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 language, for instance, a "de.json" for "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 the 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 when the project builds.
|
||||
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/master/docs/core/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 that was shipped with 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,
|
||||
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
166
docs/getting-started/navigation.md
Normal file
166
docs/getting-started/navigation.md
Normal file
@ -0,0 +1,166 @@
|
||||
---
|
||||
---
|
||||
|
||||
# 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)](/getting-started/internationalization) 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 custom 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](/#document-list-layout) section.
|
||||
17
docs/getting-started/prerequisites.md
Normal file
17
docs/getting-started/prerequisites.md
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
---
|
||||
|
||||
# Prerequisites
|
||||
|
||||
This application uses the latest releases from Alfresco:
|
||||
|
||||
- [Alfresco ADF (2.5.0)](https://community.alfresco.com/community/application-development-framework/pages/get-started)
|
||||
- [Alfresco Content Services (6.0)](https://www.alfresco.com/platform/content-services-ecm)
|
||||
or [Alfresco Community Edition (6.0 - General Release: 201806)](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.
|
||||
@ -22,15 +22,15 @@
|
||||
},
|
||||
{
|
||||
title: 'Getting Started',
|
||||
path: 'getting-started'
|
||||
path: '/getting-started/'
|
||||
},
|
||||
{
|
||||
title: 'Extending',
|
||||
path: 'extending'
|
||||
path: '/extending'
|
||||
},
|
||||
{
|
||||
title: 'Get Help',
|
||||
path: 'help'
|
||||
path: '/help'
|
||||
}
|
||||
],
|
||||
icons: [
|
||||
|
||||
19
docs/toc.md
19
docs/toc.md
@ -10,17 +10,14 @@
|
||||
- [Version Manager](/#version-manager)
|
||||
- [Search results](/#search-results)
|
||||
- [How to contribute](/#how-to-contribute)
|
||||
- [Getting started](/getting-started)
|
||||
- [Prerequisites](/getting-started#prerequisites)
|
||||
- [Building from source](/getting-started#building-from-source)
|
||||
- [Internationalization (i18n)](/getting-started#internationalization-i18n)
|
||||
- [CORS](/getting-started#cors)
|
||||
- [Configuration](/getting-started#configuration)
|
||||
- [Server settings](/getting-started#server-settings)
|
||||
- [Application settings](/getting-started#application-settings)
|
||||
- [Your custom settings](/getting-started#your-custom-settings)
|
||||
- [Navigation](/getting-started#navigation)
|
||||
- [Docker](/getting-started#docker)
|
||||
- [Getting started](/getting-started/)
|
||||
- [Prerequisites](/getting-started/prerequisites)
|
||||
- [Building from source](/getting-started/building-from-source)
|
||||
- [Internationalization (i18n)](/getting-started/internationalization)
|
||||
- [CORS](/getting-started/cors)
|
||||
- [Configuration](/getting-started/configuration)
|
||||
- [Navigation](/getting-started/navigation)
|
||||
- [Docker](/getting-started/docker)
|
||||
- [Extending](/extending)
|
||||
- [Format](/extending#format)
|
||||
- [Schema](/extending#schema)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user