Web Content Production with Web Forms [ 112 ] On implementation of this code snippet, a Select button (shown in the following screenshot) will be displayed for each of the images: We also have a few other precongured appearance options dened in the web- client-config-wcm.xml le, which is placed under <install-alfresco>/tomcat/ webapps/alfresco/WEB-INF/classes/alfresco/ . Here are some examples of precongured appearances from the web-client-config-wcm.xml le: Appearance Description folder_restricted_file_picker Picks les from a specic folder search_restricted_file_picker Searches les from a specic folder image_file_picker Uploads images html_file_picker Uploads HTML les folder_picker Uploads folders file_picker Uploads any le If you want to upload HTML les, you have to put html_file_picker inside the <alf:appearance> tag. For les and folders you can have file_picker and folder_picker respectively. Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 113 ] Suppose you want to provide restrictions to le pickers and be relative to the root of the web project folder. Thus, the contents of the specied folder will be available for selecting in the le picker. This can be achieved by uncommenting the section in the code below (which is highlighted in bold) in the same web-client-config-wcm.xml le: <widget xforms-type="xf:upload" appearance="folder_restricted_file_picker" javascript-class-name="alfresco.xforms.FilePicker"> <param name="selectable_types">wcm:avmcontent,wcm:avmfolder</param> <param name="folder_restriction">/common/pages</param> </widget> Dene this widget in the XSD le, as follows: <xs:element name="contentGraphic" type="xs:anyURI" minOccurs="0" maxOccurs="1" <xs:annotation> <xs:appinfo> <alf:label>News Article Graphic</alf:label> <alf:appearance>folder_restricted_file_picker</alf:appearance> </xs:appinfo> </xs:annotation> </xs:element> This customized le picker will search for only folders inside common/pages folder as shown in the following screenshot: Download from Wow! eBook <www.wowebook.com> Web Content Production with Web Forms [ 114 ] Another important feature, which will make search faster and time saving, is the reusability of search. You don't have to browse every time for the les. The config_search_name parameter must be set to the name of a congured search. The le picker contents will be restricted to the results of this named congured search. The congured search must be stored in the Public Saved Searches folder. The search is Lucene based and it will only query content of the Staging Sandbox. The public saved search is actually stored as an XML document in the Alfresco repository. Therefore, we can modify it with any Lucene query that is supported by Alfresco WCM search. The following code snippet will search for "training" as a text in all of the les of the web project submitted to the staging server: <widget xforms-type="xf:upload" appearance="search_restricted_file_picker" javascript-class-name="alfresco.xforms.FilePicker"> <param name="config_search_name">training</param> </widget> Dene this widget in the XSD le, as follows: <xs:element name="contentGraphic" type="xs:anyURI" minOccurs="0" maxOccurs="1" <xs:annotation> <xs:appinfo> <alf:label>News Article Graphic</alf:label> <alf:appearance>search_restricted_file_picker</alf:appearance> </xs:appinfo> </xs:annotation> </xs:element> The following screenshot shows how to save 'cong_search_name' text in a public search folder so that this can used while searching in the web project: Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 115 ] The le picker will search all les having the word "training" within its name. The following screenshot shows the search result: You can also customize le pickers. You have to dene all customizations in web-client-config-wcm.xml . Using the following code snippet you will have the option of selecting only JPEG les from the web project. The selectable_types parameter must be set to restrict which types of content are selectable in the widget. Download from Wow! eBook <www.wowebook.com> Web Content Production with Web Forms [ 116 ] The filter_mimetypes parameter can be used to lter selectable les by MIME types: <widget xforms-type="xf:upload" appearance="custom_image_file_picker" javascript-class-name="alfresco.xforms.FilePicker"> <param name="selectable_types">wcm:avmcontent</param> <param name="filter_mimetypes">image/jpeg</param> </widget> Dene this widget in the XSD le, as follows: <xs:element name="image" type="xs:anyURI" minOccurs="0" maxOccurs="1" <xs:annotation> <xs:appinfo> <alf:appearance>custom_image_file_picker</alf:appearance> </xs:appinfo> </xs:annotation> </xs:element> Since we have customized le picker, in the following screenshot you will nd only JPEG les: With the previous code snippet, we have customized image_file_picker. In this manner, you can customize other le pickers also. Please note all of the customization related to le pickers has to be provided in the specied le—<install-alfresco>/tomcat/ webapps/alfresco/WEB-INF /classes/alfresco/web- client-config-wcm.xml. Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 117 ] Tool tips and labels You can also provide a label for an element specied in your XSD le. By default, the label created by the form processor for each element is simply the element's name. You could also get a tool tip for the label you have provided. Hence, the label becomes News Page Sub-Headline instead of contentSubHeader. Whenever you drag a mouse over the label you will get help for the label: <xs:element name="contentSubHeader" type="xs:string" minOccurs="0" maxOccurs="1"> <xs:annotation> <xs:appinfo> <alf:label>News Page Sub-Headline</alf:label> <alf:hint>Please enter the news page sub-headline if the news has a sub-headline.</alf:hint> </xs:appinfo> </xs:annotation> </xs:element> Localization You can also localize the label or alert by specifying a message bundle key in the annotation: <xs:element name="emailId" type="xs:string"> <xs:annotation> <xs:appinfo> <alf:label>${email}</alf:label> </xs:appinfo> </xs:annotation> </xs:element> This can be achieved by creating the following message bundle le. Create a property le with name strings.properties in the Company Home | Data Dictionary | Web Forms | <form space name>| strings.properties with the following code: email = Please enter a proper Email Id . Download from Wow! eBook <www.wowebook.com> Web Content Production with Web Forms [ 118 ] The property les can also be internationalized by having different versions for language or locale combination. The default congured property le locations from highest to lowest precedence are: 1. Company Home | Data Dictionary | Web Forms | <form space name> | strings.properties. 2. Company Home | Data Dictionary | Web Forms | strings.properties. 3. webclient.properties placed in <install-alfresco>/tomcat/webapps/ alfresco/WEB-INF /classes/alfresco/messages/ . Validation You can provide validations to any of the elds. For instance, if you provide the correct order ID, the element will be highlighted in red. This indicates that the value of the element must be a string, it must be exactly six characters in a row, and those characters must be a number from 0 to 9: <xs:element name="orderId"> <xs:simpleType> <xs:restriction base="xs:string"> <xs:pattern value="[0-9]{6}"/> </xs:restriction> </xs:simpleType> </xs:element> Customizing the WYSIWYG editor You can customize the WYSIWYG editor easily. The WYSIWYG editor is the TinyMCE editor. When we dene a simple element of type string, we can see Rich Text Editor with limited functionalities. We can also have many other features available with Rich Text Editor. See the following code for the advanced editor. With this we can have features such as alignment, font family, and font size: <xs:element name="contentSubHeader" type="xs:string" minOccurs="1" maxOccurs="1"> <xs:annotation> <xs:appinfo> <alf:label>News Page Sub-Headline</alf:label> <alf:hint>Please enter the news article sub-headline if the article has a sub-headline.</alf:hint> <alf:appearance>full</alf:appearance> </xs:appinfo> </xs:annotation> </xs:element> Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 119 ] If you want more advanced features for the editor, such as table, you can use the following code in the XSD le: <xs:element name="contentSubHeader" type="xs:string" minOccurs="1" maxOccurs="1"> <xs:annotation> <xs:appinfo> <alf:label>News Page Sub-Headline</alf:label> <alf:hint>Please enter the news article sub-headline if the article has a sub-headline.</alf:hint> <alf:appearance>custom</alf:appearance> </xs:appinfo> </xs:annotation> </xs:element> Suppose you want to customize these editors. You want to hide bold, italic feature and reduce the height of the editor. The customization code has to be placed in the <install-alfresco>/tomcat/webapps/alfresco/WEB-INF /classes/alfresco/ web-client-config-wcm.xml le. Download from Wow! eBook <www.wowebook.com> Web Content Production with Web Forms [ 120 ] Place the following code: <widget xforms-type="xf:textarea" appearance="customnews" javascript-class-name="alfresco.xforms.RichTextEditor"> <param name="theme_advanced_buttons1">underline,separator, forecolor,backcolor, separator,link,unlink,image</param> <param name="height">100</param> </widget> Place this code in the XSD le: <xs:element name="contentSubHeader" type="xs:string" minOccurs="1" maxOccurs="1"> <xs:annotation> <xs:appinfo> <alf:label>News Page Sub-Headline</alf:label> <alf:hint>Please enter the news page sub-headline if the news has a sub-headline.</alf:hint> <alf:appearance>customnews</alf:appearance> </xs:appinfo> </xs:annotation> </xs:element> Another customization that will allow you to see the source code of the HTML and insert media les in the Rich Text Editor if required is as follows. Open the web-client-config-wcm.xml le. Replace the code with the following highlighted code: <widget xforms-type="xf:textarea" appearance="custom" javascript-class-name="alfresco.xforms.RichTextEditor"> <param name="theme_advanced_buttons1">bold,italic,underline, strikethrough,separator,fontselect, fontsizeselect,code</param> <param name="theme_advanced_buttons2">link,unlink,image, separator,justifyleft,justifycenter,justifyright, justifyfull,separator,bullist,numlist,separator, undo,redo,separator,forecolor,backcolor</param> <param name="height">600</param> <param name="mode">exact</param> Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 121 ] <param name="force_p_newlines">true</param> <param name="apply_source_formatting">true</param> <param name="plugins">table,paste,media</param> <param name="theme_advanced_buttons3">tablecontrols,media</ param> </widget> Place the following code in the XSD le: <xs:element name="contentSubHeader" type="xs:string" minOccurs="1" maxOccurs="1"> <xs:annotation> <xs:appinfo> <alf:label>News Page Sub-Headline</alf:label> <alf:hint>Please enter the news pagesub-headline if the page has a sub-headline.</alf:hint> <alf:appearance>custom</alf:appearance> </xs:appinfo> </xs:annotation> </xs:element> Download from Wow! eBook <www.wowebook.com> . <install-alfresco>/tomcat/webapps/alfresco /WEB- INF /classes/alfresco/ web- client-config-wcm.xml le. Download from Wow! eBook <www.wowebook.com> Web Content Production with Web Forms [. in the specied le—<install-alfresco>/tomcat/ webapps/alfresco /WEB- INF /classes/alfresco /web- client-config-wcm.xml. Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 117 ] Tool. precongured appearance options dened in the web- client-config-wcm.xml le, which is placed under <install-alfresco>/tomcat/ webapps/alfresco /WEB- INF/classes/alfresco/ . Here are some examples