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.

Alfresco Share - helloworld Dashlet

In this blog entry, I will creare a simple HelloWorld(most favorite for all) dashlet in Alfresco Share.

Dashlet is simple component, which makes together dashboard. Dashlet is single Web Script.

To create a dashlet, we need following files from that some files are optional, you may not require in each and every dashlet.

Create all files in the following folder (As per your installation)
C:\Alfresco3.1.2\tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\dashlets

helloworld.get.desc.xml
helloworld.get.js
helloworld.get.html.ftl
helloworld.get.properties

helloworld.get.desc.xml

This is description file of our dashlet which includes display name, description, where you want to put your dashlet, either in user-dashlet family or in site-dashlet family, and url of dashlet. It may include other basics like required authentication, transaction is required or not etc.

<webscript>
   <shortname>Hello World</shortname>
   <description>Hello World Dashlet</description>
   <family>user-dashlet</family>
   <url>/components/dashlets/hello-world</url>
</webscript>


helloworld.get.js

Java script file is to add behavior in the dashlet. It can be used to interact back-end  store. It is optional.
Here, we do not require java script file, but I will show how we can use it.

var name = "niketa";
model.user = name;


helloworld.get.properties

This is our property file, It is also optional

title = Hello World

helloworld.get.html.ftl

This is a freemarker template file. It will render the response.

<div class="dashlet">
  <div class="title">${msg("title")}</div><#-- title’s value will be taken from property file - ->        
  <div class="body scrollableList">
    Hello ${user} <#-- user’s value will be taken from .js file - ->         
  </div>
</div>


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 - Hello World, Add it

And on your dashboard, you will find the message "Hello niketa"