inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4152] Restructured remaining doc folders and fixed links (#4441)

Browse Source 
* [ADF-4152] Moved proc services cloud docs to subfolders

* [ADF-4152] Fixed links in PS cloud docs

* [ADF-4152] Added subfolders and checked links for extensions and insights docs

* [ADF-4152] Moved proc services cloud docs to subfolders

* [ADF-4152] Fixed links in PS cloud docs

* [ADF-4152] Added subfolders and checked links for extensions and insights docs

* [ADF-4152] Fixed links in Proc cloud, Insights and Extensions docs

* [ADF-4152] Updated links in user guide

* [ADF-4152] Fixed broken links in tutorials

* [ADF-4152] Fixed remaining links in core docs

* [ADF-4152] Fixed remaining links in proc services docs

* [ADF-4152] Fixed remaining links in content services docs

* [ADF-4152] Fixed links in breaking changes docs

* [ADF-4152] Updated main README index page

* [ADF-4152] Fixed glitches with preview ext component docs
This commit is contained in:
Andy Stark
2019-03-14 22:01:55 +00:00
committed by Eugenio Romano
parent 8edf92f325
commit 31479cfaa4
80 changed files with 737 additions and 900 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/tutorials/README.md
View File

@@ -14,8 +14,8 @@ Github only: true
| [**Adding a new view**](new-view.md) | Beginner | In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint. |
| [**Using ADF Components**](using-components.md) | Basic | In this tutorial you will learn how to extend, use and configure ADF Components. |
| [**Basic theming**](basic-theming.md) | Beginner | In this tutorial you will see how to theme an ADF app by modifying the CSS. |
| [**Customizing the Login component**](customising-login.md) | Intermediate | In this tutorial you will learn how to customize the Login component following the technical documentation. |
| [**Customizing the Login component**](customising-login.md) | Intermediate | In this tutorial you will learn how to customize the [Login component](../core/components/login.component.md) following the technical documentation. |
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a DataTable component. |
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | Intermediate | In this tutorial you will learn how to use the [`NodesApiService`](../core/nodes-api.service.md). |
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | Intermediate | In this tutorial you will learn how to use the [`NodesApiService`](../core/services/nodes-api.service.md). |
| [**Working with Nodes using the JS API**](working-with-nodes-js-api.md) | Intermediate | In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). |
| [**Content metadata component**](content-metadata-component.md) | Advanced | In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../content-services/content-metadata.component.md). |
| [**Content metadata component**](content-metadata-component.md) | Advanced | In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../content-services/components/content-metadata.component.md). |

4
docs/tutorials/content-metadata-component.md
View File

@@ -5,13 +5,13 @@ Level: Advanced
# Content metadata component
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../content-services/content-metadata.component.md).
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../content-services/components/content-metadata.component.md).
This component is used to render the standard and custom metadata of generic content item (called a _node_) stored in Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own applicatioin. As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app).
## About the `ContentMetadataComponent`
As described in the [`ContentMetadataComponent`](../content-services/content-metadata.component.md) documentation, the `adf-content-metadata-card` tag has some useful attributes, included the `preset` attribute, which is used to point to a collection of aspects/properties to render.
As described in the [`ContentMetadataComponent`](../content-services/components/content-metadata.component.md) documentation, the `adf-content-metadata-card` tag has some useful attributes, included the `preset` attribute, which is used to point to a collection of aspects/properties to render.
Below, you can see the `preset` value requesting to render all the available aspects/properties:

16
docs/tutorials/customising-login.md
View File

