Customising An Alfresco JSP

[resplin]

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com

Web Client Customization

Table of Contents

• 1 Introduction


• 2 Overriding the navigation rules


• 3 Custom JSP and strings
  
  
  
  • 3.1 Displaying Custom Metadata
  
  


• 4 Packaging and deploying

Introduction

This example shows how the document details page can be customised using some of the new features of 1.3. The custom page will show a 3 column property sheet component and will change the title of the panel holding the property sheet. This example is also included as the CustomJSP sample in the SDK.

Overriding the navigation rules

When the view details icon for a content node is clicked in the web client the showDocProperties action is fired. This will look for a JSF navigation rule with a from-outcome of showDocProperties, which in turn tells JSF which page to show next.

You can override the page to go to when the showDocProperties outcome is encountered by supplying a custom faces-config.xml. The example below shows how you would configure the web client to show your custom version of document-details.jsp. There are several other rules that also need to be present (not shown here for brevity), simply search for all occurrences of the original document-details.jsp path, copy them to your faces-config.xml file and replace with the path to your custom JSP.

<faces-config>

   <navigation-rule>
      <from-view-id>/jsp/*</from-view-id>
      <navigation-case>
         <from-outcome>showDocDetails</from-outcome>
         <to-view-id>/jsp/extension/document-details.jsp</to-view-id>
      </navigation-case>
   </navigation-rule>

   ....

</faces-config>

Custom JSP and strings

The easiest way to customise a JSP is to copy the existing page to your extension area and modify it. For
this example we'll copy /jsp/dialog/document-details.jsp.

The first change is to modify the title of the properties panel, it will now say '3 Column Properties'. Create a webclient.properties file, place it in the alfresco.extension package populate it with the following contents.

three_column_properties=3 Column Properties

Load the custom bundle as explained in the Adding Custom I18N Strings guide and change the label for the panel holding the property sheet to use the new string. The first line of the panel definition should look like:

The second change is to adjust the number of columns the property sheet component renders. Find the rropertySheet tag on the page and change it so it looks like the following:

<r:propertySheetGrid id='document-props' value='#{DocumentDetailsBean.document}'  
                     columns='3' var='documentProps' mode='view' 
                     labelStyleClass='propertiesLabel' externalConfig='true' />

Displaying Custom Metadata

To display custom metadata, the following format will display the requested values:

<some unique id>' value='#{<node>.properties['{<uri of the namespace for the custom metadata>}<custom property>']'/>

Replace <some unique id> with an id not used in your JSP. 
Replace <node> with a reference to the node that the tag should retrieve the custom metadata from. 
Replace <uri of the namespace for the custom metadata> with the uri specified in the custom model.xml 
where the custom property resides. 
Replace <custom property> with the property name. 

Packaging and deploying

Refer to the Packaging And Deploying Extensions guide for instructions on packaging and deploying your extension.

Alternatively, you can download the SDK from sourceforge or get the latest code from SVN where you'll find a prepared CustomJSP sample.

Once deployed your document-details.jsp page should look like the screenshot below.

three-col-props.gif