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 precongured appearance options dened 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 precongured appearances from the web-client-config-wcm.xml le: Appearance Description folder_restricted_file_picker Picks les from a specic folder search_restricted_file_picker Searches les from a specic 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 specied 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> Dene 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 congured search. The le picker contents will be restricted to the results of this named congured search. The congured 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> Dene 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 'cong_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 dene 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> Dene 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 specied 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 specied 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 congured 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 dene 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 specied 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. precongured appearance options dened 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