@@ -5,7 +5,7 @@ Level: Intermediate
# Customizing the Login component
In this tutorial you will learn how to customize the [Login component](../core/login.component.md) following the technical documentation.
In this tutorial you will learn how to customize the [Login component](../core/components/login.component.md) following the technical documentation.
The task will be very simple. See the documentation for further details about customizing this component, along with examples.
@@ -16,17 +16,17 @@ Starting from an existing ADF application, the `Login` component, like any other
it is stored in the `/src/app/components/login` path. In an ADF app created with [Yeoman](http://yeoman.io/)
it is stored in the `/src/app/login` path.
Once you have located the Login component for your application, you can customize it as described below.
Once you have located the [Login component](../core/components/login.component.md) for your application, you can customize it as described below.
## Changing the header
As with every regular
[Angular Component](https://angular.io/guide/architecture-components),
you can customize the Login component can be customised via CSS, HTML and Typescript. In this simple
you can customize the [Login component](../core/components/login.component.md) can be customised via CSS, HTML and Typescript. In this simple
example, we will customize the header (as described also in the
[technical documentation](../core/login.component.md)).
[technical documentation](../core/components/login.component.md)).
Open the [`login.component`](../core/login.component.md)`.html` file and change the content to match the following source code:
Open the [`login.component`](../core/components/login.component.md)`.html` file and change the content to match the following source code:
```html
<adf-login ...>
@@ -40,7 +40,7 @@ After saving the file, the login form will look like this:
## More examples
As mentioned earlier, this is a very basic example and the Login component can be customized
As mentioned earlier, this is a very basic example and the [Login component](../core/components/login.component.md) can be customized
much more extensively than this. For a complete and detailed description, full of examples, check the
[technical documentation about the component](../core/login.component.md).
This describes every customization available for the Login component.
[technical documentation about the component](../core/components/login.component.md).
This describes every customization available for the [Login component](../core/components/login.component.md).

10
docs/tutorials/using-components.md
View File

@@ -9,7 +9,7 @@ In this tutorial you will learn how to extend, use and configure ADF Components.
![login](../docassets/images/login.jpg)
We will be customizing the [Login component](../core/login.component.md) as an example, where we will remove the `Remember me`, `Need Help?` and `Register` links in the footer and setup an event listener that displays an alert when the login form is submitted. We will finish off by setting up a custom footer.
We will be customizing the [Login component](../core/components/login.component.md) as an example, where we will remove the `Remember me`, `Need Help?` and `Register` links in the footer and setup an event listener that displays an alert when the login form is submitted. We will finish off by setting up a custom footer.
The final result will look like this:
@@ -21,7 +21,7 @@ We have carefully picked these three customizations because they cover the three
2. Event Listeners
3. HTML Extensions / _Content Projection_
You should always consult the documentation for the component you are looking to use. For this exercise it would be useful to open a browser window with the [Login Component](../core/login.component.md)
You should always consult the documentation for the component you are looking to use. For this exercise it would be useful to open a browser window with the [Login Component](../core/components/login.component.md)
documentation.
Let's do a practical example with each approach.
@@ -68,7 +68,7 @@ Save the file. The browser will automatically reload once the file is saved. The
Now that we've successfully configured properties on the `<adf-login/>` component, it's time to look at events.
Again, looking at the [Login Component](../core/login.component.md)
Again, looking at the [Login Component](../core/components/login.component.md)
docs, we can see that it emits three events: `success`, `error` and `executeSubmit`.
We can subscribe to these events and have our custom code executed when these events are emitted. Let's hook into the `executeSubmit` and do a simple `alert()` when the form is submitted.
@@ -115,7 +115,7 @@ export class LoginComponent {
}
```
Save the files, go to the [login component,](../core/login.component.md) enter a valid username and password and you should now see an alert. Looking in the console in the browser, you'll see the event data. Here we get all the details for the form.
Save the files, go to the [login component,](../core/components/login.component.md) enter a valid username and password and you should now see an alert. Looking in the console in the browser, you'll see the event data. Here we get all the details for the form.
## Content Projection / HTMl Extensions
@@ -163,7 +163,7 @@ Inside the `<adf-login-footer/>` or `<adf-login-header/>` tags we can put anythi
### Bonus objective: Add a custom logo and background to the login screen
Are you up for a challenge? Explore the [Login component](../core/login.component.md)
Are you up for a challenge? Explore the [Login component](../core/components/login.component.md)
docs to find out how you can change the logo and background image!
# Next steps

10
docs/tutorials/working-with-data-table.md
View File

@@ -12,7 +12,7 @@ The custom data for the table generally comes from a generic back-end service or
## Prerequisites and data source
Before diving deep into the technical description of the
[DataTable component](../core/datatable.component.md),
[DataTable component](../core/components/datatable.component.md),
let's start with a description of the development environment and its prerequisites.
In this tutorial we will start from an existing ADF application set up to use (at least) Alfresco Content
@@ -24,7 +24,7 @@ is well documented, and you can choose to
However, if you prefer to create a brand new ADF application from scratch then you should still be able
to follow the tutorial without difficulty.
For this tutorial, the endpoint used to populate the [DataTable component](../../lib/core/datatable/components/datatable/datatable.component.ts) is the
For this tutorial, the endpoint used to populate the [DataTable component](../core/components/datatable.component.md) is the
[`/people` service](https://api-explorer.alfresco.com/api-explorer/#!/people/listPeople) which lists
all users available in an Alfresco Content Services instance. The `/people` service is suitable for the
purpose of this tutorial because it is available by default in the Alfresco Content Services REST API.
@@ -171,7 +171,7 @@ of the DataTable, and even smaller components like Attachment List, Comment List
Content Selector are also based on it.
Looking at the
[documentation](../core/datatable.component.md),
[documentation](../core/components/datatable.component.md),
we can see that it has a lot of different options, including single/multi selection, click events,
context menus, actions and keyboard navigation.
@@ -201,10 +201,10 @@ access to all the data in the row, if required. When you click a row, you should
## DataTable columns
Let's dig a bit deeper into the different options for rendering columns within the DataTable. The documentation for the
[Data Column component](../core/data-column.component.md)
[Data Column component](../core/components/data-column.component.md)
is quite in-depth and has lots of examples. We highly recommend checking it out.
From the documentation we can see that the [Data Column component](../core/data-column.component.md) has quite a few properties but the
From the documentation we can see that the [Data Column component](../core/components/data-column.component.md) has quite a few properties but the
most important ones are `key`, `type`, `sortable`, `title` and `class`.
- `key` is the name of the corresponding property in the [`ObjectDataTableAdapter`](../../lib/core/datatable/data/object-datatable-adapter.ts) object.

26
docs/tutorials/working-with-nodes-api-service.md
View File

@@ -5,9 +5,9 @@ Level: Intermediate
# Working with the Nodes API Service
In this tutorial you will learn how to use the [`NodesApiService`](../core/nodes-api.service.md).
In this tutorial you will learn how to use the [`NodesApiService`](../core/services/nodes-api.service.md).
We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the [`NodesApiService`](../core/nodes-api.service.md) is used as an abstraction layer, defined by one of the services in the ADF Core library.
We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the [`NodesApiService`](../core/services/nodes-api.service.md) is used as an abstraction layer, defined by one of the services in the ADF Core library.
## Contents
@@ -25,7 +25,7 @@ We have developed some practical examples to show you how to interact with an in
## Preparing the development environment
To focus the description on the [`NodesApiService`](../core/nodes-api.service.md), we will develop on top of the
To focus the description on the [`NodesApiService`](../core/services/nodes-api.service.md), we will develop on top of the
[Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app).
If you don't have it already installed in your development environment then see the
_how-to_ description in
@@ -62,18 +62,18 @@ the preview of the content:
![nodesapiservices_myonnodedoubleclick](../docassets/images/nodesapiservices_myonnodedoubleclick.png)
The Alfresco Example Content app is now set up to demonstrate the usage of the [`NodesApiService`](../core/nodes-api.service.md).
The Alfresco Example Content app is now set up to demonstrate the usage of the [`NodesApiService`](../core/services/nodes-api.service.md).
## Basic examples of usage
For a first look at the [`NodesApiService`](../core/nodes-api.service.md), let's check the `FileComponent` component stored in
For a first look at the [`NodesApiService`](../core/services/nodes-api.service.md), let's check the `FileComponent` component stored in
`src/app/components/files/files.component.ts`. In the source code, you can see the `nodesApi`
property that represents the [`NodesApiService`](../core/nodes-api.service.md) in the [`FilesComponent`](../../demo-shell/src/app/components/files/files.component.ts). See the `fetchNode` and
property that represents the [`NodesApiService`](../core/services/nodes-api.service.md) in the [`FilesComponent`](../../demo-shell/src/app/components/files/files.component.ts). See the `fetchNode` and
`fetchNodes` methods for some very basic examples.
## About the NodesApiService
Before going further, let's introduce the [`NodesApiService`](../core/nodes-api.service.md) class.
Before going further, let's introduce the [`NodesApiService`](../core/services/nodes-api.service.md) class.
As you can see, the available methods are easy to understand and they should be all you need to
manage the nodes of your content repository.
@@ -84,7 +84,7 @@ Observables provide support for passing messages between publishers and subscrib
applications. Observables offer significant benefits over other techniques for event handling,
asynchronous programming, and handling multiple values.
The return values of the [`NodesApiService`](../core/nodes-api.service.md) methods are managed in the usual way for Observables.
The return values of the [`NodesApiService`](../core/services/nodes-api.service.md) methods are managed in the usual way for Observables.
You "subscribe" to the asynchronous messaging using the following syntax:
```ts
@@ -103,13 +103,13 @@ for further details.
### NodePaging
When a method returns a list of nodes rather than a single node, it usually returns an [`Observable`](http://reactivex.io/documentation/observable.html) of the [`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts) class. See the
[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)
When a method returns a list of nodes rather than a single node, it usually returns an [`Observable`](http://reactivex.io/documentation/observable.html) of the [`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/NodePaging.md) class. See the
[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/NodePaging.md)
docs for further details.
## Retrieving info and metadata from a node
As a first example of the usage of the [`NodesApiService`](../core/nodes-api.service.md), let's retrieve the properties of a content node using its identifier. Edit the `myOnNodeDoubleClick` method in `src/app/components/files/files.component.ts`, as shown below:
As a first example of the usage of the [`NodesApiService`](../core/services/nodes-api.service.md), let's retrieve the properties of a content node using its identifier. Edit the `myOnNodeDoubleClick` method in `src/app/components/files/files.component.ts`, as shown below:
```ts
myOnNodeDoubleClick(nodeId) {
@@ -133,7 +133,7 @@ other visual component) then the principle is the same.
## Retrieving the node's children
Another common use of the [`NodesApiService`](../core/nodes-api.service.md) is to retrieve a list of the children of a folder node.
Another common use of the [`NodesApiService`](../core/services/nodes-api.service.md) is to retrieve a list of the children of a folder node.
Edit `src/app/components/files/files.component.ts` again, changing the `onNodeDoubleClick` method
to match the source code below:
@@ -170,7 +170,7 @@ in the browser's console you will see something like the following screenshot:
## Creating and deleting a subfolder
The [`NodesApiService`](../core/nodes-api.service.md) class is not just for retrieving data. You can also use it to manage a
The [`NodesApiService`](../core/services/nodes-api.service.md) class is not just for retrieving data. You can also use it to manage a
real CRUD of nodes (content and folders). In the following examples, you will see how to create
a subfolder of the double clicked folder and also how to delete it.