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.

Alfresco - How to create a custom Admin Console Component

If your extension module needs an Administration interface, you can add a custom Admin Console Component to manage your module. The Admin Console is composed of default administration pages. Each Admin Console page is a simple web script component built from a library of useful functions and macros that are imported into each Admin Console web script.

The custom Admin Console component can be added by implementing a repository web script. In this example we will add a custom component under a new section called “Formtek”. The “General Information” custom page displays the Formtek Root Directory Path and the Formtek Modules installed.

To have the new component listed under the Formtek section we will have to store the web script files in a specific directory path - org/alfresco/enterprise/repository/admin/zformtek.

The web script descriptor file shown below automatically adds this custom component to the Admin Console. In the web script descriptor file the url, family and the authentication tag values are very important. The Admin Console is available only in the Alfresco Enterprise edition and only an Administrator can access it so the url has to begin with /enterprise/admin, the custom component needs to belong to the AdminConsole family and the authentication has to be set to admin.

In the web script controller, we have to inform the Admin Console system which MBean and its properties we want to use in our custom component. In this custom component we are using the ModuleService MBean to get the list of installed modules.

The web script template contains the page layout. For this custom component it loops through the list of installed modules and displays only the Formtek modules. The template uses a number of resource properties that are fetched using the msg function.

The resource properties should be defined in a web script resource file.