Obsolete Pages{{Obsolete}}
The official documentation is at: http://docs.alfresco.com
NOTE: This document details the Forms Development Kit in the 3.3 Release, for the latest documentation click here.
Welcome to the Alfresco Forms Development Kit (FDK).
The Alfresco FDK was introduced in the 3.3 release, it provides support for administrators and developers who wish to configure, extend or customize forms in Spring Surf based applications, for example, Share.
The AMP (alfresco-fdk.amp) can be installed into the alfresco.war file using the normal techniques, either with the Module Management Tool or using the apply_amps script provided with the installer.
Presuming the Tomcat instance you are using has been configured to use the shared folder you can simply drop the JAR file (alfresco-fdk.jar) into <tomcat>/shared/lib.
You can of course drop the JAR file into the application's WEB-INF/lib folder too i.e. <tomcat>/webapps/<appname>/WEB-INF/lib but this will be removed when you update or upgrade your application so the technique above is recommended.
If you are installing the FDK into an older Spring Surf application that does not contain the required import statement the fdk-context.xml file can be manually added to your application using the following import:
<import resource='classpath:alfresco/fdk-context.xml'/>
If you are building Alfresco from source using a development environment you may wish to also build and deploy the FDK.
The main Ant build.xml file provides several targets to allow for this.
The AMP installs an example model and the JAR provides a 'Form Console' page, form configuration for the example model and some Share specific configuration overrides.
The 'Change Type' action in Share will now have three options (for cm:content nodes), 'Gadget', 'Company Details' and 'Everything'. The 'Apply Aspect' action in Share will now have an 'Exif' aspect available.
The FDK also provides an extension point (alfresco/web-extension/fdk-config-custom.xml) so that further form configuration can be provided and tested via the form console page.
If you've worked with forms in the 3.2 release you may recognize the Form Console as the old form-test page available in Share. It has now been renamed and moved to the FDK so it can be used in any Spring Surf based application.
http://<host>:<port>/<app>/page/form-consolefor example: http://localhost:8080/share/page/form-console if you are using a default installed Alfresco instance.
Out of the box the following form IDs are provided, these can be entered in the 'Id' field in the 'Form Details' section when viewing the forms for a node of type 'Everything (fdk:everything)':
The screenshot below shows the Form Console displaying the 'nested-sets' form configuration. The 'fdk-config-custom.xml' file mentioned above can be used to define more forms for further testing.
In it's current state the FDK provides a demonstration of what can be done with some of the features of the forms engine, all the samples previously distributed with Share have been moved into the FDK and made available in an easy to install package, this includes most the examples from Episode 35 of Tech Talk Live where the forms engine was discussed and demonstrated.
The following sections show a few screenshots and configuration of the example forms.
When an instance of the 'Gadget' (fdk:gagdet) type is created and it's metadata edited the following form is displayed.
The configuration required to achieve this is shown below.
<config evaluator='node-type' condition='fdk:gadget'>
<forms>
<form>
<edit-form template='/fdk/templates/tab-edit-form.ftl' />
<field-visibility>
<show id='cm:name' />
<show id='cm:description' />
<show id='fdk:make' />
<show id='fdk:model' />
<show id='fdk:summary' />
<show id='fdk:type' />
<show id='fdk:subType' />
<show id='fdk:rrp' />
<show id='fdk:releaseDate' />
<show id='fdk:endOfLifeDate' />
<show id='fdk:retailers' />
<show id='fdk:rating' />
<show id='fdk:contact' />
<show id='fdk:reviews' />
<show id='fdk:company' />
<show id='fdk:pressRelease' />
<show id='fdk:images' />
<show id='fdk:manufacturer' />
<show id='fdk:software' />
<show id='fdk:originalDateTime' />
<show id='fdk:compression' />
<show id='fdk:xResolution' />
<show id='fdk:yResolution' />
<show id='fdk:resolutionUnit' />
<show id='fdk:flash' />
</field-visibility>
<appearance>
<set id='' label-id='fdk.tab.label.details' />
<set id='press' label-id='fdk.tab.label.press' />
<set id='exif' label-id='fdk.tab.label.exif' />
<field id='cm:description'>
<control template='/org/alfresco/components/form/controls/richtext.ftl' />
</field>
<field id='fdk:model'>
<control template='/fdk/controls/autocomplete.ftl'>
<control-param name='ds'>/service/ds/autocomplete/google</control-param>
</control>
</field>
<field id='fdk:releaseDate' set='press' />
<field id='fdk:endOfLifeDate' set='press' />
<field id='fdk:retailers' set='press' help-id='fdk.help.gadget.retailers' />
<field id='fdk:rating' set='press' />
<field id='fdk:contact' set='press' />
<field id='fdk:reviews' set='press' />
<field id='fdk:company' set='press' />
<field id='fdk:pressRelease' set='press' />
<field id='fdk:images' set='press' />
<field id='fdk:manufacturer' set='exif' />
<field id='fdk:software' set='exif' />
<field id='fdk:originalDateTime' set='exif' />
<field id='fdk:compression' set='exif' />
<field id='fdk:xResolution' set='exif' />
<field id='fdk:yResolution' set='exif' />
<field id='fdk:resolutionUnit' set='exif' />
<field id='fdk:flash' set='exif' />
</appearance>
</form>
</forms>
</config>
The FDK installs an aspect named 'Exif' (fdk:exif) which represents a subset of the standard EXIF metadata. When this aspect or the built-in dublin core aspect are applied to a cm:content node and it's metadata is edited the following form is displayed, the expanded accordion component is also shown.
Fdk-custom-set-templates.png | Fdk-exif-accordion.png |
The configuration required to achieve this is shown below.
<config evaluator='node-type' condition='cm:content'>
<forms>
<form>
<field-visibility>
<show id='fdk:manufacturer' />
<show id='fdk:software' />
<show id='fdk:originalDateTime' />
<show id='fdk:compression' />
<show id='fdk:xResolution' />
<show id='fdk:yResolution' />
<show id='fdk:resolutionUnit' />
<show id='fdk:flash' />
</field-visibility>
<appearance>
<set id='dublin-core' appearance='' template='/fdk/templates/custom-set-dublincore.ftl' />
<set id='exif' appearance='' label-id='fdk.tab.label.exif' template='/fdk/templates/custom-set-exif.ftl' />
<field id='cm:publisher' set='dublin-core' />
<field id='cm:contributor' set='dublin-core' />
<field id='cm:type' set='dublin-core' />
<field id='cm:identifier' set='dublin-core' />
<field id='cm:dcsource' set='dublin-core' />
<field id='cm:coverage' set='dublin-core' />
<field id='cm:rights' set='dublin-core' />
<field id='cm:subject' set='dublin-core' />
<field id='fdk:manufacturer' set='exif' />
<field id='fdk:software' set='exif' />
<field id='fdk:originalDateTime' set='exif' />
<field id='fdk:compression' set='exif' />
<field id='fdk:xResolution' set='exif' />
<field id='fdk:yResolution' set='exif' />
<field id='fdk:resolutionUnit' set='exif' />
<field id='fdk:flash' set='exif' />
</appearance>
</form>
</forms>
</config>
When an instance of the 'Company' (fdk:company) type is created and it's metadata edited the following form is displayed.
The configuration required to achieve this is shown below.
<config evaluator='node-type' condition='fdk:company'>
<forms>
<form>
<edit-form template='/fdk/templates/2-column-edit-form.ftl' />
<field-visibility>
<show id='cm:name' />
<show id='fdk:email' />
<show id='fdk:url' />
<show id='fdk:tel' />
<show id='fdk:street1' />
<show id='fdk:street2' />
<show id='fdk:city' />
<show id='fdk:county' />
<show id='fdk:state' />
<show id='fdk:postCode' />
<show id='fdk:zip' />
<show id='fdk:country' />
</field-visibility>
</form>
</forms>
</config>
By default field labels are rendered above the field they represent. Although there is a lot of evidence from user studies to support this approach as being the most favorable in terms of user experience it's not to everyone's taste. The FDK provides a small CSS file as an example that moves the labels to the left of the field as shown in the screenshot below.
The configuration required to achieve this is shown below.
<config>
<forms>
<dependencies>
<css src='/fdk/left-aligned-label.css' />
</dependencies>
</forms>
</config>