Dr. Q's Workshop

In Alfresco Web Content Management (WCM) Server, Web Forms are used to capture content from the user, store it as XML in Alfresco at a certain path. For capturing content, an XML Schema needs to be created by form developers. It is then rendered automatically as a user-friendly web based form for content contributors.
To render the form entry UI to the end users, an open source project Chiba is used to transform the XML schema into an internal representation of form (XForms), and then present UI controls for elements and attributes described in the schema.
Web Forms are created and administered within the Web Forms space within the Data Dictionary. They can also be configured with rendering engine templates for generating renditions of the collected content.
In addition, a default workflow is defined for managing the process by which form instance data and renditions generated by the form are submitted to the staging sandbox.
In general, developing and maintaining Alfresco Web Forms requires the basic skills of XML, XSD, XSLT and FreeMarker. Alfresco provides some excellent documentation on its wiki site. The goal of this tutorial is to discuss and explain main features of Alfresco Web Forms by going through a dozen real world examples.
We will start with a really simple one field Web Form and gradually get into more advanced features such as nesting types, dynamic schema, widget configuration etc.

HTML Block

Let us start with a really simple example, HTML Block, which consists of one and only one String element. It can be useful for modelling web content such as ad hoc text/html block, message of the day etc.
As we can see from its schema file, it has a single root element defined with name HtmlBlock. The root element consists a single xs:string child element which has its appearance configured as full. In the generated user entry form, the default mapping for xs:string element will be a WYSWYG rich text editor for text area.
The appearance configuration controls the looking-n-feel of the rich text editor. As for the typical Alfresco installation, the WYSWYG editor is the TinyMCE editor and the full option makes the TinyMCE editor to display two rows of its basic buttons. We also have a few other preconfigured appearance options defined in the web-client-config-wcm.xml file which is placed under alfresco\WEB-INF\classes\alfresco. We will have more discussion on the TinyMCE appearance configuration in the following examples.

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
           xmlns:hb="http://www.alfresco.org/alfresco/html-block"
           targetNamespace="http://www.alfresco.org/alfresco/html-block"
           xmlns:alf="http://www.alfresco.org"
           elementFormDefault="qualified">
  <!-- Root Element for basic html block -->
  <xs:element name="HtmlBlock">
  <xs:complexType>
    <xs:sequence>
       <xs:element name="Body" type="xs:string">
          <xs:annotation>
             <xs:appinfo>
                 <alf:appearance>full</alf:appearance>
	      </xs:appinfo>
	  </xs:annotation>
	</xs:element>
     </xs:sequence>
   </xs:complexType>
 </xs:element>
</xs:schema>

(Schema for HTML Block)

Now if we login Alfresco web console and setup a new web form with the above XML schema file and then associate it with a web project, we will be a able to create web content according to the schema.
The following is a sample instance of this content type in XML format.

<?xml version="1.0" encoding="UTF-8"?>
<hb:HtmlBlock xmlns:hb=http://www.alfresco.org/alfresco/html-block
 	xmlns:alf="http://www.alfresco.org"
xmlns:chiba="http://chiba.sourceforge.net/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<hb:body>Test <strong>Text Block</strong><br /></hb:body>
</hb:HtmlBlock>

(HTML Block Content Instance in XML)

Alfresco allows users to associate web form with multiple rendition templates to render web content in various formats such as plain text, HTML and PDF. Out of the box, it supports three types of rendition engines, XSLT, Freemarker and XSL-PO.
The following is a sample XSLT template for the HTML Block web form. The XSLT engine Alfresco provides also supports a set of system variables and functions. For example, in the sample XSLT template, we can get the rendition file name using $alf:rendition_file_name. The complete description of the system variables and functions can be found at this wiki page.

<xsl:stylesheet version="1.0"
     xmlns:xhtml="http://www.w3.org/1999/xhtml"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:hb="http://www.alfresco.org/alfresco/html-block"
     xmlns:fn="http://www.w3.org/2005/02/xpath-functions"
     exclude-result-prefixes="xhtml hb fn">

  <xsl:output method="html"
     encoding="UTF-8"
     indent="yes"
     doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
     doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />

  <xsl:preserve-space elements="*" />

  <xsl:template match="/">
     <div class="html-block">
      <xsl:attribute name="id">
	<xsl:value-of select="$alf:rendition_file_name"/>
      </xsl:attribute>
   <xsl:value-of select="/hb:HtmlBlock/hb:Body" disable-output-escaping="yes"/>
        </div>
  </xsl:template>

</xsl:stylesheet>

(XSLT Rendition Template for HTML Block)

<div class="html-block" id="HB00.html">
Test <strong>Text Block</strong><br />
</div>

(HTML Rendition of the HTML Block Content Instance)

————————————————————

• Learning Alfresco Web Forms by Examples (Part 1)
• Learning Alfresco Web Forms by Examples (Part 2)
• Learning Alfresco Web Forms by Examples (Part 3)
• Learning Alfresco Web Forms by Examples (Part 4)
• Learning Alfresco Web Forms by Examples (Part 5)
• Learning Alfresco Web Forms by Examples (Part 6)
• Learning Alfresco Web Forms by Examples (Part 7)
• Learning Alfresco Web Forms by Examples (Part 8 )
• Learning Alfresco Web Forms by Examples (Part 9)
• Get Started with the Web Form Examples

Post a Comment