<?xml version='1.0' encoding='UTF-8'?>
<!-- This document was created with Syntext Serna Free. -->
<!DOCTYPE section PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
<!ENTITY % BOOK_ENTITIES SYSTEM "../../User_Guide.ent">
%BOOK_ENTITIES;
]>
<section id="sect-User_Guide-Form_Builder">
   <title>Create content templates with Form Builder</title>
   <note>
   <para>
    The <emphasis role="bold">Form Builder</emphasis> portlet is deprecated in eXo Platform. It remains fully supported for eXo customers, however it will not receive any enhancement and will be removed from the product scope in the future.
   </para>
   </note>
  <para>
  The <emphasis role="bold">Form Builder</emphasis> portlet allows users to create and edit the template of document types. Documents are stored in the so-called node; therefore, the term "node" and node types are often applied.
 </para>
  <para>To use this porlet, you need to add it to a specific page first by dragging and dropping <emphasis role="bold">Form Generator Portlet</emphasis> from
      <emphasis role="bold">Page Editor --> Applications --> Form Generator Portlet</emphasis>
      to the main pane. This can be done when
      <link linkend="sect-User_Guide-Page_Creation_Wizard">creating a new page</link>
      or <link linkend="sect-User_Guide-Manage_Pages-Edit_a_Page">editing an existing page</link>
      or <link linkend="proc-User_Guide-Manage_Portals-Edit_Layout">editing the layout of a portal</link>.
  </para>
  <mediaobject>
    <imageobject role="html">
      <imagedata align="center" fileref="images/FormGeneratorPortlet.png" format="PNG"/>
    </imageobject>
    <imageobject role="fo">
      <imagedata align="center" fileref="images/FormGeneratorPortlet.png" format="PNG" width="150mm"/>
    </imageobject>
  </mediaobject>
  <citetitle>
  <para xml:id="sect-User_Guide-Form_Builder-Create_content_template"><emphasis role="bold">Create a content template</emphasis></para>
  </citetitle>
  <procedure>
    <step>
      <para>
    Open the <emphasis role="bold">Form Builder</emphasis> portlet.
   </para>
      <mediaobject>
        <imageobject role="html">
          <imagedata  align="center"  fileref="images/formgeneratorform.png" format="PNG"/>
        </imageobject>
        <imageobject role="fo">
          <imagedata   align="center" fileref="images/formgeneratorform.png" format="PNG" width="150mm"/>
        </imageobject>
      </mediaobject>
    </step>
    <step>
      <para>
    Enter the template name into the <emphasis role="bold">Name</emphasis> field which is required.
   </para>
    </step>
    <step>
      <para>
    Enter a brief description about the template.
   </para>
    </step>
    <step>
      <para>
    Click the <emphasis role="bold">Form Builder</emphasis> tab that allows you to set properties for the template. Available components are displayed in the left pane.
   </para>
      <mediaobject>
        <imageobject role="html">
          <imagedata  align="center"  fileref="images/formbuildertab.png" format="PNG"/>
        </imageobject>
        <imageobject role="fo">
          <imagedata   align="center" fileref="images/formbuildertab.png" format="PNG" width="150mm"/>
        </imageobject>
      </mediaobject>
    </step>
    <step>
      <para>
    Click the desired components in the left pane. The selected components will be displayed in the right pane.
   </para>
    </step>
    <step>
      <para>
    Click 
    <inlinemediaobject>
          <imageobject>
            <imagedata fileref="images/componentuparrow.png" format="PNG" width="3mm" scalefit="1"/>
          </imageobject>
          <textobject>
            <phrase>up arrow</phrase>
         </textobject>
        </inlinemediaobject>
     corresponding to the component to move this component up; or click 
    <inlinemediaobject>
          <imageobject>
            <imagedata fileref="images/componentdownarrow.png" format="PNG" width="3mm" scalefit="1"/>
          </imageobject>
          <textobject>
            <phrase>down arrow</phrase>
         </textobject>
        </inlinemediaobject>
     to move the component down.
   </para>
    </step>
    <step>
      <para>
    Click 
    <inlinemediaobject>
          <imageobject>
            <imagedata fileref="images/editcomponenticon.png" format="PNG" width="4mm" scalefit="1"/>
          </imageobject>
          <textobject>
             <phrase>pencil</phrase>
          </textobject>
        </inlinemediaobject> corresponding to the component to edit properties of that component. The form to edit properties appears like the illustration below.
   </para>
      <mediaobject>
        <imageobject role="html">
          <imagedata  align="center"  fileref="images/editcomponentpropertiesform.png" format="PNG"/>
        </imageobject>
        <imageobject role="fo">
          <imagedata   align="center" fileref="images/editcomponentpropertiesform.png" format="PNG" width="100mm"/>
        </imageobject>
      </mediaobject>
        <para>
                <emphasis role="bold">Details:</emphasis>
        </para>
      <table>
        <tgroup cols="2">
          <thead>
            <row>
              <entry> Field </entry>
              <entry> Description </entry>
            </row>
          </thead>
          <tbody>
            <row>
              <entry><emphasis role="bold"> Field Label</emphasis> </entry>
              <entry> The label of the field. </entry>
            </row>
            <row>
              <entry><emphasis role="bold">Width</emphasis></entry>
              <entry> The width of the field width.</entry>
             </row>
             <row>
             <entry> <inlinemediaobject>
                  <imageobject>
                    <imagedata fileref="images/rulesrequiredbox.png" format="PNG" width="30mm" scalefit="1"/>
                  </imageobject>
                  <textobject>
                     <phrase>[ Rules: ]</phrase>
                  </textobject>
                </inlinemediaobject></entry>
                <entry>
                If the checkbox is marked, the asterisk (<inlinemediaobject>
                  <imageobject>
                    <imagedata fileref="images/redstarasterix.png" format="PNG" width="4mm" scalefit="1"/>
                  </imageobject>
                  <textobject>
                     <phrase>red asterix</phrase>
                  </textobject>
                </inlinemediaobject>) will appear beside the textbox, indicating that it is required to enter values in this field. 
                </entry>
            </row>
            <row>
              <entry><emphasis role="bold">Height</emphasis> </entry>
              <entry> The height of the field. </entry>
            </row>
            <row>
              <entry><emphasis role="bold">Default Value</emphasis> </entry>
              <entry> Display the default value. </entry>
            </row>
            <row>
              <entry><emphasis role="bold">Guidelines for User</emphasis> </entry>
              <entry> Display instructions about this component. </entry>
            </row>
          </tbody>
        </tgroup>
      </table>
      <para>
    After editing the properties of the components, the components look like the below illustration.
   </para>
      <mediaobject>
        <imageobject role="html">
          <imagedata  align="center"  fileref="images/formgenerator.png" format="PNG"/>
        </imageobject>
        <imageobject role="fo">
          <imagedata   align="center" fileref="images/formgenerator.png" format="PNG" width="100mm"/>
        </imageobject>
      </mediaobject>
	  	  <itemizedlist>
	  <listitem>
      <para>
    To delete the component, click  
    <inlinemediaobject>
          <imageobject>
            <imagedata fileref="images/trashicon.png" format="PNG" width="3mm" scalefit="1"/>
          </imageobject>
          <textobject>
             <phrase>trash can</phrase>
          </textobject>
        </inlinemediaobject> corresponding to the component.
   </para>
   </listitem>
   <listitem>
      <para>
    Click <inlinemediaobject>
          <imageobject>
            <imagedata fileref="images/editcomponenticon.png" format="PNG" width="3mm" scalefit="1"/>
          </imageobject>
          <textobject>
             <phrase>pencil</phrase>
          </textobject>
        </inlinemediaobject> again to hide the form to edit the properties.
   </para>
   </listitem>
   </itemizedlist>
    </step>
    <step>
      <para>
    Click <emphasis role="bold">Save</emphasis> to accept creating a new template, or <emphasis role="bold">Reset</emphasis> to edit this template again before saving.</para>
    <itemizedlist>
	<listitem>	<para>
    A message will inform that you have created the template successfully.
   </para>
   </listitem>
   <listitem>
      <para>After the template has been created, you will see it in the content template list when creating content.</para>
	</listitem>
	</itemizedlist>
    </step>
  </procedure>
</section>