Customizing Comments in Forms
This example outlines the process for adding a priority field to the comment form.
About this task
Procedure
- In Legacy Content Delivery, the
baseskin provides example comment forms. Copy the xform.comment.html file from ContentDelivery_home/db/LiveContent/ui/skins/base/xforms/ into the same location within your skin. The HTML file that is used to define both the XForm data model and the user interface is defined by the XForm definition in the Developer's Workbench. See Setting up forms for additional details. - Examine the xform.comment.html file. The
<xf:model>element defines the data model that will be stored from this XForm. Note that the<lcform>element the mandatory root element of all XForms stored within Legacy Content Delivery. The contents of the<div class="block-form">defines the user interface of the form. - To add a priority field to the XForm data model, add a new element into the
<xf:model>element. The field must be a child or descendant of the<lcform>element. Provide the new element alabelattribute which defines the key to use when fetching the localized label for this data field. Adding a priority field to the data model defines the way in which the value will be stored within the form instance in the XML database, but does not define the user interface allowing an end user to fill in the value.The priority element has been added to the
<xf:model>.<xf:model> <xf:instance> <lcform> <name label="xform.common.name" lcusedefault="firstname+| |+lastname"/> <email label="xform.common.email" lcusedefault="email"/> <summary label="xform.common.summary" lctitle="true"/> <priority label="xform.common.priority"/> <description label="xform.common.description" lcdesc="true"/> </lcform> </xf:instance> </xf:model> - Add the new label value to your language resource.
For example, add the following to your lang-en.xml file in your skin.
<item name="xform.common.priority" value="Comment Priority"/> - Modify the contents of
<div class="block-form">in order to expose the new field to the end user.For example, the following adds a drop-down selection to the form, including four available values (minor, major, fatal, clarification).
<xf:select1 ref="priority" incremental="true"> <xf:label> <lcui:string key="xform.common.priority"/> </xf:label> <!-- adds an empty value at the top of the selection --> <xf:item> <xf:label/> <xf:value/> </xf:item> <xf:item> <xf:label> <lcui:string key="xform.common.priority.minor"/> </xf:label> <xf:value>minor</xf:value> </xf:item> <xf:item> <xf:label> <lcui:string key="xform.common.priority.major"/> </xf:label> <xf:value>major</xf:value> </xf:item> <xf:item> <xf:label> <lcui:string key="xform.common.priority.fatal"/> </xf:label> <xf:value>fatal</xf:value> </xf:item> <xf:item> <xf:label> <lcui:string key="xform.common.priority.clarification"/> </xf:label> <xf:value>clarification</xf:value> </xf:item> </xf:select1>In order to localize the user interface, add the following values to your language resource:
<item name="xform.common.priority.minor" value="Minor"/> <item name="xform.common.priority.major" value="Major"/> <item name="xform.common.priority.clarification" value="Clarification"/> <item name="xform.common.priority.fatal" value="Fatal"/> - Upload the new skin customization into the database.
- You can upload the resources using the web UI, as described by Adding a Skin and Resources.
- You can also update the skins via the command line using the loaddb tool. Copy the updated skin resources from the source code repository to ContentDelivery_home/db/LiveContent/ui/skins/<your_skin>/.
- On Windows, to load the most recent changes into the database run this command:
loaddb.bat UPGRADE
- On Linux, run this command:
loaddb.sh UPGRADE
- On Windows, to load the most recent changes into the database run this command: