Create a Custom Page in Share

In this bog entry, I will add new custom page in Alfresco Share. This page can be added to our site same as other pages like wiki, document library, calendar etc.

I have taken reference from this post.  http://edlovesjava.blogspot.com/search/label/extending%20share

Whenever you want to do any customization in alfresco, rather then doing it from scratch, refer what is out-of-box available and try to follow the same flow.

To add page in alfresco is similar to Alfresco Surf (if you are familiar with that)

Step -1
The starting point of adding Page is , Create a xml file named helloPage.xml in the following folder

C:\Alfresco3.1.2\tomcat\webapps\share\WEB-INF\classes\alfresco\site-data\pages

Add the following code in the file  helloPage.xml
This file defines, title, description and name of template-instance


<?xml version='1.0' encoding='UTF-8'?>
<page>
<title>Hello Page</title>
<description>Simple test page</description>
<template-instance>helloPage</template-instance>
<authentication>user</authentication>
</page>

Step-2
Now, create template-instance named - helloPage.xml in the following folder

C:\Alfresco3.1.2\tomcat\webapps\share\WEB-INF\classes\alfresco\site-data\template-instances

Add the following code in the template-instance file. This file defines the name and path of template file.  Here, file name is – sample-helloPage.ftl and path is org/alfresco/

<?xml version='1.0' encoding='UTF-8'?>
<template-instance>
<template-type>org/alfresco/sample-helloPage</template-type>
    <properties>
        <hasTreeview>true</hasTreeview>
    </properties>
</template-instance>

Step-3

Now, create template-instance named - sample-helloPage.ftl in the following folder

C:\Alfresco3.1.2\tomcat\webapps\share\WEB-INF\classes\alfresco\templates\org\alfresco

This page actually renders all the required contents of your page.
It may include different components.

Add any template code.
I am adding here simple, text

Add the template as per your requirement




Step-4

Final step is, let Share know about newly added page.

Create or Edit the file named - web-framework-config-custom.xml in the following folder
C:\Alfresco3.1.2\tomcat\shared\classes\alfresco\web-extension

Add the following code in the file web-framework-config-custom.xml

<alfresco-config>

   <config evaluator="string-compare" condition="SitePages" replace="true">
   <pages>
      <page id="helloPage">helloPage</page>
    </pages>
</config>
   
</alfresco-config>


To test the page

Restart the Tomcat(your application server)

Login in to your Share (http://localhost:8080/share/)

Go to the created site,
Click on Customize Site, --> Add Pages
Here you should find our newly created page named  Hello Page.  Add that Page.

In the Top navigation, you should find the new page.

How to access Alfresco repository in Alfresco Share

This Blog entry will provide you an example of Web Script to access Alfreso repository into Share

A Web Script is simply a service bound to a URI which responds to HTTP methods such as GET, POST, PUT and DELETE.

To know, in detail about Web Script, please go through, http://wiki.alfresco.com/wiki/Web_Scripts

Lets walk through an example, I am going to show you, how you can access Alfresco data repository into Alfresco Share.
Just take a scenario, Alfresco Share doesn’t provide you workflow history list which is available in Alfresco explorer or web client. Now, you might get requirement to get this history in Share by dashlet.

Here, I am going to show you just simple example – Document Property Web Script.

As, you might know, to In Share, you cant directly access Alfresco repository, it can be done either by RESTful API Reference or third party data fetched from XML or JSON sources based on the standard mechanisms provided by the Surf Platform.

Here, Document Property Web Script will simple output some document’s property like name, date of creation etc. in JSON format in Alfresco and I would retrieve this text in Alfresco Share.

PART 1
So first lets create a web script in alfresco for that you need following files.
docprop.get.desc.xml
docprop.get.json.ftl

Here, we don’t need .js file, as we are not going to have any specific behavior for our web script.

Create all above files in your alfresco web client’s Company Home( Data Dictionary ( Web Scripts ( Org ( Alfresco ( sample.

docprop.get.desc.xml

Enter the following code in your description file

<webscript>
<shortname>Document Property</shortname>
<description>It provides document’s name and date of creation and Creator property</description>
<url>/sample/docprop.json</url>
<authentication>user</authentication>
<transaction>required</transaction>
</webscript>

For an example, I have created Space  TestFolder in CompanyHome and TestFolder contains  test.txt, readmeWebScripts.txt files and one space named Data .

docprop.get.json.ftl
Enter the following code in json.ftl file, it would retrieve children of space TestFolder and its property in Json format.

{

"docprop" : [
<#list companyhome.childByNamePath["TestFolder"].children as child>
{
    "name" : "${child.properties.name}" ,
  
    "creator" : "${child.properties.creator}",

   "CreatedDate" : "${child.properties.created?datetime}"
}
<#if child_has_next> , </#if>

</#list>
]
}


now, try your webscript
goto ,,   http://localhost:8080/alfresco/service/index
Click on Refresh Web Scripts

If everything is fine then it will give you following message with number of web scripts that obviously may differ.

Maintenance Completed
Reset Web Scripts Registry; registered 229 Web Scripts. Previously, there were 228.

Check the result of the web script by following URI as per our example

http: //<host>:<port>/alfresco/service/sample/docprop.json

In my case, it will be

http://localhost:8080/alfresco/service/sample/docprop.json

Output will be docprop.json file which would contain

{
"docprop" : [
{
    "name" : "test.txt" ,
     "creator" : "admin",
     "CreatedDate" : "Nov 16, 2009 10:35:37 AM"
}
 ,
{
    "name" : "readmeWebScripts.txt" ,
    "creator" : "admin",
   "CreatedDate" : "Nov 16, 2009 10:35:37 AM"
}
 ,
{
    "name" : "Data" ,
    "creator" : "admin",
     "CreatedDate" : "Nov 16, 2009 11:14:35 AM"
}
]}


PART 2

Here, we will create a dashlet and this dashlet would use docprop.json file to retrieve data.

To create a dashlet we require following three files.

docproperty.get.desc.xml
docproperty.get.js
docproperty.get.html.ftl

As per your installation folder

(C:\Alfresco\tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\dashlets)

Create all three files in dashlet folder.

docproperty.get.desc.xml

Enter the following code in your description file

<webscript>
   <shortname>Documen Property</shortname>
   <description>Dashlet to list document property from Alfresco</description>
   <family>user-dashlet</family>
   <url>/components/dashlets/docproperty</url>
</webscript>

docproperty.get.js

Enter the following code in your .js file, which would be used to connect to Alfresco repository to retrieve data of docprop.json file


var connector = remote.connect("alfresco");
var data = connector.get("/sample/docprop.json");

// create json object from data
var result = eval('(' + data + ')');
model.docprop = result["docprop"];

docproperty.get.html.ftl

Enter the following code in your html.ftl file which would use this docprop object  to retrieve data

<table>
<tr>
    <th>Name </th>
    <th>Creator </th>
    <th>Date of Creation </th>
</tr>
<#list docprop as t>
<tr>
    <td>${t.name}</td>
    <td>${t.creator}</td>
    <td>${t.CreatedDate}</td>
</tr>
</#list>
</table>

To test the dashlet
Go to http://localhost:8080/share/service/index

Click on Refresh Web Scripts

If everything is fine then it will give you following message with number of web script.(which obviously may differ)

"Maintenance Completed
Reset Web Scripts Registry; registered 179 Web Scripts. Previously, there were 178 "

Login in to your Share (http://localhost:8080/share/)

Click on Customize the dashboard,  ( Add Dashlet,
Here you should find our new dashlet named - Document Property, Add it

And on your dashboard, you will find the property list, which we retrieved in Alfresco webscript.