<?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>Form Builder</title>
  <para>
  The <emphasis>Form Builder</emphasis> portlet enables users to create and to edit various document type templates. Documents are stored in a node; therefore, the term <emphasis>node</emphasis> and node types are often applied.
 </para>
  <procedure>
    <title/>
    <step>
      <para>
    Go to <menuchoice>
       <guimenu>Group</guimenu>
       <guimenuitem>Form Builder</guimenuitem>
    </menuchoice> on the administration bar. The <emphasis>Form Builder</emphasis> will appear:
   </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 node name into the <emphasis role="bold">Name</emphasis> field (an asterix [*] indicates that this a required value).
   </para>
    </step>
    <step>
      <para>
    Enter a brief description of the node.
   </para>
    </step>
    <step>
      <para>
    Click the <guilabel>Form Builder</guilabel> tab. Items on this tab allow you to set properties for a node. Available components are displayed on 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 on the left pane. The selected components will be displayed on the right pane.
   </para>
    </step>
    <step>
      <para>
    Click the 
    <inlinemediaobject>
          <imageobject>
            <imagedata fileref="images/componentuparrow.png" format="PNG" width="5mm"/>
          </imageobject>
          <textobject>
            <phrase>up arrow</phrase>
         </textobject>
        </inlinemediaobject>
     corresponding to the component to move this component up or the 
    <inlinemediaobject>
          <imageobject>
            <imagedata fileref="images/componentdownarrow.png" format="PNG" width="5mm"/>
          </imageobject>
          <textobject>
            <phrase>down arrow</phrase>
         </textobject>
        </inlinemediaobject>
     to move the component down.
   </para>
    </step>
    <step>
      <para>
    Click the 
    <inlinemediaobject>
          <imageobject>
            <imagedata fileref="images/editcomponenticon.png" format="PNG" width="6mm"/>
          </imageobject>
          <textobject>
             <phrase>pencil</phrase>
          </textobject>
        </inlinemediaobject> icon that corresponds 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="150mm"/>
        </imageobject>
      </mediaobject>
      <table>
        <title/>
        <tgroup cols="2">
          <thead>
            <row>
              <entry> Field </entry>
              <entry> Details </entry>
            </row>
          </thead>
          <tbody>
            <row>
              <entry> Field Label </entry>
              <entry> To enter the field label. </entry>
            </row>
            <row>
              <entry> Width </entry>
              <entry>To enter the field width. If the <inlinemediaobject>
                  <imageobject>
                    <imagedata fileref="images/rulesrequiredbox.png" format="PNG" width="39mm"/>
                  </imageobject>
                  <textobject>
                     <phrase>Rules:</phrase>
                  </textobject>
                </inlinemediaobject> checkbox is marked, the <inlinemediaobject>
                  <imageobject>
                    <imagedata fileref="images/redstarasterix.png" format="PNG" width="4mm"/>
                  </imageobject>
                  <textobject>
                     <phrase>red asterix</phrase>
                  </textobject>
                </inlinemediaobject> will appear beside the text box, indicating that values in this box are required. </entry>
            </row>
            <row>
              <entry> Height </entry>
              <entry> To enter the field height. </entry>
            </row>
            <row>
              <entry> Default Value </entry>
              <entry> To display the default value </entry>
            </row>
            <row>
              <entry> Guidelines for User </entry>
              <entry> To display instructions about this component. </entry>
            </row>
          </tbody>
        </tgroup>
      </table>
      <para>
    To delete the component, click the 
    <inlinemediaobject>
          <imageobject>
            <imagedata fileref="images/trashicon.png" format="PNG" width="5mm"/>
          </imageobject>
          <textobject>
             <phrase>trash can</phrase>
          </textobject>
        </inlinemediaobject> corresponding to the component.
   </para>
      <para>
    Click the <inlinemediaobject>
          <imageobject>
            <imagedata fileref="images/editcomponenticon.png" format="PNG" width="6mm"/>
          </imageobject>
          <textobject>
             <phrase>pencil</phrase>
          </textobject>
        </inlinemediaobject> icon again to hide the form to edit the properties.
   </para>
      <para>
    After editing the properties of the components, the components will appear similar to the illustration below:
   </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="150mm"/>
        </imageobject>
      </mediaobject>
    </step>
    <step>
      <para>
    Click <guilabel>Save</guilabel> to create the new node, or <guilabel>Reset</guilabel> to edit the node again before saving.
    </para>
      <para>
    A message will inform that you created a node successfully.
   </para>
    </step>
  </procedure>
</section>
