Alfresco Share: Build New Share Pages with Familiar Tools

Standard Alfresco Share is based on standard HTML, CSS and Javascript, but it also uses a number of frameworks and tools, like Alfresco Surf, Alfresco Aikau, YUI2 JS framework, the Dojo Toolkit and Freemarker. Knowing about Java and the Spring Framework will help too.  All those different technologies could be a barrier to getting started with Share development.

Granted, if you build new pages in Share, you'll probably want to reuse standard Share components, like the header, footer, menus, etc.  In that case it makes sense to stick with using Share technologies.

But you might be interested in knowing that you can build and wire in a web page that interoperates with other pages in Alfresco Share using totally different technologies.

Let's look at what is needed to build a page that works in Alfresco Share but which is built using JSP, for example.  We can't totally escape the Surf configuration.  But we only need three files to define the Share page: page, template-instance and template-type. The files are relatively small.

<alfresco>/tomcat/shared/classes/alfresco/site-data/pages/sharejsp.xml

<?xml version='1.0' encoding='UTF-8'?>
<page>
   <title>Share JSP Page</title>
   <description>Share JSP Page</description>
   <template-instance>sharejsp</template-instance>
   <authentication>user</authentication>
</page>

<alfresco>/tomcat/shared/classes/alfresco/site-data/template-instances/sharejsp.xml

<?xml version='1.0' encoding='UTF-8'?>
<template-instance>
   <template-type>sharejsp</template-type>
</template-instance>

<alfresco>/tomcat/shared/classes/alfresco/site-data/template-types/sharejsp.xml

<?xml version="1.0" encoding="UTF-8"?>
<template-type>
    <title>Share JSP Page</title>
 <description>Custom page for Alfresco Share</description>
 <processor mode="view">
  <id>jsp</id>
  <jsp-path>/jsp/sharepage.jsp</jsp-path>
 </processor>
</template-type>

That's it!  Now let's define the content for the JSP page.  The JSP file needs to go within the Share expanded WAR area.  The location and file is defined by the template-type definition.

<alfresco>/tomcat/webapps/share/jsp/sharepage.jsp

<%--  Custom Alfresco Share JSP Page Example --%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ page import="org.alfresco.web.site.*" %>

<%
    String ShareHome = "http://localhost:8080/share/page";

    // Retrieve user name from the session
    String userid = (String)session.getAttribute(SlingshotUserFactory.SESSION_ATTRIBUTE_KEY_USER_ID);
 
    out.println("<center><h1>" + userid + "!  Welcome to a Custom JSP Page</h1></center>"); 
    out.println("<center><img src=\"https://svn.alfresco.com/repos/alfresco-open-mirror/alfresco/HEAD/root/projects/web-client/source/web/images/logo/alfresco3d.jpg\" /></center>"); 
 
    // Set up a button to navigate to another authenticated Share page
    out.println("<center><form>");
    out.println("<input type=\"button\" value=\"Return to Share Home\" onclick=\"window.location.href='" + ShareHome + "'\" />");
    out.println("</form></center>");  
%>

And finally, here is the rendered custom JSP page within Share:

The new page obeys Share authentication.  For example, if you enter the URL to the page when you're not logged into Share, you will be first redirected to the standard Share login page.

On the client page in the browser, by using the proxy URL to the Alfresco repo, calls can be made to the Alfresco repo REST API with Javascript/AJAX.  Within the JSP page on the server, Java HTTP requests calls can be made to the Alfresco repo, just remember to pass along the JSESSIONID cookie from the page as part of your request to enable authentication.