[ADF-1159] Fix misspellings in .md files (#2124)

This commit is contained in:
Adina Parpalita 2017-07-25 11:35:32 +03:00 committed by Eugenio Romano
parent 4fd8bfb875
commit 92e30c2fa3
25 changed files with 230 additions and 230 deletions

View File

@ -4,7 +4,7 @@ The web client that we are building with the application development framework w
So we need to tell the Alfresco server that any request that comes in from this custom web client should be allowed access
to the Content Repository. This is done by enabling CORS.
If you are experiencing this kind of problem you can follow **one of the following**:
If you are experiencing this kind of problem, see **one of the following**:
1. [Configure Webpack Proxy](#configure-webpack-proxy)
2. [Configure angular-cli Proxy](#configure-angular-cli-proxy)
@ -13,13 +13,13 @@ If you are experiencing this kind of problem you can follow **one of the follow
# Configure Webpack Proxy
If you are using a project created with the [Yeoman Generator](https://github.com/Alfresco/generator-ng2-alfresco-app) or the demo shell >=1.6.0 you have already out of the box in your `config/webpack.common.js` the following configuration.
Say we have an app running on http://localhost:3000/ and we want all calls redirect with the following strategy:
If you are using a project created with the [Yeoman Generator](https://github.com/Alfresco/generator-ng2-alfresco-app) or the demo shell >=1.6.0, you have already out of the box in your `config/webpack.common.js` the following configuration.
Say we have an app running on http://localhost:3000/ and we want to redirect all calls with the following strategy:
* Content service http://localhost:8080/ redirect to -> http://localhost:3000/ecm/
* Process service http://localhost:9999/ redirect to -> http://localhost:3000/bpm/
* Content Service http://localhost:8080/ redirect to -> http://localhost:3000/ecm/
* Process Service http://localhost:9999/ redirect to -> http://localhost:3000/bpm/
Open the file `config/webpack.common.js` find the `devServer` section and add the content:
Open the `config/webpack.common.js` file, find the `devServer` section and add the content:
```javascript
devServer: {
@ -55,18 +55,18 @@ devServer: {
```
Notes:
- With differents configuration of webpack the `devServer` properties could be in other webpack files. Search in your configuration
- With different configuration of webpack the `devServer` properties could be in other webpack files. Search in your configuration files
- If you are runnign the App, content service or process service on different ports change the ports accordingly your local configuration.
- If you are running the App, Content Service or Process Service on different ports change the ports accordingly in your local configuration.
For further details about how to configure a webpack proxy please refer to the [official documentation](https://webpack.js.org/configuration/dev-server/#devserver-proxy).
# Configure angular-cli Proxy
Say we have a app running on http://localhost:3000/ and we want redirect all the calls with the following strategy:
Say we have an app running on http://localhost:3000/ and we want to redirect all the calls with the following strategy:
* Content service http://localhost:8080/ redirect to -> http://localhost:3000/ecm/
* Process service http://localhost:9999/ redirect to -> http://localhost:3000/bpm/
* Content Service http://localhost:8080/ redirect to -> http://localhost:3000/ecm/
* Process Service http://localhost:9999/ redirect to -> http://localhost:3000/bpm/
Create a file next to projects `package.json` call it `proxy.conf.json` with the content:
Create a file next to project's `package.json`, call it `proxy.conf.json` and add the following content:
```javascript
{
@ -93,7 +93,7 @@ Create a file next to projects `package.json` call it `proxy.conf.json` with the
}
```
Note if you are running the App, content service or process service on different ports change the ports accordingly your local configuration.
Note if you are running the App, Content Service or Process Service on different ports change the ports accordingly in your local configuration.
For further details about how to configure a webpack proxy please refer to the [official documentation](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md).
@ -104,7 +104,7 @@ For further details about how to configure a webpack proxy please refer to the [
Most Linux distributions will come with nginx available to install via your
package manager and on Mac OS you can use [Homebrew](http://brew.sh/).
If you want to install manually however you can follow the instructions on the
If you want to install manually however, you can follow the instructions on the
[download page](http://nginx.org/en/download.html). See also the specific information for
[windows users](http://nginx.org/en/docs/windows.html).
@ -122,24 +122,24 @@ This will host Activiti, Alfresco and the app dev framework under the same origi
* ECM : http://localhost:8888/alfresco/
* BPM : http://localhost:8888/activiti/
To make everything work, you have to change the address of the ECM and BPM. In the demo app you can do that clicking on the top right settings menu and change the bottom left options: *ECM host* and *BPM host*.
To make everything work, you should change the address of the ECM and BPM. In the demo app you can do that by clicking on the top right settings menu and change the bottom left options: *ECM host* and *BPM host*.
This configuration assumes few things:
This configuration assumes a few things:
* Port mapping:
* nginx entry point: 0.0.0.0:8888
* Demo Shell: locathost:3000
* Alfresco: locathost:8080
* Activiti: locathost:9999
* Demo Shell: localhost:3000
* Alfresco: localhost:8080
* Activiti: localhost:9999
All those values can be modified at their respective `location` directive on the [nginx.conf](/nginx.conf) file.
If you want to know more on how to install and configure nginx to work with the Application Development Framework can be found [here](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy)
If you want to know more on how to install and configure nginx to work with the Application Development Framework, information can be found [here](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy)
# Enable CORS in CS and PS
If you want completely enable CORS call on your Content service and Process service, plese refer to the following alfresco documents:
If you want to completely enable CORS calls on your Content Service and Process Service, please refer to the following Alfresco documents:
* [Enable Cross Origin Resource Sharing (CORS) in Alfresco Process Services](http://docs.alfresco.com/process-services1.6/topics/enabling-cors.html)
@ -148,12 +148,12 @@ If you want completely enable CORS call on your Content service and Process serv
This is the easiest way, add the [enablecors](https://artifacts.alfresco.com/nexus/service/local/repositories/releases/content/org/alfresco/enablecors/1.0/enablecors-1.0.jar)
platform module JAR to the *$ALF_INSTALL_DIR/modules/platform* directory and restart the server.
Note. by default the CORS filter that is enabled will allow any origin.
Note. by default, the CORS filter that is enabled will allow any origin.
##Or - Manually update the web.xml file
Or - Manually update the web.xml file
Modify *$ALF_INSTALL_DIR/tomcat/webapps/alfresco/WEB-INF/web.xml* and uncomment the following section and update
`cors.allowOrigin` to `http://localhost:3000`:
`cors.allowOrigin` to `http://localhost:3000` :
```
<filter>

View File

@ -1,7 +1,7 @@
# Browser Support
Browser support and polyfills guide.
Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF framework is based on the following libraries and components:
Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF is based on the following libraries and components:
- Angular 2 (all ADF components)
- Material Design Lite (all ADF components)

View File

@ -2,13 +2,13 @@
## Submitting a Pull Request (PR)
Before you submit please follow the following step:
Before you submit please follow the steps below:
* Search in [GitHub PR](https://github.com/Alfresco/alfresco-ng2-components/pulls) for an open or closed PR
that could solve or already solve your issue.
that could solve or already solves your issue.
* Search in the [GitHub release history](https://github.com/Alfresco/alfresco-ng2-components/releases) if your
issue has already been solved in a new version of ADF.
* Fork our repository [if you don't know how to do it read this GitHub document](https://help.github.com/articles/creating-a-pull-request-from-a-fork/)
* Fork our repository - [if you don't know how to do it read this GitHub document](https://help.github.com/articles/creating-a-pull-request-from-a-fork/)
* Make your changes in a new git branch starting from development and following the [naming convention](https://github.com/Alfresco/alfresco-ng2-components/wiki/Branching-Strategy)
```shell
@ -16,7 +16,7 @@ Before you submit please follow the following step:
```
* Create your PR **including appropriate test cases** following the [code contribution acceptance criteria](https://github.com/Alfresco/alfresco-ng2-components/wiki/Code-contribution-acceptance-criteria)
* Run the test and make sure they are green and please don't comment out or exclude the already present test
* Run the tests and make sure they are green. Please don't comment out or exclude the already existing tests
* Commit your change using the [commit format message good practice](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
* Push your branch to GitHub:
@ -27,7 +27,7 @@ Before you submit please follow the following step:
* In GitHub, send a pull request to `development`.
* If we suggest changes then:
* Make the required updates.
* Re-run the test.
* Re-run the tests.
* Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
```shell
@ -36,14 +36,14 @@ Before you submit please follow the following step:
git rebase development -i
git push -f
```
Note: If you need more information about how to [sync your fork](https://help.github.com/articles/syncing-a-fork/)
Note: If you need more information about how to sync your fork, see [here](https://help.github.com/articles/syncing-a-fork/)
## Code style
The code style in the ADF code follow the [Angular style guide](https://angular.io/guide/styleguide) plus some internal rules.
you dont have to worry too much about out those rules because are automatically checked by tslint/codelyzer/adf-rules.
If your code is not complaint to one of this rules you will receive and error when you build the project with some help on how to fix it.
The code style in the ADF code follows the [Angular style guide](https://angular.io/guide/styleguide) plus some internal rules.
You dont have to worry too much about those rules because they are automatically checked by tslint/codelyzer/adf-rules.
If your code is not compliant to one of these rules you will receive an error when you build the project with some help on how to fix it.
The ADF-Rules :
* File name component/directive can not to start with Alfresco/Activiti/adf this rules is to help developer to find files easily
* Class name can not to start with Alfresco/Activiti/adf for the same reason above
* scss is mandatory and the class have to start with the adf- prefix
* File name component/directive cannot start with Alfresco/Activiti/adf - this rule is to help developers find files easily
* Class names cannot start with Alfresco/Activiti/adf for the same reason as above
* scss is mandatory and the classes have to have the adf- prefix

View File

@ -18,7 +18,7 @@ However, there are use-cases that Share does not fit very well, such as:
This is where this application development framework comes into play, it can be used to create exactly the user interface
(i.e. web client) that the requirements demand.
The framework consists of a number of components that can be combined together to form a customized content management application.
The framework consists of several components that can be combined to form a customized content management application.
Here is a list of some of the available web components:
- [Core library](ng2-components/ng2-alfresco-core/README.md)
@ -36,6 +36,6 @@ An architecture overview looks like this:
<img title="alfresco-ng2-components-architecture" alt='alfresco' src='assets/alfresco-app-dev-framework-architecture.png'></img>
</p>
Here we can also see that there is an Alfresco JavaScript framework in use that wraps the Alfresco REST API. To make things easier for the client developer.
Here we can also see that there is an Alfresco JavaScript framework in use that wraps the Alfresco REST API, to make things easier for the client developer.

View File

@ -1,11 +1,11 @@
# ADF Demo Application
Please note that this application is not an official product, but a testing and demo application to showcase complex interactions for ADF components.
Please note that this application is not an official product, but a testing and demo application to showcase complex interactions of ADF components.
## Installing
To correctly use this demo check that on your machine is running [Node](https://nodejs.org/en/) version 5.x.x or higher.
To correctly use this demo check that on your machine you have [Node](https://nodejs.org/en/) version 5.x.x or higher.
```sh
git clone https://github.com/Alfresco/alfresco-ng2-components.git
@ -15,7 +15,7 @@ npm install
## Proxy settings and CORS
To simplify development and reduce the time to get started the application features the following Proxy settings:
To simplify development and reduce the time to get the application started, we have the following Proxy settings:
- **http://localhost:3000/ecm** is mapped to **http://localhost:8080**
- **http://localhost:3000/bpm** is mapped to **http://localhost:9999**
@ -82,18 +82,18 @@ npm run start:dist
```
This command builds project in `production` mode.
All output is placed to `dist` folder and can be served your preferred web server.
All output is placed to `dist` folder and can be served to your preferred web server.
You should need no additional files outside the `dist` folder.
### Important notes
By default demo application is configured to use [wsrv](https://www.npmjs.com/package/wsrv) tool (lightweight web server)
to serve production build output. It will be running at `0.0.0.0` address with port `3000` and allow you accessing your application
via network. However you can use any web server of your choice in production.
to serve production build output. It will be running at `0.0.0.0` address with port `3000` and allow you to access your application
via network. However, you can use any web server of your choice in production.
## Development branch build
If you want to run the demo shell with the latest change from the development branch, use the following command from the /script folder:
If you want to run the demo shell with the latest changes from the development branch, use the following command from the /script folder:
```sh
./npm-clean.sh

View File

@ -27,9 +27,9 @@
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
necessary configurations, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
> If you plan to use this component with projects generated by Angular CLI, you can read more in [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
@ -53,14 +53,14 @@ The component shows the list of all the available reports
| --- | --- | --- | --- | --- |
| appId | string | optional | | The application id |
| layoutType | string | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
| selectFirst | boolean | optional | false | Change the value to true if you want select the first item in the list as default|
| selectFirst | boolean | optional | false | Change the value to true if you want to select the first item in the list as default|
### Events
| Name | Description |
| --- | --- |
| onSuccess | The event is emitted when the report list are loaded |
| onError | The event is emitted when an error occur during the loading |
| onSuccess | The event is emitted when the report list is loaded |
| onError | The event is emitted when an error occurs during the loading |
| reportClick | The event is emitted when the report in the list is selected |
## Activiti Analytics Component
@ -100,13 +100,13 @@ You can also hide chart parameters UI by setting the `hideParameters` to `true`:
| Name | Description |
| --- | --- |
| onSuccess | The event is emitted when the report parameters are loaded |
| onError | The event is emitted when an error occur during the loading |
| onError | The event is emitted when an error occurs during the loading |
| reportSaved | The event is emitted when a report is saved |
| reportDeleted | The event is emitted when a report is deleted |
## Analytics Generator Component
The component generate and show the charts
The component generates and shows the charts
```html
<adf-analytics-generator
@ -127,11 +127,11 @@ The component generate and show the charts
| Name | Description |
| --- | --- |
| onSuccess | Raised when the charts are loaded |
| onError | Raised when an error occur during the loading |
| onError | Raised when an error occurs during the loading |
## Build from sources
You can build component from sources with the following commands:
You can build the component from sources with the following commands:
```sh
npm install

View File

@ -21,9 +21,9 @@
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
necessary configurations, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
> If you plan to use this component with projects generated by Angular CLI, you can read more in [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
@ -41,7 +41,7 @@ This component shows the diagram of a process.
</adf-diagram>
```
Or below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).
The below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).
```html
<adf-diagram
@ -53,7 +53,7 @@ Or below component shows the diagram of a running process instance with the acti
| Name | Type | Description |
| --- | --- | -- |
| metricPercentages | any | The array that contains the percentage of the time for each element |
| metricPercentages | any | The array that contains the percentage of time for each element |
| processInstanceId | any | |
| metricColor | any | The array that contains the color for each element |
| metricType | any | The string that specifies the metric type |
@ -64,12 +64,12 @@ Or below component shows the diagram of a running process instance with the acti
| Name | Description |
| --- | --- |
| onSuccess | Raised when the diagrams element are loaded |
| onError | Raised when the an error occur during the loading |
| onSuccess | Raised when the diagrams elements are loaded |
| onError | Raised when an error occurs during loading |
## Build from sources
You can build component from sources with the following commands:
You can build the component from sources with the following commands:
```sh
npm install

View File

@ -58,7 +58,7 @@ See it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
> If you plan to use this component with projects generated by Angular CLI, you can read more in [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
@ -133,7 +133,7 @@ The param nameNode is optional.
**Display form definition by ECM nodeId:**
In this case the metadata of the node are showed in an activiti Form,
In this case the metadata of the node are shown in an activiti Form,
and store the form field as metadata. The param nameNode is optional.
```html
@ -153,11 +153,11 @@ The recommended set of properties can be found in the following table:
| --- | --- | --- | --- |
| taskId | string | | Task id to fetch corresponding form and values. |
| formId | string | | The id of the form definition to load and display with custom values. |
| formName | string | | Name of hte form definition to load and display with custom values. |
| formName | string | | Name of the form definition to load and display with custom values. |
| data | FormValues | | Custom form values map to be used with the rendered form. |
| showTitle | boolean | true | Toggle rendering of the form title. |
| showCompleteButton | boolean | true | Toggle rendering of the `Complete` outcome button. |
| disableCompleteButton | boolean | false | The `Complete` outcome button is showed but it will be disabled. |
| disableCompleteButton | boolean | false | The `Complete` outcome button is shown but it will be disabled. |
| showSaveButton | boolean | true | Toggle rendering of the `Save` outcome button. |
| readOnly | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
| showRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. |
@ -183,7 +183,7 @@ The recommended set of properties can be found in the following table:
| formLoaded | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is loaded or reloaded. |
| formSaved | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Save` or custom outcomes. |
| formCompleted | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Complete` outcome. |
| formDataRefreshed | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form values are refreshed due a data property change |
| formDataRefreshed | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form values are refreshed due to a data property change |
| executeOutcome | [FormOutcomeEvent](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome-event.model.ts) | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
| onError | any | Invoked at any error |
@ -394,7 +394,7 @@ The result should be as following:
### Listen all form Events
If you want listen all the events fired the form you can subscribe to this Subject :
If you want to listen all the events fired in the form you can subscribe to this Subject :
```ts
formService.formEvents.subscribe((event: Event) => {
@ -410,7 +410,7 @@ formService.formEvents.subscribe((event: Event) => {
## Build from sources
You can build component from sources with the following commands:
You can build the component from sources with the following commands:
```sh
npm install

View File

@ -2,13 +2,13 @@
_Note: it is assumed you are familiar with Alfresco Activiti form definition structure._
- How components and widgets are rendred on a Form
- How components and widgets are rendered on a Form
- Replacing default form widgets with custom components
- Replacing custom stencils with custom components
## How components and widgets are rendred on a Form
## How components and widgets are rendered on a Form
All form field editors (aka widgets) on a Form are rendered by means of `FormFieldComponent`
that takes an instance of a `FormFieldModel`:
@ -35,7 +35,7 @@ It can be either a predefined component type or a dynamically evaluated based on
#### Static component mapping
You can (re)map fields like following:
You can (re)map fields like in the following:
```ts
let customResolver: ComponentTypeResolver = () => CustomWidgetComponent;
@ -112,7 +112,7 @@ import { WidgetComponent } from 'ng2-activiti-form';
export class CustomEditorComponent extends WidgetComponent {}
```
Now you will need adding it to the application module or any custom module that is imported into the application one:
Now you will need to add it to the application module or any custom module that is imported into the application one:
```ts
import { NgModule } from '@angular/core';
@ -128,8 +128,8 @@ export class CustomEditorsModule {}
Every custom widget should be added into all three module collections: `declarations`, `exports` and `entryComponents`.
If you decided storing custom widgets in a separate dedicated module (and optionally as separate redistributable library)
don't forget importing it into your main application one:
If you decided to store custom widgets in a separate dedicated module (and optionally as separate redistributable library)
don't forget to import it into your main application one:
```ts
@NgModule({
@ -194,7 +194,7 @@ Once wired with a new task it should look like the following within Alfresco Act
### Creating custom widget
If you load previously created task into ADF `<actiiti-form>` component you will see something like the following:
If you load previously created task into ADF `<activiti-form>` component you will see something like the following:
![adf stencil](assets/adf-stencil-01.png)
@ -256,6 +256,6 @@ export class MyView {
}
```
At the runtime you should now see your custom Angular 2 component rendered in place of the stencils:
At runtime you should now see your custom Angular 2 component rendered in place of the stencils:
![adf stencil runtime](assets/adf-stencil-02.png)

View File

@ -105,7 +105,7 @@ class SampleClass1 implements OnInit {
### Mapping template with component class
In order to map **form runtime template** with the corresponding component class
you will need registering both parts with `adf.registerComponent(identifier, class)` api:
you will need to register both parts with `adf.registerComponent(identifier, class)` api:
```js
if (adf) {

View File

@ -105,7 +105,7 @@ Process filters are a collection of criteria used to filter process instances, w
by users. This component displays a list of available filters and allows the user to select any given
filter as the active filter.
The most common usage is in driving a process instance list in order to allow the user to choose which
The most common usage is in driving a process instance list to allow the user to choose which
process instances are displayed in the list.
```html
@ -129,7 +129,7 @@ If both `appId` and `appName` are specified then `appName` will take precedence
| Name | Description |
| --- | --- |
| onSuccess | Raised when the list of filters hase been successfully loaded from the server |
| onSuccess | Raised when the list of filters has been successfully loaded from the server |
| onError | Raised when an error occurs |
| filterClick | Raised when the user selects a filter from the list |
@ -278,7 +278,7 @@ Lists both the active and completed tasks associated with a particular process i
## Process Instance Comments component
Displays comments associated with a particular process instances and allows the user to add new comments
Displays comments associated with a particular process instance and allows the user to add new comments
```html
<adf-process-instance-comments
@ -342,8 +342,8 @@ This component displays Upload Component(Drag and Click) to upload the attachmen
| Name | Description |
| --- | --- |
| error | Raised when the error occured while creating/uploading the attachment by the user from within the component |
| success | Raised when the attachement created/uploaded successfully from within the component |
| error | Raised when the error occurred while creating/uploading the attachment by the user from within the component |
| success | Raised when the attachment created/uploaded successfully from within the component |
## Build from sources

View File

@ -199,7 +199,7 @@ This can be changed by adding the following custom html template:
</adf-task-details>
```
Note that can put any HTML content as part of the template, includuing other Angualr components.
Note that can put any HTML content as part of the template, including other Angular components.
## Activiti Apps Component
@ -226,7 +226,7 @@ The component shows all the available apps.
### How filter the activiti apps
If you want show some specific apps you can specify them through the filtersAppId parameters
If you want to show some specific apps you can specify them through the filtersAppId parameters
```html
<adf-apps
@ -276,7 +276,7 @@ If both `appId` and `appName` are specified then `appName` will take precedence
| Name | Description |
| --- | --- |
| filterClick | Raised when the filter in the list is clicked |
| filterClick | Raised when the filter in the list is clicked |
| onSuccess | Raised when the list is loaded |
| onError | Raised if there is an error during the loading |
@ -399,13 +399,13 @@ This component displays Upload Component(Drag and Click) to upload the attachmen
| Name | Description |
| --- | --- |
| error | Raised when the error occured while creating/uploading the attachment by the user from within the component |
| success | Raised when the attachement created/uploaded successfully from within the component |
| error | Raised when the error occurred while creating/uploading the attachment by the user from within the component |
| success | Raised when the attachment created/uploaded successfully from within the component |
## Activiti Task Header
The component shows all the information related to a task.
The purpose of the component is populate the local variable called `properties` (array of CardViewModel), with all the information that we want display.
The purpose of the component is to populate the local variable called `properties` (array of CardViewModel), with all the information that we want to display.
```html
<adf-task-header

View File

@ -166,7 +166,7 @@ onUploadFiles(e: CustomEvent) {
Please note that event will be raised only if valid [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) were dropped onto the decorated element.
The `upload-files` event is cancellable, so you can stop propagation of the drop event to uppper levels in case it has been already handled by your code:
The `upload-files` event is cancellable, so you can stop propagation of the drop event to upper levels in case it has been already handled by your code:
```ts
onUploadFiles(e: CustomEvent) {
@ -264,7 +264,7 @@ api.nodes.addNode('-root-', body, {});
The `AppConfigService` service provides support for loading and accessing global application configuration settings that you store on the server side in the form of a JSON file.
> You may need this service when deploying your ADF-based application to production servers.
> There can be more than one server running web apps with different settings, like different addresses for Alfreco Content/Process services.
> There can be more than one server running web apps with different settings, like different addresses for Alfresco Content/Process services.
> Or there is a need to change global settings for all the clients.
The service is already pre-configured to look for the "app.config.json" file in the application root address.
@ -326,7 +326,7 @@ export class AppComponent {
}
```
You custom components can also benefit from the `AppConfigService`,
Your custom components can also benefit from the `AppConfigService`,
you can put an unlimited number of settings and optionally a nested JSON hierarchy.
### Different configurations based on environment settings
@ -423,7 +423,7 @@ class AppComponent {
As soon as you assign the storage prefix all settings that you get or set via the `UserPreferencesService` will be saved to dedicated profile.
You can import the service in your controller an use its APIs like below:
You can import the service in your controller and use its APIs like below:
```ts
@Component({...})
@ -449,7 +449,7 @@ Known properties:
## Notification Service
The Notification Service is implemented on top of the Angular 2 Material Design snackbar.
Use this service to show a notification message, and optionaly get feedback from it.
Use this service to show a notification message, and optionally get feedback from it.
```ts
import { NotificationService } from 'ng2-alfresco-core';
@ -521,7 +521,7 @@ export class MyComponent implements OnInit {
## Accordion Component
The component provide a way to easy create an accordion menu. You can customize the header and the icon.
The component provides a way to easily create an accordion menu. You can customize the header and the icon.
```html
<adf-accordion>
@ -610,7 +610,7 @@ The CardViewComponent is a configurable property list renderer. You define the p
### Editing
The card view can optionally allow its properties to be edited. You can control the editing of the properties in two level.
- **global level** - *via the editable paramter of the card-view.component*
- **global level** - *via the editable parameter of the card-view.component*
- **property level** - *in each property via the editable attribute*
If you set the global editable parameter to false, no properties can be edited regardless of what is set inside the property.
@ -685,7 +685,7 @@ const textItemProperty = new CardViewTextItemModel(options);
| default | any | --- | The default value to render in case the value is empty |
| displayValue* | string | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
| clickable | boolean | false | Whether the property clikable or not |
| clickable | boolean | false | Whether the property clickable or not |
| multiline | string | false | Single or multiline text |
### Card Map Item
@ -758,7 +758,7 @@ The type is a **hyphen-separated-lowercase-words** string (just like how I wrote
#### 2. Define the component for the custom type
As discussed in the previous step the only important thing here is the naming of your component class ( **CardViewStarDateItemComponent**). Since the selector is not used in this case, you can give any selector name to it, but it make sense to follow the angular standards.
As discussed in the previous step the only important thing here is the naming of your component class ( **CardViewStarDateItemComponent**). Since the selector is not used in this case, you can give any selector name to it, but it makes sense to follow the angular standards.
```js
@Component({

View File

@ -156,10 +156,10 @@ export class DataTableDemo {
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| actions | boolean | false | Toggles data actions column |
| actionsPosition | string (left\|right) | right | Position of the actions dropdown menu. |
| fallbackThumbnail | string | | Fallback image for row ehre thubnail is missing|
| fallbackThumbnail | string | | Fallback image for row where thumbnail is missing|
| contextMenu | boolean | false | Toggles custom context menu for the component |
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| loading | boolean | false | Flag that indicate if the datable is in loading state and need to show the loading template. Read the documentation above to know how to configure a loading template |
| loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template |
| showHeader | boolean | true | Toggles header visibility |
| selection | DataRow[] | [] | Contains selected rows |
@ -220,7 +220,7 @@ onRowClick(event) {
### Custom Empty content template
You can add a template that will be showed when there are no result in your datatable:
You can add a template that will be shown when there are no results in your datatable:
```html
<adf-datatable
@ -247,7 +247,7 @@ You can add a template that will be showed when there are no result in your data
### Default Empty content template
You can use the empty list component if you want show the default ADF empty template:
You can use the empty list component if you want to show the default ADF empty template:
```html
<adf-datatable
@ -263,7 +263,7 @@ You can use the empty list component if you want show the default ADF empty temp
<adf-empty-list
[emptyListImageUrl]="'my-background-image.svg'"
[emptyMsg]="'My custom msg'"
[dragDropMsg]="'My drag and drom msg'"
[dragDropMsg]="'My drag and drop msg'"
[additionalMsg]="'My additional msg'">
</adf-empty-list>
@ -281,7 +281,7 @@ You can use the empty list component if you want show the default ADF empty temp
### Loading content template
You can add a template that will be showed during the loading of your data:
You can add a template that will be shown during the loading of your data:
```html
<adf-datatable
@ -319,7 +319,7 @@ Note: the `<loading-content-template>` and `<no-content-template>` can be used t
### Column Templates
It is possible assigning a custom column template like the following:
It is possible to assign a custom column template like the following:
```html
<adf-datatable ...>
@ -442,7 +442,7 @@ _This event is cancellable, you can use `event.preventDefault()` to prevent defa
DataTable will automatically render provided menu items.
_Please refer to [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core)
documentation for more details on context actions format and behavior._
documentation for more details on context actions format and behaviour._
#### showRowActionsMenu event
@ -508,7 +508,7 @@ onExecuteRowAction(event: DataRowActionEvent) {
![](docs/assets/datatable-actions-console.png)
Developers are allowed putting any payloads as row actions.
Developers are allowed to use any payloads as row actions.
The only requirement for the objects is having `title` property.
Once corresponding action is clicked in the dropdown menu DataTable invokes `executeRowAction` event
@ -554,7 +554,7 @@ interface DataColumn {
}
```
DataTable provides [ObjectDataTableAdapter](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts) out-of-box.
DataTable provides [ObjectDataTableAdapter](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts) out-of-the-box.
This is a simple data adapter implementation that binds to object arrays
and turns object fields into columns:
@ -585,7 +585,7 @@ let data = new ObjectDataTableAdapter(
## Generate schema
Is possible to auto generate your schema if you have only the data row
It is possible to auto generate your schema if you have only the data row
```ts
let data = [
@ -616,7 +616,7 @@ let schema = ObjectDataTableAdapter.generateSchema(data);
## Pagination Component
The pagination object is a generic component to paginate component. The Alfresco API are paginated and returns a Pagination object. You can use the pagination object to feed the pagination component and then listen to the event which return the current pagination and query again the API with the options choose by the user.
The pagination object is a generic component to paginate component. The Alfresco API are paginated and return a Pagination object. You can use the pagination object to feed the pagination component and then listen to the event which returns the current pagination and query again the API with the options chosen by the user.
![DataTable demo](docs/assets/pagination-demo.png)
@ -624,9 +624,9 @@ The pagination object is a generic component to paginate component. The Alfresco
| Name | Type | Default | Description
| --- | --- | --- | --- |
| supportedPageSizes | numer[] | [5, 10, 20, 50, 100] | This array describe the set of options showed in the pick list |
| maxItems | boolean | false | Max number of element showed per page. If you pick another size from the pick list this option will be overwritten |
| pagination | Pagination | {count: 0, totalItems: 0, skipCount: 0, maxItems: 20 , hasMoreItems: true} | The Alfresco Api return a pagination object, you can use it to feed the pagination component, or create your own. |
| supportedPageSizes | numer[] | [5, 10, 20, 50, 100] | This array describes the set of options shown in the pick list |
| maxItems | boolean | false | Max number of elements shown per page. If you pick another size from the pick list this option will be overwritten |
| pagination | Pagination | {count: 0, totalItems: 0, skipCount: 0, maxItems: 20 , hasMoreItems: true} | The Alfresco Api returns a pagination object, you can use it to feed the pagination component, or create your own. |
### Events
@ -634,7 +634,7 @@ The pagination object is a generic component to paginate component. The Alfresco
| --- | --- |
| changePageSize | Emitted when user picks one of the options from the pick list |
| nextPage | Emitted when user clicks next page button |
| prevPage | Emitted when user clicks prev page button |
| prevPage | Emitted when user clicks previous page button |
All the events carry with them the current pagination object.

View File

@ -85,7 +85,7 @@ npm install ng2-alfresco-documentlist
### Properties
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They can not be used together, choose the one that suites more your use case.
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, choose the one that suites more your use case.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
@ -95,8 +95,8 @@ The properties currentFolderId, folderNode and node are the entry initialization
| rowStyleClass | string | | The CSS class to apply to every row |
| currentFolderId | string | null | Initial node ID of displayed folder. Can be `-root-`, `-shared-`, `-my-`, or a fixed node ID |
| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | null | Currently displayed folder node |
| permissionsStyle | [PermissionStyleModel[]](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts) | null | with this array you can define different styles depending from the permission of the user on that node. The PermissionStyleModel allow you to select also if you want apply the style only on the file or folder nodes. With PermissionStyleModel.permission accept the following values [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) [see more](#custom-row-permissions-style). |
| node | [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodePaging.md) | null | Document list will show all the node contained in the NodePaging entity |
| permissionsStyle | [PermissionStyleModel[]](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts) | null | with this array you can define different styles depending on the permission of the user on that node. The PermissionStyleModel allows you to select also if you want to apply the style only on the file or folder nodes. PermissionStyleModel.permission accepts the following values [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) [see more](#custom-row-permissions-style). |
| node | [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodePaging.md) | null | Document list will show all the nodes contained in the NodePaging entity |
| navigate | boolean | true | Toggles navigation to folder content or file preview |
| loading | boolean | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. |
| navigationMode | string (click,dblclick) | dblclick | User interaction for folder navigation or file preview |
@ -171,11 +171,11 @@ You can set current folder path by assigning a value for `currentFolderId` prope
It can be either one of the well-known locations as **-root-**, **-shared-** or **-my-** or a node ID (guid).
There may be scenarios when it is needed to set default path based on relative string value rather than node ID.
For example when folder name or path is static but it's underlying ID is not (i.e. created manually by admin).
In this case you can use `alfresco-js-api` to get node details based on it's relative path.
For example when folder name or path is static but its underlying ID is not (i.e. created manually by admin).
In this case you can use `alfresco-js-api` to get node details based on its relative path.
Let's try setting default folder to `/Sites/swsdp/documentLibrary` without knowing it's ID beforehand.
For the sake of simplicity example below shows only main points you may need paying attention to:
For the sake of simplicity example below shows only main points you may need to pay attention to:
```ts
import { ChangeDetectorRef } from '@angular/core';
@ -288,7 +288,7 @@ export class MyAppComponent {
}
```
However there may scenarios that require you direct access to DocumentList apis.
However there may be scenarios that require you direct access to DocumentList apis.
You can get reference to the DocumentList instance by means of Angular **Component Interaction** API.
See more details in [Parent calls a ViewChild](https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child)
section of the official docs.
@ -326,7 +326,7 @@ Example above should produce the following browser console output:
![view-child](docs/assets/viewchild.png)
Now you are able accessing DocumentList properties or calling methods directly.
Now you are able to access DocumentList properties or to call methods directly.
```ts
// print currently displayed folder node object to console
@ -359,7 +359,7 @@ DocumentList provides simple breadcrumb element to indicate the current position
| --- | --- | --- |
| target | DocumentListComponent | (optional) DocumentList component to operate with. Upon clicks will instruct the given component to update. |
| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | Active node, builds UI based on `folderNode.path.elements` collection. |
| root | String | (optional) Name of the folder where you want start the breadcrumb. Note the root will always be showed as first element and it will continue to be displayed until you are not in a subfolder of it. |
| root | String | (optional) Name of the folder where you want start the breadcrumb. Note the root will always be shown as first element and it will continue to be displayed until you are not in a subfolder of it. |
### Events
@ -381,7 +381,7 @@ DocumentList provides simple dropdown element to show sites for the current logg
| Name | Returned Type | Description |
| --- | --- | --- |
| change | [SiteModel](https://github.com/Alfresco/alfresco-ng2-components/blob/development/ng2-components/ng2-alfresco-documentlist/src/models/site.model.ts) | emitted when user select a site. When default option is selected an empty model is emitted |
| change | [SiteModel](https://github.com/Alfresco/alfresco-ng2-components/blob/development/ng2-components/ng2-alfresco-documentlist/src/models/site.model.ts) | emitted when user selects a site. When default option is selected an empty model is emitted |
## Menu Actions
@ -528,7 +528,7 @@ For a full list of available `format` values please refer to [DatePipe](https://
### Column Template
It is possible providing custom column/cell template that may contain other Angular components or HTML elmements:
It is possible to provide custom column/cell template that may contain other Angular components or HTML elements:
Every cell in the DataTable component is bound to the dynamic data context containing the following properties:
@ -547,7 +547,7 @@ In order to wire HTML templates with the data context you will need defining a v
</template>
```
The format of naming is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want binding template data context to.
The format of naming is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want to bind template data context to.
Getting a cell value from the underlying DataTableAdapter:
@ -575,7 +575,7 @@ You may want using **row** api to get raw value access.
Use **data** api to get values with post-processing, like datetime/icon conversion._
In the Example below will prepend `Hi!` to each file and folder name in the list:
In the Example below we will prepend `Hi!` to each file and folder name in the list:
```html
<content-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
@ -585,7 +585,7 @@ In the Example below will prepend `Hi!` to each file and folder name in the list
</content-column>
```
In the Example below will add the [ng2-alfresco-tag](https://www.npmjs.com/package/ng2-alfresco-tag) component is integrate in the document list.
In the Example below we will add the [ng2-alfresco-tag](https://www.npmjs.com/package/ng2-alfresco-tag) component is integrate in the document list.
```html
<content-column
@ -610,7 +610,7 @@ Properties:
| `target` | string | | "document" or "folder" |
| `title` | string | | The title of the action as shown in the menu |
| `handler` | string | | System type actions. Can be "delete" or "download" |
| `permission` | string | | Then name of the permission |
| `permission` | string | | The name of the permission |
Events:
@ -620,7 +620,7 @@ Events:
| `permissionEvent` | Emitted when a permission error happens |
DocumentList supports declarative actions for Documents and Folders.
Each action can be bound to either default out-of-box handler, to a custom behavior or to both of them.
Each action can be bound to either default out-of-the-box handler, to a custom behaviour or to both.
You can define both folder and document actions at the same time.
#### Menu actions
@ -693,11 +693,11 @@ will trigger the same `download` action.
##### Delete - System handler combined with custom handler
If you specify both of the **handler="delete"** and your custom **(execute)="myCustomActionAfterDelete($event)"**, your callback will be invoked after a successful delete happened. A successful delete operation happens if there is neither permission error, neither other network related error for the delete operation request. For handling permission errors see the section below.
If you specify both **handler="delete"** and your custom **(execute)="myCustomActionAfterDelete($event)"**, your callback will be invoked after a successful delete happened. A successful delete operation happens if there is neither permission error, nor other network related error for the delete operation request. For handling permission errors see the section below.
##### Delete - Show notification message with no permission
You can show a notification error when the user don't have the right permission to perform the action.
You can show a notification error when the user doesn't have the right permission to perform the action.
The ContentActionComponent provides the event permissionEvent that is raised when the permission specified in the permission property is missing
You can subscribe to this event from your component and use the NotificationService to show a message.
@ -733,7 +733,7 @@ export class MyComponent {
You can easily disable a button when the user doesn't own the permission to perform the action related to the button.
The ContentActionComponent provides the property permission that must contain the permission to check and a property disableWithNoPermission that can be true if
you want see the button disabled.
you want to see the button disabled.
```html
<adf-document-list ...>
@ -809,7 +809,7 @@ Shows the destination chooser dialog for copy and move actions
#### Folder actions
Folder actions have the same declaration as document actions except ```taget="folder"``` attribute value. You can define system, custom or combined handlers as well just as with the document actions.
Folder actions have the same declaration as document actions except ```target="folder"``` attribute value. You can define system, custom or combined handlers as well just as with the document actions.
```html
<adf-document-list ...>
@ -861,7 +861,7 @@ export class MyView {
### Context Menu
DocumentList also provide integration for 'Context Menu Service' from the
DocumentList also provides integration for 'Context Menu Service' from the
[ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) library.
You can automatically turn all menu actions (for the files and folders)
@ -915,8 +915,8 @@ DocumentList emits the following events:
| nodeDblClick | emitted when user double-clicks list node |
| folderChange | emitted once current display folder has changed |
| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
| permissionError | emitted when user is attempting to create a folder via action menu but it doesn't have the permission to do it |
| ready | emitted when the documentList is ready and load all the elements|
| permissionError | emitted when user is attempting to create a folder via action menu without having the permission to do it |
| ready | emitted when the documentList is ready and loads all the elements|
## Advanced usage and customization
@ -1094,9 +1094,9 @@ Now you can declare columns and assign `desktop-only` class where needed:
### Custom row permissions style
You can personalize the style of the row based on the permissions.
The property to valorize is permissionsStyle[]:[PermissionStyleModel[]](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts).
The permissionsStyle array can define different styles depending from the permission of the user on that node.
You can customize the style of the row based on the permissions.
The property to use is permissionsStyle[]:[PermissionStyleModel[]](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts).
The permissionsStyle array can define different styles depending on the permission of the user on that node.
[PermissionStyleModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts)
@ -1127,7 +1127,7 @@ adf-document-list >>> adf-datatable tr.document-list__create {
}
```
If you want to change the style on the folders where the user doesn't have the permission to update it:
If you want to change the style on the folders where the user doesn't have the permission to update:
```ts

View File

@ -65,7 +65,7 @@ Next we propagate the `value` reference to the `<adf-metadata-icons>` component
</data-column>
```
So once rendered our component will automatically has access to entire set of node metadata. Let's build some visualization of the `cm:versionLabel` propery.
So once rendered our component will automatically have access to entire set of node metadata. Let's build some visualization of the `cm:versionLabel` property.
For demonstration purposes we are going to display several icons if underlying node has version `2.0`, and just a plain text version value for all other versions.
@ -86,7 +86,7 @@ Note: For a list of the icons that can be used with `<md-icon>` component please
## Testing component
You will need to enable `versioning` feature for the Document List to be able uploading multiple versions of the file instead of renaming duplicates.
You will need to enable `versioning` feature for the Document List to be able to upload multiple versions of the file instead of renaming duplicates.
Drag and drop any image file to upload it and ensure it has `1.0` displayed in the column:
@ -97,7 +97,7 @@ You should now see icons instead of version label.
![](assets/metadata-03.png)
You can see on the screnshot above that only files with version `2.0` got extra icons.
You can see on the screenshot above that only files with version `2.0` got extra icons.
## Conclusion
@ -129,4 +129,4 @@ export class MetadataIconsComponent {
}
```
You can use this idea to build more complex indication experience based on the actual metdata state.
You can use this idea to build more complex indication experience based on the actual metadata state.

View File

@ -41,7 +41,7 @@ npm install ng2-alfresco-login
## Basic usage
This component allow to authenticate to Alfresco One and Alfresco Activiti.
This component allows to authenticate to Alfresco Content Services and Alfresco Process Services.
**app.component.html**
@ -72,12 +72,12 @@ export class AppComponent {
| Name | Type | Default Value | Description |
| --- | --- | --- | --- |
| providers | string | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
| disableCsrf | boolean | false | To prevent the CSRF Token from been submitted. Only for Activiti call |
| providers | string | ECM | Possible valid values are ECM, BPM or ALL. The default behaviour of this component will log in only in the ECM . If you want to log in in both systems the correct value to use is ALL |
| disableCsrf | boolean | false | To prevent the CSRF Token from being submitted. Only for Alfresco Process Services call |
| needHelpLink | string | | It will change the url of the NEED HELP link in the footer |
| registerLink | string | | It will change the url of the REGISTER link in the footer |
| logoImageUrl | string | Alfresco logo image | To change the logo image with a customised image |
| copyrightText | string | © 2016 Alfresco Software, Inc. All Rights Reserved. | The copyright text below the login box |
| copyrightText | string | © 2017 Alfresco Software, Inc. All Rights Reserved. | The copyright text below the login box |
| backgroundImageUrl | string | Alfresco background image | To change the background image with a customised image |
| fieldsValidation | { [key: string]: any; }, extra?: { [key: string]: any; } | | Use it to customise the validation rules of the login form |
| showRememberMe | boolean | false | Toggle `Remember me` checkbox visibility |
@ -118,12 +118,12 @@ You can replace the entire content in the header of the login component with you
## Extra content
You can put additional html content between `alfresco-login` tags to get it rendered as part of the login dialog.
This becomes handy in case you need extending it with custom input fields handled by your application or parent component:
This becomes handy in case you need to extend it with custom input fields handled by your application or parent component:
```html
<adf-login ...>
<div>
<div>You extra content</div>
<div>Your extra content</div>
</div>
</adf-login>
```
@ -158,7 +158,7 @@ Alternatively you can bind to your component properties and provide values dynam
## Customize Validation rules
If needed it is possible customise the validation rules of the login
If needed it is possible to customise the validation rules of the login
form. You can add/modify the default rules of the login form.
**MyCustomLogin.component.html**

View File

@ -46,7 +46,7 @@ npm install ng2-alfresco-search
</adf-search-control>
```
Example of an component that uses the search control. In this example the search term is simply logged to the console
Example of a component that uses the search control. In this example the search term is simply logged to the console
but instead the component could emit an event to be consumed upstream, or it could trigger a change inside a search
results component embedded inside the same component.
@ -57,9 +57,9 @@ results component embedded inside the same component.
| searchTerm | string | | Search term to pre-populate the field with |
| inputType | string | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
| expandable | boolean | true | Whether to use an expanding search control, if false then a regular input is used. |
| autocomplete | boolean | true | Whether the browser should offer field auto-completion for the input field to the user. |
| autocomplete | boolean | true | Whether the browser should offer field auto-completion for the input field to the user. |
| highlight | boolean | false | Use the true value if you want to see the searched word highlighted. |
| liveSearchEnabled | boolean | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
| liveSearchEnabled | boolean | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
| liveSearchRoot | string | "-root-" | NodeRef or node name where the search should start. |
| liveSearchResultType | string | | Node type to filter live search results by, e.g. 'cm:content'. |
| liveSearchMaxResults | number | 5 | Maximum number of results to show in the live search. |
@ -69,7 +69,7 @@ results component embedded inside the same component.
| Name | Description |
| --- | --- |
| searchChange | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is at less than three characters in length then the term is truncated to an empty string. |
| searchChange | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is less than three characters in length then the term is truncated to an empty string. |
| searchSubmit | Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object. |
| fileSelect | Emitted when a file item from the list of find-as-you-type results is selected |
| expand | Emitted when the expanded state of the control changes based on focus events and the content of the input control |
@ -82,26 +82,26 @@ results component embedded inside the same component.
</adf-search>
```
Example of an component that displays search results, using the Angular2 router to supply a 'q' parameter containing the
search term. If no router is present on the page of if the router does not provide such a parameter then an empty
Example of a component that displays search results, using the Angular2 router to supply a 'q' parameter containing the
search term. If no router is present on the page or if the router does not provide such parameter then an empty
results page will be shown.
### Properties
| Name | Type | Optional | Default | Description |
| --- | --- | --- | --- | --- |
| searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results |
| searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results |
| rootNodeId | string | "-root-" | NodeRef or node name where the search should start. |
| resultType | string | | Node type to filter search results by, e.g. 'cm:content', 'cm:folder' if you want only the files. |
| maxResults | number | 20 | Maximum number of results to show in the search. |
| resultSort | string | | Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt" |
| resultSort | string | | Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt" |
| navigationMode | string | "dblclick" | Event used to initiate a navigation action to a specific result, one of "click" or "dblclick" |
### Events
| Name | Description |
| --- | --- |
| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
| preview | Emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
| resultsLoad | Emitted when search results have fully loaded |
## Build from sources

View File

@ -37,7 +37,7 @@ npm install ng2-alfresco-social
## Basic usage
In this component are present two different components:
In this component there are two different components:
* adf-like
* adf-rating

View File

@ -36,7 +36,7 @@ npm install ng2-alfresco-tag
## Basic usage
In this component are present three different tags:
In this component there are three different tags:
* alfresco-tag-node-actions-list
* alfresco-tag-list

View File

@ -82,14 +82,14 @@ npm install ng2-alfresco-upload
| --- | --- | --- | --- |
| disabled | boolean | false | Toggle component disabled state |
| **(deprecated)** showNotificationBar | boolean | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** |
| uploadFolders | boolean | false | Allow/disallow upload folders (only for chrome) |
| uploadFolders | boolean | false | Allow/disallow upload folders (only for Chrome) |
| multipleFiles | boolean | false | Allow/disallow multiple files |
| acceptedFilesType | string | * | array of allowed file extensions , example: ".jpg,.gif,.png,.svg" |
| **(deprecated)** currentFolderPath | string | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
| **(deprecated)** rootFolderId | string | '-root-' | The ID of the root folder node.
**Deprecated in 1.6.2: use parentId instead.** |
| parentId | string | empty | The ID of the root. It can be the nodeId if you are using the upload for the Content Service or taskId/processId for the Process Service. |
| versioning | boolean | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
| staticTitle | string | (predefined) | define the text of the upload button |
| disableWithNoPermission | boolean | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled |
@ -130,7 +130,7 @@ export class MyComponent {
#### How to disable the button when the delete permission is missing
You can easily disable the button when the user doesn't own the permission to perform the action.
You can easily disable the button when the user doesn't have the permission to perform the action.
The UploadButtonComponent provides the property disableWithNoPermission that can be true. In this way the button should be disabled if the delete permission is missing for the node.
```html
@ -144,7 +144,7 @@ The UploadButtonComponent provides the property disableWithNoPermission that can
## UploadDragAreaComponent
This component, provide a drag and drop are to upload files to alfresco.
This component provides a drag and drop area to upload files to Alfresco.
```html
<adf-upload-drag-area (onSuccess)="customMethod($event)">
@ -173,7 +173,7 @@ export class AppComponent {
| **(deprecated)** showNotificationBar | boolean | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** |
| rootFolderId | string | '-root-' | The ID of the root folder node. |
| **(deprecated)** currentFolderPath | string | '/' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
| versioning | boolean | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
### Events
@ -203,10 +203,10 @@ Provides access to various APIs related to file upload features.
### Configuration
There is the possibility to point out file name or file extension to be excluded from upload process into the app.config.json file, see [here](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-core#appconfigservice) for more details.
This will make easy avoiding uploading of system files like : '.DS_Store'.
By default the file already filtered are : '.git', '.DS_Store' and 'desktop.ini'.
It is possible to add any expression for filtering file like '*.txt'.The file name check is done via
[minimatch library](https://www.npmjs.com/package/minimatch) so in file excluded list is possible to add any expression accepted by this library.
This will make it easy to avoid uploading of system files like : '.DS_Store'.
By default the files already filtered out are : '.git', '.DS_Store' and 'desktop.ini'.
It is possible to add any expression for filtering files like '*.txt'. The file name check is done via
[minimatch library](https://www.npmjs.com/package/minimatch) so in excluded files list it is possible to add any expression accepted by this library.
**app.config.json**

View File

@ -40,13 +40,13 @@ npm install ng2-alfresco-userinfo
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ecmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for ECM users |
| ecmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for ECM users |
| bpmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for BPM users |
| menuOpenType | string | right | Custom choice for opening menu bottom : `right` or `left` |
| fallBackThumbnailImage | string | (alfresco image) | Fallback image for profile when thubnail is missing|
| menuOpenType | string | right | Custom choice for opening the menu bottom : `right` or `left` |
| fallBackThumbnailImage | string | (alfresco image) | Fallback image for profile when thumbnail is missing|
This will show a round icon with user and on click some user information are showed.
If user is logged in with ECM and BPM the ECM image will be showed.
This will show a round icon with user and on click some user information.
If user is logged in with ECM and BPM the ECM image will be shown.
## Build from sources

View File

@ -97,10 +97,10 @@ Using with file url:
| Attribute | Options | Default | Description |
| --- | --- | --- | --- |
| fileNodeId | string | | Node Id of the file to load the file |
| urlFile | string | | If you want load an external file that not comes from the ECM you can use this Url where to load the file |
| urlBlob | Blob | | If you want load a Blob File |
| overlayMode | boolean | false | if `true` Show the Viewer full page over the present content otherwise will fit the parent div |
| fileNodeId | string | | Node Id of the file to load |
| urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file |
| urlBlob | Blob | | If you want to load a Blob File |
| overlayMode | boolean | false | If `true` show the Viewer full page over the present content otherwise will fit the parent div |
| showViewer | boolean | true | Hide or show the viewer |
| showToolbar | boolean | true | Hide or show the toolbars |
| displayName | string | | You can specify the name of the file |
@ -117,13 +117,13 @@ Using with file url:
![Rendition](docs/assets/renditions.png)
Note for unsupported extension the viewer will offer the possibility to convert it in PDF is that kind of extension is supported by the [content service renditions service](https://community.alfresco.com/docs/DOC-5879-rendition-service)
Note for unsupported extensions the viewer will offer the possibility to convert to PDF if that kind of extension is supported by the [content service renditions service](https://community.alfresco.com/docs/DOC-5879-rendition-service)
## Custom extension handler
If you want handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler.
If you want to handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler.
Below you can find an example where with the use of `extension-viewer` if you can handle 3d files
Below you can find an example with the use of `extension-viewer` if you can handle 3d files
```html
<adf-viewer
@ -143,7 +143,7 @@ Below you can find an example where with the use of `extension-viewer` if you ca
</adf-viewer>
```
Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make example above work.
Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
It is possible to define multiple `extension-viewer` templates:

View File

@ -80,17 +80,17 @@ export class AppComponent {
| contextRoot | string | | path where application is deployed |
| scriptPath | string | alfresco | path to Web Script (as defined by Web Script) |
| contentType | string | service | path where Web Script service is mapped default value |
| contentType | string | TEXT | how to handle the data received from te web script JSON , HTML , DATATABLE or TEXT |
| contentType | string | TEXT | how to handle the data received from the web script JSON , HTML , DATATABLE or TEXT |
| onSuccess | event | | You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application |
| showData | booleann | true | render the webscript data |
**contentType** {string}
***data*** {string} data contain the plain value get from the webscipt is an output parameter
***data*** {string} data containing the plain value you get from the webscipt as an output parameter
## Webscript View HTML example
This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript
This sample Web Scripts reside in your Alfresco Server AND you can access the folder webscript here:
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
```http://localhost:8080/alfresco/service/sample/folder/Company%20Home```
@ -122,7 +122,7 @@ This sample demonstrates how to implement a Webscript component that renders the
</adf-webscript-get>
```
If you want show the result from a webscript inside a ng2-alfresco-datatable you have to return from the GET of the webscript the datatructure below:
If you want to show the result from a webscript inside a ng2-alfresco-datatable you have to return from the GET of the webscript the datastructure below:
subdivide in data and schema
```ts
@ -159,14 +159,14 @@ data: [
]]
```
that will render the follow table
that will render the following table
![Custom columns](docs/assets/datatable.png)
## Webscript View JSON example
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
This sample Web Scripts reside in your Alfresco Server AND you can access the folder webscript here:
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
```http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE```

View File

@ -8,16 +8,16 @@
The Alfresco application development framework comes with a demo project that you can run to get a
feel for what's available.
feel of what's available.
* Start by navigating into the app development framework source folder, and then the script folder:
* Start by navigating into the app development framework source folder, and then the scripts folder:
```ssh
cd alfresco-ng2-components
cd scripts
```
# Quick examples if you want develop the ADF framework
# Quick examples developed with ADF
* Start the demo shell using the JS-API from the development branch and the local component in the ng2-components folder
@ -31,7 +31,7 @@ feel for what's available.
./npm-build-all.sh -gitjsapi development
```
* Build the ng2-components folder using the JS-API from the development branch and run the test on it
* Build the ng2-components folder using the JS-API from the development branch and run the tests on it
```sh
./npm-build-all.sh -t -gitjsapi development
@ -39,32 +39,32 @@ feel for what's available.
# start.sh
***start.sh*** script provide a easy way to deal with the npm command and the correct sequence to run the task on demo-shell during develop phases.
***start.sh*** script provide an easy way to deal with the npm command and the correct sequence to run the task on demo-shell during development phases.
## Options
The default behaviour of the ***start.sh*** script always run the install and the start of the demo shell on the port 3000, anyway with some of the options below this behaviour can be changed
The default behaviour of the ***start.sh*** script always runs the install and the start of the demo shell on the port 3000, but with some of the options below this behaviour can be changed.
All the commands before can be used in combination
| Option | Description |
| --- | --- |
| -h or --help | show the help |
| -u or --update | run the update of the node_modules packages on the demo shell |
| -c or --clean | clean the demo shell folder before to start it |
| -t or --test | run the test on the demo-shell |
| -c or --clean | clean the demo shell folder before starting it |
| -t or --test | run the tests on the demo-shell |
| -r or --registry | Start the demo using an alternative npm registry |
| -v or --version | Instead to use the version defined in the pacakge.json . Download from npm and Install a different version of the ng2-components (this option is not compatible with -dev) |
| -v or --version | Use the version defined in the pacakge.json . Download from npm and Install a different version of the ng2-components (this option is not compatible with -dev) |
| -si or --skipinstall | skip the install of the node_modules |
| -ss or --skipstart | skip the start of the demo shell and oly build it providing a dist folder in the relative demo-shell-ng2 folder |
| -dev or --develop | Start the demo in development mode building the relative folder ng2-components with all the components and pointing to those components instead to the ng2-components present in the node_modules folder |
| -dist | Start the demo shell using a light server and the files builded in the dist folder, particular useful to test the final result of the project |
| -gitjsapi | if you want start the demo shell using an alfresco-js-api referenced by commit-ish version of the JS-API |
| -vjsapi | Instead to use the version defined in the pacakge.json . Download from npm and Install a different version of JS-API |
| -ss or --skipstart | skip the start of the demo shell and only build it providing a dist folder in the relative demo-shell-ng2 folder |
| -dev or --develop | Start the demo in development mode building the relative folder ng2-components with all the components and pointing to those components instead of the ng2-components present in the node_modules folder |
| -dist | Start the demo shell using a light server and the files built in the dist folder, particular useful to test the final result of the project |
| -gitjsapi | Start the demo shell using an alfresco-js-api referenced by commit-ish version of the JS-API |
| -vjsapi | Use the version defined in the pacakge.json. Download from npm and install a different version of JS-API |
## Examples
* Start the demo and Install all the dependencies
* Start the demo and install all the dependencies
```sh
./start.sh
@ -88,7 +88,7 @@ All the commands before can be used in combination
./start.sh -update or -u
```
* Instead to use the version defined in the pacakge.json . Download from npm and Install a different version of the ng2-components (this option is not compatible with -dev) |
* Use instead the version defined in the pacakge.json. Download from npm and install a different version of the ng2-components (this option is not compatible with -dev) |
```sh
./start.sh -version or -v COMPONENTS_VERSION
@ -96,19 +96,19 @@ All the commands before can be used in combination
./start.sh -v 1.4.0
```
* Start the demo in development mode building the relative folder ng2-components with all the components and pointing to this component instead to the node_modules one
* Start the demo in development mode building the relative folder ng2-components with all the components and pointing to this component instead of the node_modules one
```sh
./start.sh -develop or -dev
```
* Start the demo shell using a light server using the files builded in the dist folder
* Start the demo shell using a light server using the files built in the dist folder
```sh
./start.sh -dist
```
* If you want start the demo shell using an alfresco-js-api referenced by commit-ish version of the JS-API
* Start the demo shell using an alfresco-js-api referenced by commit-ish version of the JS-API
```sh
./start.sh -gitjsapi commit-ish
@ -118,14 +118,14 @@ All the commands before can be used in combination
./start.sh -gitjsapi de92be966e2ce7eca642ca9e9d7647ba4f849356
```
* If you want start the alfresco-js-api against a commit-ish version of the JS-API
* Start the alfresco-js-api against a commit-ish version of the JS-API
```sh
./start.sh -vjsapi 1.4.0
```
* If you want run the Demo shell test
* Run the Demo shell tests
```sh
./start.sh -t
@ -134,7 +134,7 @@ All the commands before can be used in combination
# npm-build-all.sh
***npm-build-all.sh*** this script provide a easy way to deal with the npm command and the correct sequence to build the ng2-components
***npm-build-all.sh*** this script provides an easy way to deal with the npm command and the correct sequence to build the ng2-components
## Options
@ -144,32 +144,32 @@ The default behaviour of the ***npm-build-all.sh*** install node_modules and bui
| Option | Description |
| --- | --- |
| -h or --help | show the help |
| -t or --test | If you want run the test, this parameter accept also a wildecard to execute test for example -t "ng2-alfresco-core" |
| -c or --clean | clean the ng2_components folders before to start from all the temp builds file as node_modules |
| -gitjsapi | if you want start the demo shell using an alfresco-js-api referenced by commit-ish version of the JS-API |
| -si or --skipinstall | skip the install of the node_modules |
| -sb or --skipbuild | skip the creation of the bundles files and skip the errors and lint check inside the components |
| -t or --test | Run the tests, this parameter accepts also a wildcard to execute tests for example -t "ng2-alfresco-core" |
| -c or --clean | clean the ng2_components folders before start from all the temp builds files as node_modules |
| -gitjsapi | start the demo shell using an alfresco-js-api referenced by commit-ish version of the JS-API |
| -si or --skipinstall | skip the installation of the node_modules |
| -sb or --skipbuild | skip the creation of the bundles files and skip the errors and lint checks inside the components |
* If you want to build all your local component:
* Build all your local components:
```sh
./npm-build-all.sh
```
* If you want to build all your local component and run the test:
* Build all your local components and run the tests:
```sh
./npm-build-all.sh -t or -test
```
* If you want clean the ng2-components folder node_modules before to build
* Clean the ng2-components folder node_modules before build
```sh
./npm-build-all.sh -c
```
* If you want build to build all the components against a commit-ish version of the JS-API
* Build all the components against a commit-ish version of the JS-API
```sh
./npm-build-all.sh -gitjsapi commit-ish
@ -179,19 +179,19 @@ The default behaviour of the ***npm-build-all.sh*** install node_modules and bui
./npm-build-all.sh -gitjsapi de92be966e2ce7eca642ca9e9d7647ba4f849356
```
* If you want avoid initial build and run only all the test
* Skip initial build and run only all the test
```sh
./npm-build-all.sh -s -t
```
* If you want skip initial install node_modules
* Skip initial installation of node_modules
```sh
./npm-build-all.sh -si
```
* If you want clean all your local component and the demo shell:
* Clean all your local components and the demo shell:
```sh
./npm-clean.sh
@ -209,7 +209,7 @@ For development environment configuration please refer to [project docs](../demo
| Option | Description |
| --- | --- |
| -h or --help | show the help |
| -t or --test | If you want run the test suites after "npm install" of each component
| -t or --test | run the test suites after "npm install" of each component
## Examples
@ -225,13 +225,13 @@ For development environment configuration please refer to [project docs](../demo
./npm-relock-pkgs.sh ng2-alfresco-core ng2-alfresco-search
```
* Regenerate package-lock.json files for every package and run test suite for them
* Regenerate package-lock.json files for every package and run test suites for them
```sh
./npm-relock-pkgs.sh -t
```
* Regenerate package-lock.json files for for ng2-alfresco-core and ng2-alfresco-search components and run test suite for them
* Regenerate package-lock.json files for for ng2-alfresco-core and ng2-alfresco-search components and run test suites for them
```sh
./npm-relock-pkgs.sh -t ng2-alfresco-core ng2-alfresco-search
@ -239,7 +239,7 @@ For development environment configuration please refer to [project docs](../demo
# npm-clean.sh
***npm-clean.sh*** clean all the projects folder : ng2-components and demo-shell-ng2.
***npm-clean.sh*** clean all the projects folders : ng2-components and demo-shell-ng2.
## Options
@ -256,7 +256,7 @@ For development environment configuration please refer to [project docs](../demo
| Option | Description |
| --- | --- |
| -h or --help | show the help |
| -r or --registry | against which register you want do this check |
| -r or --registry | against which register you want to do this check |
| -v or --version | the version of the components to check |