Edit a template web form

From this interface we can manage via a web interface all the details regarding the web form that will be finally associated with our original Word template. Whenever we enter the edit page for the first edition we should already find a distribution of fields and options that have been handled automatically by the docusuit_ parser.

We then may:

  • Rearrange the boxes corresponding to the different fields in the final web form by clicking and dragging on their toolbars.
  • Fulfill all the associated metadata (described below).
  • Insert or delete fields to match our final needs.
Rearrange web form elements

docusuit_ uses a very convenient drag and drop interface to interchange the order of the different fields of the web form or to include those fields in different groups (logical or for display).

In order to do that we have at our disposal two different interfaces:

  • Advanced view: displaying all properties. docusuit_ - Advanced view
  • Simple view: specially designed to give a global view of the web form structure. docusuit_ - Simple view

The simple view includes the possibility of resizing the field lists so it may be simpler to have an even more clear view in case of really complex web forms.

Metadata

This includes all the associated data to obtain a really usable web form that can be displayed in our production website. The options include:

Single field properties:

  • TEXT type input fields
    • Label: the short text that will accompany any field clearly stating its contents.
    • Max. length: (optional): maximum number of characters that the field will accept.
    • Required: it should be checked if we want that field to be required for submission.
    • Validation: the type of validation, if any, that we want to implement for the field, i.e. numeric, email, …
    • Default value (optional): the value that will be shown by default in the web form when displayed for the first time to the final user.
    • Tip(optional): text that will be shown as a tooltip when the final users clicks or mouses over the help button associated to that field.
  • TEXTAREA type input fields: practically the same that for text fields but for the following exceptions:
    • There is no validation: the type of validation, if any, that we want to implement for the field, i.e. numeric, email, …
    • HTML format: check it if we want to give the option to the final user to insert rich text via a WYSIWYG HTML online editor.
  • SELECT type input fields:
    • Label: the short text that will accompany the select option.
    • Null: if checked the final user will not be required to chose a particular option..
    • Type: it could be dropdown, checkbox or radio depending of the way we want to show it to the user.
    • Options: by default is Enum (enumeration) but also one may chose “Data Source”. In the first case we have to fill the field ENUM with semicolon separated list of values. In the second case one has to choose from a dropdown menu the list of available options (check here how one may handle data sources for SELECT type fields).
    • Default value: (optional): it should match one of the possible values included in the ENUM option or in the data source.
    • Tip: (optional): text that will be shown as a tooltip when the final users clicks or mouses over the help button associated to that field.
    • Merge Template: (optional): this is an advanced option that may be activated if we want to merge an additional document (for a description of this action we refer the user to the advanced template management section).
  • DATE type input (datepickers):
    • Label: the short text that will accompany the link to the datepicker or calendar.
    • Required: it should be checked if we want that field to be required for submission.
    • Date format: the format of the date, i.e. mm/dd/yyyy, dd/mm/yyyy, etcetera.
    • Default value: (optional): the value that will be shown by default in the web form when displayed for the first time to the final user.
    • Default value: (optional): it should match one of the possible values included in the ENUM option or in the data source.
    • Tip: (optional): the value that will be shown by default in the web form when displayed for the first time to the final user.
  • HIDDEN fields: YET TO BE DEFINED:
    • Logically Grouped elements: the elements of the web form can not only visually grouped for display as commented above but they can also be logically grouped as:
  • GROUPS OF REPEATED ELEMENTS: this is a placeholder block that encloses the fields associated to a repeating set of elements. One may drag and drop other fields inside this container to include them into this logical group. The available parameters are:
    • Label: the short text that will define the group of repeating fields. This text will replace the placeholder in the template, leave it blank if you do not want text in the template.
    • Type: it may be “Row” or “List” depending if we want a set of repeating rows inside a table in the final document or just a list of items.
    • Tip: (optional): text that will be shown as a tool-tip when the final users clicks or mouses over the help button associated to that group.
  • BLOCK elements: they define groupings of fields that may be shown or hidden whenever a user takes a certain action in the web form (tick a checkbox, selects an option in a dropdown menu, etcetera). One may drag and drop other fields inside this container to include them into this logical group. The available parameters are:
    • Label: the short text that will define the group of repeating fields. This text will replace the placeholder in the template, leave it blank if you do not want text in the template.
    • Depends on and Depends on value: here one should choose the condition upon which one should take action regarding:
    • Tip: (optional): text that will be shown as a tool-tip when the final users clicks or mouses over the help button associated to that group.
      • By selecting the corresponding field in the drop-down menu.
      • By introducing the value that will trigger the “show” or “hide” action.
    • Tip (optional): text that will be shown as a tool-tip when the final users clicks or mouses over the help button associated to that group.
  • DISPLAY GROUPING:
    • Tabs: manage if the form has to be tabbed and if so which fields should fall under each tab.
    • Headings: we may include headings that will differentiate different sections of the same form (tabbed or not).
    • Headings: lines of text that may be introduced in the middle of a web form to explain something or do the form more usable.

Although this long list may seem a little intimidating at first sight we will see in the following videos that the handling of a standard legal document through docusuit_ is extremely simple:

Inserting or deleting fields and groups

Although a correctly tagged Word template will naturally generated a web form with the desired structure it may well happen that because different reasons one may need to introduce new groups of fields or individual fields.

This may be easily done through the docusuit_ web interface in two different manners:

By clicking on the floating web menu on the right of the interface or in the “Ins” button located in the toolbar associated with every web form field one should get the following dialog box:

docusuit_ - Create new element

Here the options are self-explanatory:

  • Reference: stands for the internal name associated with that field (remember that it not may contain dollar signs or underscores).
  • Type: all the possible types described previously.
  • Insert: has various options like:
    • First: at the very beginning of the web form.
    • Before: if this option is chosen one should select the field before which we want to insert the new field.
    • Inside: if this option is chosen one should select the group in which we want to insert the new field (this option may not be available if they are not predefined groups).
    • After: if this option is chosen one should select the field after which we want to insert the new field.
    • Last: at the very end of the web form.
Further options

This option within the edit page is only targeted to advanced users that may want to include:

  • CSS options that will go bundled with the web form. The styling may also be done directly in the production website.
  • Additional Javascript code that will also go bundled with the web form to handle behaviours not contemplated directly by docusuit_ such as additional validations, etcetera.