1 / 19

Learning Alfresco Forms Service By Examples

Learning Alfresco Forms Service By Examples. Yong Qu Chief Solutions Architect www.alfresco.com. Introduction. Forms Service (?) Prior to 3.2 DM Forms vs. WCM Forms Customization /Extension possible but not easy. Forms Service in 3.2

tadhg
Download Presentation

Learning Alfresco Forms Service By Examples

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Learning Alfresco Forms Service By Examples Yong Qu Chief Solutions Architect www.alfresco.com

  2. Introduction • Forms Service (?) Prior to 3.2 • DM Forms vs. WCM Forms • Customization /Extension possible but not easy. • Forms Service in 3.2 • First Step towards a SINGLE forms service for all Alfresco products. • Easy to extend, customize and package. • Community adoption and contribution will be key for its success.

  3. Architecture

  4. Examples • Custom Controls. • WYSIWYG Editor (TinyMCE )‏ • Auto Complete Picker • Cascade Select • Custom Form Templates. • Tab View • Custom Set Appearances. • Accordion

  5. Custom Control TinyMCE Editor • Generate Inline WYISWYG Editor for Text Field. • Support Control Parameters for • Editor Width • Editor Height • Editor Appearance (Default, Full and Plugins)‏

  6. Custom Control TinyMCE Editor (Cont.)‏ • Form Configurations • …… • <field id="cm:description"> • <control template="/org/alfresco/components/form/controls/wysiwyg.ftl" /> • </field> • <field id="forms32:bio"> • <control template="/org/alfresco/components/form/controls/wysiwyg.ftl"> • <control-param name="height">200</control-param> • <control-param name="width">420</control-param> • <control-param name="appearance">plugins</control-param> • </control> • </field> • ......

  7. Custom Control Auto Complete Picker • Generate an Auto Complete Selection List .

  8. Custom Control Auto Complete Picker (Cont.)‏ • Control Components: • External Services (e.g. Google Suggest, Yahoo Suggest etc.)‏ • Local Alfresco Web Script Services to provide nicely formatted local data sources for YUI Widgets. • YUI Auto Complete Widget to generate the selection list. Picker Control YUI Auto Complete Widget External Services Local Web Script Services “remote”

  9. Custom Control Auto Complete Picker(Cont.)‏ • Form Configurations • …… • <field id="forms32:tag"> • <control template="/org/alfresco/components/form/controls/autocomplete.ftl"> • <control-param name="ds">/share/service/ds/autocomplete/google</control-param> • </control> • </field> • ......

  10. Custom Control Cascade Select • Generate two or multiple dependent selects.

  11. Custom Control Cascade Select (Cont.)‏ Parent Select Control Data Sources Initial Value Populated Event Value Change Event Child Select Control Data Sources

  12. Custom Control Cascade Select (Cont.)‏ • Form Configurations • …… • <field id="forms32:carmake" set="dreamcar"> • <control template="/org/alfresco/components/form/controls/cascadeselect.ftl"> • <control-param name="ds">/share/service/ds/cars/list</control-param> • </control> • </field> • <field id="forms32:carmodel" set="dreamcar"> • <control template="/org/alfresco/components/form/controls/cascadeselect.ftl"> • <control-param name="ds">/share/service/ds/cars/{parent}</control-param> • <control-param name="parent">forms32_carmake</control-param> • </control> • </field> • ......

  13. Custom Form Template Tab View • Create Navigable Tabbed View of Form Fields.

  14. Custom Control Cascade Select (Cont.)‏ • Form Configurations • …… • <config evaluator="node-type" condition="forms32:userprofile"> • <forms> • <form> • <view-form template="/tab-edit-form.ftl" /> • <edit-form template="/tab-edit-form.ftl" /> • <create-form template="/tab-edit-form.ftl" /> • …… • </form> • </forms> • </config> • ......

  15. Custom Set AppearanceAccordion View • Generate Accordion View of Set Fields.

  16. Custom Set Appearance Accordion (Cont.)‏ • Form Configurations • …… • <set id="addressset" parent="contactset" appearance="accordion" label="Address" /> • …… • <field id="forms32:street" set="addressset"/> • <field id="forms32:city" set="addressset"/> • <field id="forms32:state" set="addressset"/> • <field id="forms32:zip" set="addressset"/> • ......

  17. To-Do List or Wish List • Custom Set Templates. • Custom Form Service Filters. • Custom Field Validators. • Improve Field Validation JavaScript. • Integration with Third-party Products. • More Pluggable Custom Set Appearances. • Less Reboots during Form Development. • Visual Form Builder.

  18. Install the Examples • Install forms-32.amp. • Place the amp file under amps folder of your Alfresco instance. • Run apply_amps.bat or apply_amps.sh. • Install forms-32-share.zip. • Unzip the zip file to the root folder of your share webapp. • Restart Alfresco. • Log on Alfresco Web Explore and Create a new document of the User Profile type. • Locate the NodeRef of the newly create document. • Browse to the Form Test page and enter the NodeRef in the ID field of the Item Details section. • http://localhost:8080/share/page/form-test • Click on the Show Form button.

  19. Source Code • Project Home • http://code.google.com/p/alfresco-forms-service-examples/

More Related