The final goal of this exercise is to list all the children of a node (assuming that the Alfresco node is a folder) to dive into the content of the Alfresco repository. The goal is to develop a very simple "repository explorer", with the intent to see in practice how this can be developed easily using the new Alfresco 5.2 REST APIs. Below a brief screenshot of how the simple client looks like.
How to download and install the client
Now that we know the final goal, let's see how to make it work in our development environment. If you haven't been through the previous parts of the tutorial, we strongly recommend to do it before continuing. If you already have your development environment up an running, you can follow the tasks below to setup the client.
You should see the screenshot above into your browser. To use the client, fill in the requested fields with the correct values and click Go. Press the Reset button to clean the result panel. Below you can find a screenshot showing an example of result after pressing the Go button.
Taking a look at how the client works, all the magic happens in the index.html file. This file is a combination of three different technologies:
The HTML used as container for the entire web page.
As you can see from the source code, there are two nested AJAX calls:
the first to /alfresco/api/-default-/public/alfresco/versions/1/nodes/<nodeId>/children to retrieve the list of children of the node,
the second to /alfresco/api/-default-/public/alfresco/versions/1/nodes/<nodeId>/parents to retrieve its parents (an Alfresco mode could have multiple parents).
Each one of the services is going to answer with a JSON, describing the data in the source code collected into the result and result2 variables. You can view each JSON result in your environment using Postman on each described REST service.
Once that the JSON result is collected into the result variable, the getHtmlTable function does the rest building the HTML + CSS content to view the Explorer. You can go through the source code to see how the getHtmlTable function works, in particular how it manages the descriptions (icons and names) and buttons (navigation buttons and viewer).