Configuring XForms Widgets

Document created by resplin Employee on Jun 6, 2015
Version 1Show Document
  • View in full screen mode

Obsolete Pages{{Obsolete}}

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



{{AVMWarning}}
AVM

As of 2.1, all widget configurations and mappings can be configured in web-client-config-wcm.xml.  This configuration enables specifying the javascript UI control to use based on the combination of XForms control, XML Schema data type, and appearance attribute.  For certain UI controls (such as alfresco.xforms.FilePicker and alfresco.xforms.RichTextEditor), parameters can be specified to modify the behavior of the widget.

web-client-config-wcm.xml contains a set of widget definitions that can be used to map the combination of XMLschema data type, XForms control, and appearance to a UI control which is used for display.



<xforms>
   <widget xforms-type='...' appearance='...' xml-schema-type='...' javascript-class-name='...'>
     <param name='...'>...</param>
     ...
   </widget>
   ...
</xforms>

Only the xforms-type and javascript-class-name must be specified in configuration.  For the other attributes, if unspecified, the control will be used by default when a control with the XForms type is encountered. If specified, the control will only be used when the appearance or xml schema type match.

Appearance names are arbitrary.  Any number of controls for the same xforms-type can be configured with different appearance names and then used from any number of forms.


RichTextEditor configuration


The alfresco.xforms.RichTextEditor control manages a TinyMCEcontrol.

Please note that Alfresco currently supports only TinyMCE version 2.0.6.1. and plugins for that version The latest version of TinyMCE, and plugins for that latest version, will not work properly in Alfresco.

Any parameter that TinyMCE takes can be passed as a parameter to the RichTextEditor.  Common configuration parameters can be found here.  Note that in order to enable plugins not distributed with alfresco, the plugin javascript must be copied into the distribution in order to be made available to the forms UI.  For example configurations, please look at web-client-config-wcm.xml.


FilePicker configuration (Web Forms only)


Restricting File Picker to content types and/or mime types


The alfresco.xforms.FilePicker takes parameters to restrict which types of content are selectable in the widget, and parameters to filter selectable files by mimetype.  The parameter names are


  • selectable_types which takes as a value a comma separated list of content types as defined in the dictionary
  • filter_mimetypes which takes as a value a comma separated list of mime type glob patterns.

For example:



<widget xforms-type='xf:upload' javascript-class-name='alfresco.xforms.FilePicker' appearance='my_special_appearance'>
  <param name='selectable_types'>wcm:avmcontent</param>
  <-- only files are selectable, not wcm:avmfolder -->
  <param name='filter_mimetypes'image/*,text/plain,text/html</param>
  <-- any image, plain text file, or html is selectable, all others will be filtered out -->
</widget>

Here are pre-configured FilePicker examples from web-client-config-wcm.xml, as per Alfresco 2.1:

Appearance: <none> (default file picker):



           <widget xforms-type='xf:upload'
                   javascript-class-name='alfresco.xforms.FilePicker'>
             <param name='selectable_types'>wcm:avmcontent,wcm:avmfolder</param>
           </widget>

Appearance: image_file_picker:



           <widget xforms-type='xf:upload'
                   appearance='image_file_picker'
                   javascript-class-name='alfresco.xforms.FilePicker'>
             <param name='selectable_types'>wcm:avmcontent</param>
             <param name='filter_mimetypes'>image/*</param>
           </widget>

Appearance: html_file_picker:



           <widget xforms-type='xf:upload'
                   appearance='html_file_picker'
                   javascript-class-name='alfresco.xforms.FilePicker'>
             <param name='selectable_types'>wcm:avmcontent,wcm:avmfolder</param>
             <param name='filter_mimetypes'>text/html</param>
           </widget>

Appearance: folder_picker:



           <widget xforms-type='xf:upload'
                   appearance='folder_picker'
                   javascript-class-name='alfresco.xforms.FilePicker'>
             <param name='selectable_types'>wcm:avmfolder</param>
             <param name='filter_mimetypes'>*</param>
           </widget>

Appearance: file_picker



           <widget xforms-type='xf:upload'
                   appearance='file_picker'
                   javascript-class-name='alfresco.xforms.FilePicker'>
             <param name='selectable_types'>wcm:avmcontent</param>
           </widget>

Restricting File Picker to a configured AVM folder path or configured search (2.2)


New features have been added, to Alfresco 2.2, such that the File Picker can be optionally restricted in two additional ways:


To an AVM folder: To enable this, set the file picker's 'folder_restriction' parameter.

To a configured search: To enable this, set the picker's 'configured_search_name' parameter.

These restriction parameters (mentioned above) must be defined in widget elements in the web-client-config-wcm.xml file for the associated features to take effect.


'File Picker' Folder Restriction


The 'folder_restriction' parameter must be set to a relative AVM folder path (e.g. some/relative/folder/path). This must point to the AVM folder to which you want to restrict the file picker and be relative to the root of the webapp folder (of the web project). Only the contents of the specified folder will be available for selecting in the file picker. If the 'folder restriction' parameter is set to the example relative folder path above, then the absolute path for that AVM folder will be something like '<sandbox-store-id>:/www/avm_webapps/<webapp-id>/some/relative/folder/path' - where '<sandbox-store-id>' is the ID of the sandbox being populated by the file picker and '<webapp-id>' is the current webapp folder (such as 'ROOT' for the default webapp).

To try out this feature, there is a sample widget defined in web-client-config-wcm.xml with appearance 'folder_restricted_file_picker'. This parameter must be uncommented and set to take effect for any XForms schema using a file picker having the 'folder_restricted_file_picker' appearance.


'File Picker' Configured Search Restriction


The 'configured_search_name' parameter must be set to the name of a configured search. The file picker contents will be restricted to the results of this named configured search. The configured search must be stored in the Public Saved Searches folder.

To try out this feature, there is a sample widget defined in web-client-config-wcm.xml with appearance 'search_restricted_file_picker'. This parameter must be uncommented and set to take effect for any XForms schema using a file picker having the 'search_restricted_file_picker' appearance.




Return to WCM Forms Developer Guide

Attachments

    Outcomes