inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2679] Reviewed latest tutorial content (#3371)

Browse Source 
* [ADF-2679] Initial review of new tutorial content

* [ADF-2679] Reviewed the latest tutorials

* [ADF-2679] Initial review of new tutorial content

* [ADF-2679] Reviewed the latest tutorials
This commit is contained in:
Andy Stark 2018-05-23 00:34:11 +01:00 committed by Eugenio Romano
parent 89ede1514b
commit 081f865647
3 changed files with 346 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
docs/tutorials/creating-javascript-app-using-alfresco-js-api.md
View File

@ -1,56 +1,74 @@
---
Level: Basic
---
# Creating your Alfresco JavaScript application
In this tutorial you are going to see how to create from scratch an application in JavaScript to interact with Alfresco. This is a "getting started" task that should enable you to start developing your own JavaScript application on top of Alfresco Content Services or Alfresco Process Services.
In this tutorial you will learn how to create an application in JavaScript from scratch to
interact with Alfresco. This is a "getting started" task that should enable you to start
developing your own JavaScript application on top of Alfresco Content Services or Alfresco
Process Services.
In this tutorial you are going to learn how to develop on top of Alfresco Content Services, but the development on top of Alfresco Process Services follows exactly the same principle.
The tutorial uses Alfresco Content Services for demonstration purposes, but development on
top of Alfresco Process Services follows exactly the same principles.
**Note:** The development on top of Alfresco Content Services AND Alfresco Process Services has the only limitation of the [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing). In this case you might need to proxy your application first.
**Note:** You can develop for Alfresco Content Services AND Alfresco Process Services together but
with the only limitations introduced by
[CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing). If you want to develop for both
services then you might need to proxy your application first.
## Prerequisites
The only prerequisite of this tutorial is the availability of an instance of Alfresco Content Services in a [Docker](https://www.docker.com/) container. Docker is not the only option you might have for the deployment, but it is the faster we found to focus on the development instead of the environment setup.
The only prerequisite of this tutorial is that an instance of Alfresco Content Services in a [Docker](https://www.docker.com/) container should be available. Docker is not the only option for deployment,
but its simplicity allows us to focus more on the development of the environment setup.
If you don't have an instance of Alfresco Content Services up and running check the [preparation of the development environment](./preparing-environment.md).
If you don't have an instance of Alfresco Content Services up and running, see
[Preparing the development environment](./preparing-the-development-environment.html)
to learn how to set it up.
Only to download the requested libraries, you will need the `npm` client. Also in this case check the [preparation of the development environment](./preparing-environment.md) for further details on how to install it into your development environment.
You will need the `npm` client to download the requested Node libraries (also explained in
[Preparing the development environment](./preparing-the-development-environment.html)).
## Creating the JavaScript application
Assuming that you have your Alfresco Content Services instance up and running at `http://localhost:8082/alfresco`, let's see here how to develop a JavaScript application from scratch. The JavaScript application will be able to interact with Alfresco back-end services using the [`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library. This library does not necessarily require to be used into Angular applications, but it is "framework agnostic".
Assuming that you have your Alfresco Content Services instance up and running at `http://localhost:8082/alfresco`, let's see here how to develop a JavaScript application from scratch.
The JavaScript application will be able to interact with Alfresco back-end services using the
[`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library. This library does not
necessarily have to be used with Angular applications since it is "framework agnostic".
Before starting with the development of the source code, let's create locally the `my-js-app` folder that will contain the entire JavaScript application.
Before starting the development of the source code, create a local folder called `my-js-app`
that will contain the entire JavaScript application.
### Creating the `index.html` file
Inside the `my-js-app` folder create the `index.html` file with the following content.
Inside the `my-js-app` folder, create the `index.html` file with the following content:
<html>
<head>
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
<script >
this.alfrescoJsApi = new AlfrescoApi({ provider:'ECM', hostEcm: 'http://localhost:8082/' });
this.alfrescoJsApi.login('admin', 'admin').then(function (data) {
alert('API called successfully to login into Alfresco Content Services.');
}, function (error) {
console.error(error);
});
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
```html
<html>
As you can see, the content describes a very simple and basic HTML + JavaScript page, containing the source code to login into the Alfresco Content Services at the URL `http://localhost:8082/alfresco`.
<head>
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
<script >
this.alfrescoJsApi = new AlfrescoApi({ provider:'ECM', hostEcm: 'http://localhost:8082/' });
this.alfrescoJsApi.login('admin', 'admin').then(function (data) {
alert('API called successfully to login into Alfresco Content Services.');
}, function (error) {
console.error(error);
});
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
```
As you can see, the content describes a very simple and basic HTML + JavaScript page, containing the source code to log into Alfresco Content Services at the URL `http://localhost:8082/alfresco`.
All the magic happens because of the inclusion (and use) of the `alfresco-js-api.js` library.
@ -60,17 +78,21 @@ To install the `alfresco-js-api.js` library: open a terminal, move into the `my-
npm install --save alfresco-js-api
Once launched the command downloads all the several files of the library into the `node_modules` folder.
Once launched, the command downloads the numerous files of the library into the `node_modules` folder.
**Note:** the `npm` execution will create a `package-lock.json` file into the root folder of your project. It won't be used and you can ignore it.
**Note:** `npm` will create a `package-lock.json` file into the root folder of your project during
execution. This file won't be used and you can safely ignore it.
Believe it or not, but this is all you need to develop a (very basic) JavaScript application on top of Alfresco Content Services.
Believe it or not, this is all you need to develop a (very basic) JavaScript application on top of Alfresco Content Services.
## Deploying the application
Now that the JavaScript application is created, the next step is to deploy it into the HTTP Server to be consumed. To avoid the [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) issue, for the purpose of this tutorial, the deployment will be done into the same instance of [Apache Tomcat](http://tomcat.apache.org/) used by Alfresco Content Services. If someone won't find this path ideal, this is the fastest way we found to show the results in a tutorial.
Now that the JavaScript application is created, the next step is to deploy it to the HTTP Server for
use. To avoid the [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) issue, for the purpose of this tutorial, the app will be deployed into the same instance of
[Apache Tomcat](http://tomcat.apache.org/) used by Alfresco Content Services. This setup is not ideal
for production use but it is the fastest way we could find to show the results for the tutorial.
To deploy the `my-js-app` application into the Alfresco Content Services Docker container, open a terminal and launch the following commands from inside the `my-js-app` folder.
To deploy the `my-js-app` application into the Alfresco Content Services Docker container, open a terminal and launch the following commands from inside the `my-js-app` folder:
// List the active containers into your environment.
docker container ls
@ -89,12 +111,16 @@ To deploy the `my-js-app` application into the Alfresco Content Services Docker
// Copy the 'my-js-app' folder into the Tomcat's webapps folder.
docker cp ../my-js-app <CONTAINER_ID>:/usr/local/tomcat/webapps
This is all you need to deploy the JavaScript application into the Tomcat instance of the container of Alfresco Content Services.
This is all you need to deploy the JavaScript application into the same Tomcat instance as
Alfresco Content Services.
## The JavaScript application in action
To see the JavaScript application in action, open a browser at `http://localhost:8082/my-js-app` and you should see something like the following screenshot.
To see the JavaScript application in action, open a browser at `http://localhost:8082/my-js-app`.
You should see something like the following screenshot:
![javascript_app_launch](../docassets/images/javascript_app_launch.png)
Of course this is a very basic example, used to show in practice how to develop from scratch a JavaScript application (not necessarily an Angular application) interacting with Alfresco Back-end Services using the [`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library.
Of course this is a very basic example to show how to develop a JavaScript application
(not necessarily an Angular application) interacting with Alfresco Back-end Services using
the [`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library.

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

@ -1,87 +1,125 @@
# Working with the Nodes API Service
In this tutorial you will learn how to use the [`NodesApiService`](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/services/nodes-api.service.ts) in some practical examples developed to show you how to interact with your instance of Alfresco Content Services, without consuming directly the REST endpoints. With this approach the `NodesApiService` is used as an abstraction layer, defining one of the core services of the ADF collection of components.
In this tutorial you will learn how to use the [`NodesApiService`](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/services/nodes-api.service.ts). 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` is used as an abstraction layer, defined by one of the services in the ADF Core
library.
## Preparing the development environment
To focus the description on the `NodesApiService`, in this tutorial we are going to develop on top of the [Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app). If you don't have it already installed into your development environment, check the *how-to* description into the [preparation of the development environment](./preparing-environment.html).
To focus the description on the `NodesApiService`, 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
[preparation of the development environment](./preparing-the-development-environment.md).
Assuming that you have the Alfresco Example Content Application up and running, edit the `FileComponent` defined into the `src/app/components/files/files.component.ts` file. Change the `onNodeDoubleClick` method accordingly with the source code below.
When you have the Alfresco Example Content Application up and running, edit the `FileComponent`
defined in `src/app/components/files/files.component.ts`. Change the `onNodeDoubleClick` method
to match the source code below.
if (PageComponent.isLockedNode(node)) {
...
} else if (node.isFile) {
```ts
if (PageComponent.isLockedNode(node)) {
...
} else if (node.isFile) {
// Comment the line below.
// this.router.navigate(['./preview', node.id], { relativeTo: this.route });
// Comment the line below.
// this.router.navigate(['./preview', node.id], { relativeTo: this.route });
// Add this line.
this.myOnNodeDoubleClick(node.id);
}
// Add this line.
this.myOnNodeDoubleClick(node.id);
}
```
Now add the `myOnNodeDoubleClick` method as described below and save the typescript file.
Now add the `myOnNodeDoubleClick` method as described below and save the file:
myOnNodeDoubleClick(nodeId) {
console.log("You ckicked on the node '" + nodeId + "'.");
}
```ts
myOnNodeDoubleClick(nodeId) {
console.log("You ckicked on the node '" + nodeId + "'.");
}
```
Once done, the user experience changes if you click on a content node (not a folder): in the browser's console you will see something like the following screenshot, instead of the preview of the content.
This will change the user experience when you click on a content node (but *not* a folder):
in the browser's console you will see something like the following screenshot, instead of
the preview of the content:
![nodesapiservices_myonnodedoubleclick](../docassets/images/nodesapiservices_myonnodedoubleclick.png)
This is all you need, to prepare the Alfresco Example Content Application to be customised for demonstrating the `NodesApiService` usage.
The Alfresco Example Content app is now set up to demonstrate the usage of the `NodesApiService`.
## Basic examples of usage
For a first contact with the `NodesApiService`, let's check the `FileComponent` component stored into the `src/app/components/files/files.component.ts` file. Directly in the source code you can check the `nodesApi` property that represent the `NodesApiService` into the `FilesComponent`. Check the `fetchNode` and `fetchNodes` methods for some very basic examples.
For a first look at the `NodesApiService`, 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` in the `FilesComponent`. See the `fetchNode` and
`fetchNodes` methods for some very basic examples.
## About the `NodesApiService`
Before any development, let's introduce the `NodesApiService` class. For further details about the implementation, check the component catalog [here](https://alfresco.github.io/adf-component-catalog/injectables/NodesApiService.html). As you can see, the available methods are easy to understand and they should be all you would need to manage the nodes of your content repository.
Before going further, let's introduce the `NodesApiService` class. For further details about the
implementation, see the
[component catalog page](https://alfresco.github.io/adf-component-catalog/injectables/NodesApiService.html).
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.
### Observables
As you can see, almost all the methods return an [Observable](https://angular.io/guide/observables) as result. Observables provide support for passing messages between publishers and subscribers into Angular applications. Observables offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values.
Almost all the methods return an [Observable](https://angular.io/guide/observables).
Observables provide support for passing messages between publishers and subscribers in Angular
applications. Observables offer significant benefits over other techniques for event handling,
asynchronous programming, and handling multiple values.
Returning Observables, the `NodesApiService` methods will be managed in the usual way: subscribing the asynchronous messaging using the following syntax.
The return values of the `NodesApiService` methods are managed in the usual way for Observables.
You "subscribe" to the asynchronous messaging using the following syntax:
this.nodesApi.getNode(nodeId).subscribe(
(node) => { ... },
error => { ... }
);
```ts
this.nodesApi.getNode(nodeId).subscribe(
(node) => { ... },
error => { ... }
);
```
### MinimalNodeEntryEntity
All the methods managing content nodes return an `Observable` of a `MinimalNodeEntryEntity` class. `MinimalNodeEntryEntity` is used to represent the node's content. You can refer to the [official documentation](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) for further details.
All the methods that manage content nodes return an `Observable` of the `MinimalNodeEntryEntity`
class. `MinimalNodeEntryEntity` is used to represent the node's content. See the
[official documentation](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md)
for further details.
### NodePaging
If the result of a method is a list of nodes, instead of a single node, it usually returns an `Observable` of a `NodePaging` class instead. You can refer to the [official documentation](https://alfresco.github.io/adf-component-catalog/classes/NodePaging.html) for further details.
When a method returns a list of nodes rather than a single node, it usually returns an `Observable` of the `NodePaging` class. See the
[NodePaging](https://alfresco.github.io/adf-component-catalog/classes/NodePaging.html)
docs for further details.
## Retrieving info and metadata from a node
As a first example of usage of the `NodesApiService` class, let's retrieve the properties of a content node, starting from its identifier. To develop this usage, edit the `myOnNodeDoubleClick` method in the `src/app/components/files/files.component.ts` file, as described below.
As a first example of the usage of the `NodesApiService`, 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:
myOnNodeDoubleClick(nodeId) {
this.nodesApi.getNode(nodeId)
.subscribe(
(node) => {
console.log(node.properties);
},
error => { console.log("Ouch, an error happened!"); }
);
}
```ts
myOnNodeDoubleClick(nodeId) {
this.nodesApi.getNode(nodeId)
.subscribe(
(node) => {
console.log(node.properties);
},
error => { console.log("Ouch, an error happened!"); }
);
}
```
This source code will show the properties of the content node into the browser's console as a log. In the screenshot below an example of how the log looks like.
This will show the properties of the content node in the browser's console as a log.
The screenshot below shows an example of what this looks like:
![nodesapiservices_properties](../docassets/images/nodesapiservices_properties.png)
Of course, if you'd prefer to use the node's data into the user interface (a `DataTable` or any other visual component), the principle is the same but what differs is the details of the development.
Of course, if you prefer to use the node's data in the user interface (using a `DataTable` or
other visual component) then the principle is the same.
## Retrieving the node's children
Another common example of `NodesApiService` usage is the retrieving of list of children of a folder node. As an example, edit again the `src/app/components/files/files.component.ts` file and change the `onNodeDoubleClick` method accordingly with the source code below.
Another common use of the `NodesApiService` 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:
```ts
if (node.isFolder) {
// Comment the line below.
@ -91,71 +129,102 @@ Another common example of `NodesApiService` usage is the retrieving of list of c
this.myOnFolderNodeDoubleClick(node.id);
}
```
Now add the `myOnFolderNodeDoubleClick` method as described below and save the typescript file.
Now add the `myOnFolderNodeDoubleClick` method as shown below and save the file:
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.getNodeChildren(nodeId)
.subscribe(
(nodePaging) => {
console.log(nodePaging.list);
},
error => { console.log("Ouch, an error happened!"); }
);
}
```ts
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.getNodeChildren(nodeId)
.subscribe(
(nodePaging) => {
console.log(nodePaging.list);
},
error => { console.log("Ouch, an error happened!"); }
);
}
```
Once done, the user experience changes if you click on a folder node (not a content): in the browser's console you will see something like the following screenshot.
Now, the user experience changes if you click on a folder node (but not a content node)
in the browser's console you will see something like the following screenshot:
![nodesapiservices_nodelist](../docassets/images/nodesapiservices_nodelist.png)
## Creating and deleting a subfolder
`NodesApiService` class is not only about retrieving data. With the `NodesApiService` you can also 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 how to delete it, after its creation (dangerous task!).
The `NodesApiService` 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.
### Creating a subfolder
To create a subfolder, change the `myOnFolderNodeDoubleClick` method as described below and save the typescript file.
To create a subfolder, change the `myOnFolderNodeDoubleClick` method as described below and save the Typescript file.
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.createFolder(nodeId, { "name": "My new subfolder" })
.subscribe(
(node) => {
console.log("Subfolder created with name '" + node.name + "' (id:'" + node.id + "').");
},
error => { console.log("Ouch, an error happened!"); }
);
}
```ts
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.createFolder(nodeId, { "name": "My new subfolder" })
.subscribe(
(node) => {
console.log("Subfolder created with name '" + node.name + "' (id:'" + node.id + "').");
},
error => { console.log("Ouch, an error happened!"); }
);
}
```
Once done, the user experience changes if you click on a folder node (not a content). As an example, double click on the `Shared` folder and in the browser's console you will see something like the following screenshot.
The user experience now changes if you click on a folder node (but not a content node). To check
it out, double click on the `Shared` folder and in the browser's console you will see something
like the following screenshot:
![nodesapiservices_createnode](../docassets/images/nodesapiservices_createnode.png)
As a consequence, a new subfolder named `My new subfolder` will be created. As a proof, you can check the existence of the subfolder using Alfresco Share client or replacing the content of the `myOnFolderNodeDoubleClick` method with `this.navigate(nodeId);`, save it and navigate into the `Shared` folder.
A new subfolder named `My new subfolder` will be created. You can check its existence using
Alfresco Share client or by replacing the content of the `myOnFolderNodeDoubleClick` method
with:
In the following screenshot you can see how the browser should look like.
```ts
this.navigate(nodeId);`
```
...and then saving and navigating to the `Shared` folder.
In the following screenshot you can see how the browser should look:
![nodesapiservices_createnode_proof](../docassets/images/nodesapiservices_createnode_proof.png)
Note that double clicking several times on a folder, the first time only the action should succeed. The behaviour is correct considering that you are trying to create folders with the same name in the same parent folder and this is not admitted from Alfresco Content Services.
Note that if you double-click several times on a folder then the action should only succeed for
the first click. The behaviour is correct if you bear in mind that you are trying to create folders
with the same name in the same parent folder, which is not permitted by Alfresco Content Services.
### Deleting a folder
To delete a folder, change the `myOnFolderNodeDoubleClick` method as described below and save the typescript file.
To delete a folder, change the `myOnFolderNodeDoubleClick` method as described below and save the Typescript file.
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.deleteNode(nodeId)
.subscribe(
success => {
alert("Node deleted! Click on a folder into the left menu.");
},
error => { console.log("Ouch, an error happened!"); }
);
}
```ts
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.deleteNode(nodeId)
.subscribe(
success => {
alert("Node deleted! Click on a folder into the left menu.");
},
error => { console.log("Ouch, an error happened!"); }
);
}
```
**ATTENTION:** This task could delete entire parts of your Alfresco repository if you will double click on the wrong folder. Test it carefully!
**NOTE:** This task could delete entire parts of your Alfresco repository if you double click
on the wrong folder. Test it carefully!
Once saved, click on a folder node (pay attention to the chosen folder) and in the browser you will see something like the following screenshot.
Now, if you click on a folder node (be careful which folder you choose!) then you will see
something like the following screenshot in the browser:
![nodesapiservices_deletefolder](../docassets/images/nodesapiservices_deletefolder.png)
As a proof, you can check that the folder does not exist anymore using Alfresco Share client or replacing the content of the `myOnFolderNodeDoubleClick` method with `this.navigate(nodeId);` and save it again.
You can check that the folder does not exist anymore using Alfresco Share client or by replacing
the content of the `myOnFolderNodeDoubleClick` method with
```ts
this.navigate(nodeId);
```
...and saving the file.

224
docs/tutorials/working-with-nodes-js-api.md
View File

@ -1,147 +1,187 @@
# Working with Nodes using the JS API
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) in some practical examples developed to show how to interact with your instance of Alfresco Content Services, without consuming directly the REST endpoints. With this approach the `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library.
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)
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 `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library.
## Preparing the development environment
To focus the description on the `AlfrescoCoreRestApi`, in this tutorial we are going to develop using the [Alfresco JavaScript application](./creating-javascript-app-using-alfresco-js-api.html). If you don't have it already available into your development environment, check the *how-to* description into the [dedicated tutorial](./creating-javascript-app-using-alfresco-js-api.html).
To focus the description on the `AlfrescoCoreRestApi`, we will develop using the
[Alfresco JavaScript application](./creating-javascript-app-using-alfresco-js-api.md).
If you don't have it already available in your development environment then see the *how-to*
description in the [dedicated tutorial](./creating-javascript-app-using-alfresco-js-api.md).
## About the `AlfrescoCoreRestApi`
Before any development, let's introduce the `AlfrescoCoreRestApi` class. For further details about its implementation, check the documentation [here](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). As you can see, the available methods are in "*1 to 1*" relation with the REST endpoints and services of Alfresco Content Services. This makes the development easier and clean, and enables the developer to a full access to the Alfresco Content Services REST API.
Before going further, let's introduce the `AlfrescoCoreRestApi` class. For further details
about its implementation, check the documentation
[here](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api).
As you can see, the available methods are in one-to-one relation with the REST endpoints and services of Alfresco Content Services. This makes development easy and clean, and gives the developer full access to the Alfresco Content Services REST API.
Starting from the most basic [Alfresco JavaScript application](./creating-javascript-app-using-alfresco-js-api.html), the `AlfrescoCoreRestApi` class can be accessed with the following command.
Starting with the most basic
[Alfresco JavaScript application](./creating-javascript-app-using-alfresco-js-api.md),
the `AlfrescoCoreRestApi` class can be accessed with the following command:
this.alfrescoJsApi.core
## Retrieving the children of a node
As a first example of usage of the `AlfrescoCoreRestApi` class, let's retrieve the children of the root node, identified by the `-root-` alias. As described in the official documentation the method `getNodeChildren` should be used as described below. For this purpose edit the `index.html` file and as follow and replace the JavaScript source code for the login call.
As a first example of the usage of the `AlfrescoCoreRestApi` class, let's retrieve the children of the root node, identified by the `-root-` alias. As described in the official documentation, the method `getNodeChildren` should be used as described below. Edit the `index.html` file as shown below and
replace the JavaScript source code for the login call:
...
this.alfrescoJsApi.login('admin', 'admin').then(function (data) {
```js
...
this.alfrescoJsApi.login('admin', 'admin').then(function (data) {
this.alfrescoJsApi.core.childAssociationsApi.getNodeChildren('-root-', {}).then(
this.alfrescoJsApi.core.childAssociationsApi.getNodeChildren('-root-', {}).then(
function (data) {
function (data) {
var divElement = document.getElementById("result");
var divElement = document.getElementById("result");
for (var i = 0; i < data.list.entries.length; i++) {
for (var i = 0; i < data.list.entries.length; i++) {
console.log(data.list.entries[i]);
var textElement = document.createTextNode(
data.list.entries[i].entry.name +
" (" +
data.list.entries[i].entry.id +
")"
);
var paragraphElement = document.createElement("p");
paragraphElement.appendChild(textElement);
divElement.appendChild(paragraphElement);
}
},
function (error) { console.error(error); });
}, function (error) {
console.error(error);
});
...
Then replace the HTML body as follows.
<body>
<div id='result'></div>
</body>
Once done, save and deploy the source code as described [here](./creating-javascript-app-using-alfresco-js-api.html), executing the following command from the `my-js-app` folder into a terminal.
docker cp ../my-js-app <CONTAINER_ID>:/usr/local/tomcat/webapps
Opening the browser to the URL `http://localhost:8082/my-js-app/` you will see something similar to the following screenshot.
![alfrescocorerestapi_children](../docassets/images/alfrescocorerestapi_children.png)
As an exercise, you can try to implement the navigation between the nodes. To reach the goal, change the source code of the page to accept a `nodeId` parameter and use it as first parameter of the `getNodeChildren` method. Then change the dynamic HTML to create a link element (`a` tag) on the name of the child. The link will point to the same page but with `nodeId` with value `data.list.entries[i].entry.id`.
## Retrieving the node data
Now that you can show the children of a node (and maybe navigate into the repository structure, if you completed the bonus exercise) let's see here how to retrieve and show the data related to a node.
To make the example more complete, we split the final result in two parts: the first about retrieving (and showing) the data about the current node and the second about retrieving (and showing) the data about the children nodes.
In both cases, all is possible thank to the [`getNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#getNode) method, getting information for one node identified starting from a node id.
### Retrieving and showing data about the current node
Starting from the JavaScript application developed in the previous section, let's modify the source code for `function (data)` as follows.
...
function (data) {
var divElement = document.getElementById('nodeInfo');
this.alfrescoJsApi.core.nodesApi.getNode(data.list.entries[0].entry.parentId, {}).then(function(nodeData) {
console.log(nodeData);
console.log(data.list.entries[i]);
var textElement = document.createTextNode(
'This node is named "' +
nodeData.entry.name
+ '" and its children are:'
data.list.entries[i].entry.name +
" (" +
data.list.entries[i].entry.id +
")"
);
var paragraphElement = document.createElement('p');
var paragraphElement = document.createElement("p");
paragraphElement.appendChild(textElement);
divElement.appendChild(paragraphElement);
}
},
function (error) { console.error(error); });
...
}, function (error) {
console.error(error);
});
...
```
This portion of source code is going to retrieve the node data related to the parent of the first node of the results. Of course, if the node does not have children, its execution might throw an exception. As an exercise, change the source code to correctly manage this use case.
Then replace the HTML body as follows:
Once retrieved, the name of the current node is displayed in a text similar to: `This node is named "..." and its children are:`. To put the text in the right place, change the HTML body as follows.
```html
<body>
<div id='result'></div>
</body>
```
<body>
<div id='nodeInfo'></div>
<div id='result'></div>
</body>
Once done, save and deploy the source code as described
[here](./creating-javascript-app-using-alfresco-js-api.md),
by executing the following command from the `my-js-app` folder in a terminal:
### Retrieving and showing data about the children nodes
docker cp ../my-js-app <CONTAINER_ID>:/usr/local/tomcat/webapps
Once done, let's append the following JavaScript source code to the `function (data)`.
If you now open the browser at the URL `http://localhost:8082/my-js-app/`, you will see
something similar to the following screenshot:
...
var divElement = document.getElementById('result');
for (var i = 0; i < data.list.entries.length; i++) {
![alfrescocorerestapi_children](../docassets/images/alfrescocorerestapi_children.png)
this.alfrescoJsApi.core.nodesApi.getNode(data.list.entries[i].entry.id, {}).then(function(nodeData) {
As an exercise, you can try to implement navigation between the nodes. To do this, change the
source code of the page to accept a `nodeId` parameter and use it as the first parameter of the
`getNodeChildren` method. Then change the dynamic HTML to create a link element (`a` tag) on the
name of the child. The link will point to the same page but with `nodeId` set to the value
`data.list.entries[i].entry.id`.
## Retrieving the node data
Now that you can show the children of a node (and maybe navigate into the repository structure, if you completed the bonus exercise), let's see how to retrieve and show the data related to a node.
To make the example more complete, we split the final result into two parts: the first is about
retrieving (and showing) the data for the current node and the second is about retrieving
(and showing) the data for the child nodes.
In both cases, all is possible thanks to the
[`getNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#getNode)
method, which gets information for a node identified by a node id.
### Retrieving and showing data about the current node
Starting from the JavaScript application developed in the previous section, let's modify the source code for `function (data)` as follows:
```js
...
function (data) {
var divElement = document.getElementById('nodeInfo');
this.alfrescoJsApi.core.nodesApi.getNode(data.list.entries[0].entry.parentId, {}).then(function(nodeData) {
console.log(nodeData);
var textElement = document.createTextNode(
nodeData.entry.name +
' - ' +
nodeData.entry.aspectNames
'This node is named "' +
nodeData.entry.name
+ '" and its children are:'
);
var paragraphElement = document.createElement('p');
paragraphElement.appendChild(textElement);
divElement.appendChild(paragraphElement);
}, function(error) { console.error(error); });
},
function (error) { console.error(error); });
}
...
```
As you can see, in this piece of code, the information of each node are retrieved and presented in form of: `<node name> - <list of aspect names>`.
This portion of source code retrieves the node data for the parent of the first node of the results.
Of course, if the node does not have children then this code might throw an exception. As an exercise,
change the source code to manage this situation correctly.
Once retrieved, the name of the current node is displayed in the form:
`This node is named "..." and its children are:...`. To put the text in the right place, change
the HTML body as follows:
```html
<body>
<div id='nodeInfo'></div>
<div id='result'></div>
</body>
```
### Retrieving and showing data about the child nodes
Append the following JavaScript source code to the `function (data)`:
```js
...
var divElement = document.getElementById('result');
for (var i = 0; i < data.list.entries.length; i++) {
this.alfrescoJsApi.core.nodesApi.getNode(data.list.entries[i].entry.id, {}).then(function(nodeData) {
console.log(nodeData);
var textElement = document.createTextNode(
nodeData.entry.name +
' - ' +
nodeData.entry.aspectNames
);
var paragraphElement = document.createElement('p');
paragraphElement.appendChild(textElement);
divElement.appendChild(paragraphElement);
}, function(error) { console.error(error); });
}
```
As you can see, in this piece of code, information about each node is retrieved and presented in the
form: `<node name> - <list of aspect names>`.
### Showing the results
Once done, save and deploy again the source code executing the following command from the `my-js-app` folder into a terminal.
Save and deploy the source code again by executing the following command from the `my-js-app`
folder in a terminal:
docker cp ../my-js-app <CONTAINER_ID>:/usr/local/tomcat/webapps
Opening the browser to the URL `http://localhost:8082/my-js-app/` you will see something similar to the following screenshot.
If you now open the browser at the URL `http://localhost:8082/my-js-app/`, you will see something
similar to the following screenshot:
![alfrescocorerestapi_nodesdata](../docassets/images/alfrescocorerestapi_nodesdata.png)