Form Designer
  • 10 Mar 2023
  • 33 Minutos para leer
  • Colaboradores
  • Oscuro
    Ligero

Form Designer

  • Oscuro
    Ligero

The content is currently unavailable in Spanish. You are viewing the default English version.
Resumen del artículo

Purpose


This article reviews the Form Designer.  This includes an overview of the designer as well as:

Form Designer Overview


VisualVault 4.0 features a drag and drop form designer allowing you to quickly create interactive web forms. Form controls may be placed on the designer canvas in any location and include images, bar codes, drop-down lists, file upload, and more. The form designer is intended for use by non-developers but does support advanced use cases such as remote data fetching, JavaScript, web services integration, and defining conditional content display rules. See the Advanced Form design topic for these advanced use cases.

It is recommended that you save the form template often to commit your changes into VisualVault.  If you are ready to release the form for use, click the save button in the form design toolbar, close the form design tool, then click the Release link located in the list of form templates. When a form template is released it will instantly be available to all users who have been granted access. Companies that require a form to go through a change control process to approve the changes before the form is released should not release the form until they have approval. Otherwise, releasing the form makes it available for users to fill in. The form template may be edited at any time (even after form data has been submitted). Changes to a form template are only visible on form records that have been edited after the form template changes were released. The Microsoft Silverlight web plug-in is required to use the Form Template Designer.

The sections below explain the Form Designer features in more detail.

About the Form Designer 


Form Templates consist of multiple components that each have their own properties and allow you to create your unique form design. There are essentially four major areas of the Form Designer that can be utilized to create the desired form template:

  • Menu Options: At the top of the Form Template Designer is a series of buttons and menu items that allow you to navigate and control different options for the form template, such as saving the form, previewing the form, or adding new pages.
  • Form Fields: On the left-hand side you will see a toolbar with available fields and components that can be dragged onto the designer.  These components include buttons, labels, text boxes, and images. Immediately to the right of this toolbar is the Controls window that will list all fields and components currently being used on the form.
  • Canvas: In the middle of the form designer is a graphical representation of the form template itself. This is the area where all form fields and other components will be visible and can be selected to configure their properties or change their positions on the form. On the bottom of the designer are various controls that can be used to zoom the canvas to a specific size, and activate or deactivate grid lines and snap lines.
  • Configuration Panel: On the right-hand side of the designer you will see the Configuration Panel that contains three tabs. The tab marked "Properties" will show configuration settings for the currently selected component or field type. The "Page" and "Form" tabs show configuration settings for the current page and entire form respectively.

Form Template DesignerQLZ3nO32NJRPt9B2cZGt5qcTp5tu1ORxdA

Menu Options Overview


Located at the top of the Form Designer are menu options that are used to configure different areas of the form designer. Directly below the menu is a toolbar of buttons used for quick access to the menu options:  

Menu Options and Buttons ViewtbU_xKotiLHVOyouLrvoWSQHxZe7I3AslQ

The options and information available in the top menu are as follows:

  • File - Create a new template, save the current template, or preview the form.
  • Edit - Cut, copy, and paste controls saved to the clipboard.
  • View - Contains various options for viewing different panels and toggling visibility of grid lines on the canvas.
  • Form Field - Insert or delete a field control or change the drawing order of controls that may overlap.
  • Container - Insert, append, or delete a container from the canvas.
  • Page - Rename, insert, append, or delete a page.

The groups of buttons available in the toolbar (from left to right) are as follows:

  • Save Form, Preview Form, Preview Mobile View.
  • Cut, Copy, Paste.
  • Bring to the Front, Send to the Back
  • Insert Page, Append Page, Delete Page
  • Insert Container, Append Container, Delete Container
  • Script Editor, Image Library Editor, Form Template Manager
  • Switch to Form View, Switch to Group View

More detailed information about each option is available below in the section titled Menu Options.

Form Fields Overview


On the left-hand side of the Form Designer is the main toolbar used in the creation of form templates. To use a form field, simply click and drag it onto the canvas where it can then be configured. Located directly to the right of the toolbar is the Controls Tab. This tab will maintain a list of all controls currently added to the form field.  Selecting a control from this list will highlight the control on the canvas. 

Form Fields and Controls List View3pnRrA3CskXxqDRJhBB3f3hKKRXzf437AA

Refer to the section titled Form Fields below for a more in-depth overview of the controls, or navigate to the Field Types page for detailed information on each control. 

Canvas Overview


The Form Template Canvas is the most prominent area of the form designer. Located in the middle of the screen, this area is where the form template is created and modified. After selecting a field control, you will drag and drop it into this field to begin configuration for the given control. Controls can be repositioned by simply clicking and dragging them to their desired position on the page, or changing the "Layout Top" and "Layout Left" values under the form control properties. 

Canvas ViewV1SpzpG6nihythCPK09ZRPzD8ADlwSJfHg

By default, the canvas will contain grid lines that can be used to help align controls. Taking this idea further are snap lines that become visible when positioning a control close to the X or Y axis of another control. The group of buttons located below the canvas is used to toggle the visibility of the grid and snap lines, and the ability of the form template to instantly snap a control to the grid or snap lines. The last button will toggle the visibility of containers on the form template, and the drop-down list is used to zoom the view in or out. More detailed information can be found below in the Canvas section.

Configuration Panel Overview


On the far right of the Form Designer is the Configuration Panel. This area contains three tabs used for configuring multiple aspects of the form template.

Configuration Panel ViewsO8hS5EbgK6doHlWlk4fGLs_CtS0NOVhjg

The different tabs available are as follows:

  • Properties - Used to configure the currently selected field control or container on the canvas.
  • Page - Used to configure the appearance of the currently visible page on the canvas.
  • Form - Used to configure the form template properties such as default page size.

Refer to the section Configuration Panel below for more information.

How to Design a Form Template


To design a form template you must first follow the steps in Form Templates.

Editing a New form or Editing a Form in Edit Mode:

  1. Navigate to Forms - Forms Template.
  2. Select Edit from the Form column next to the name of the form template you want to design.

Editing a Released Form or Placing a Form into Edit mode:

  1. Navigate to Forms - Forms Template.
  2. Locate the Form Template you wish to modify and select New Rev.
  3. Key in the revision and reason for the change and then click Save.
    Form Revision View  ttneKcYHqHDCMEWtkwLSj_mLieAbb6WnRA
  4. You're returned to the Form Template Detail view, select Edit next to the form you want to modify.

Once you have opened the Form Template Designer by selecting Edit you can design the form template by using the Form Fields and placing them on the canvas. When selecting a control, you are placing the focus of the designer on that object and can then configure that object from the Properties tab.

As an example here are the steps to create a generic form once the form designer is open.

Set up the Form Properties:

  1. Select the Form tab in the Configuration Panel on the right side of the designer.
  2. In the form properties, select the Default Page Size (or leave it at the default value of 800 x 1000).
  3. Select Save Form. If the form is new, you will be prompted to name the template and give a description of the form.

Setup of Form Fields:

There are no form fields placed on the form template by default. Focus on a form is shown by a blue box around the selected field: https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_focus-example.png?sfvrsn=0

As part of this example we will create a simple form to acquire a customer's name:

  1. Drag and drop a Label to the canvas.
  2. Drag and drop a Textbox to the canvas next to the label.
  3. Key in the following information in the Configuration Panel for the label and textbox. Make sure the "Properties" tab is selected:
    • Textbox Name: NameTextbox
    • Label Name: FullNameLabel
    • Label Text: Full Name WdhtOcgXZXtMLnexfGInfEWTj8eePANmPQ
  4. Select Save Form.
  5. Drag another Label and Textbox next to the previous control. You can use the red snap lines to help align it properly.
  6. Key in the following information (naming the label control is a good practice, but not necessary):   
    • Label Text: Customer Name
    • Textbox Name: CustomerNameTextbox
  7. Select Save Form.
  8. Drag a Signature Stamp and place it below the first textbox (NameTextbox).
  9. Key in the following information:
    1. Name: UserStamp
    2. Text: Who Are You?
    3. Width: 150 lAm_aDwk0IqXvc8PDqjtuBeD9RTJGr-09g
  10. Select Save Form.
  11. Click on Preview. Your form should look similar to the image below:

Snh8u-ipYL2UCwXuTyxty4iQsqd06Vy3vA


The below sections review each of the menu options when in the form designer.

File Menu


The File menu and buttons are used to save, preview, and create new forms. BCUcG_gPnlgspIppcd15zC7O8rdpf5y7nQ

  • New Form Template - Creates a new form template. This option is only found in the menu.
  • Save Form Template - Saves the current form template design.
  • Preview the Form - Allows you to view the template as it will appear to users.
  • Preview the mobile form - Allows you to view the template as it will appear to mobile users.

The following buttons in the toolbar can also be used as shortcuts to some of the File menu options:

  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_save-button.png?sfvrsn=0 - Save Form
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_preview-button.png?sfvrsn=0 - Preview Form
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_preview-button.png?sfvrsn=0 - Preview the Mobile Form

Edit Menu


The Edit menu is used to cut, copy, and paste controls. This can be used to take a specific control or group of controls and duplicate them on the form or move them to a different page. iWOIwcDMQo-q6kgXtk4csStluSrxLpOQFw  

  • Cut - Cuts the currently selected control(s) from the canvas, and saves it to the clipboard.
  • Copy - Creates a copy of the currently selected control(s) and saves it to the clipboard.
  • Paste - Pastes a copy of the control currently saved to the clipboard.

The following buttons can be used for quick access to the Edit menu options:

  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_cut-button.png?sfvrsn=0 - Cut
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_copy-button.png?sfvrsn=0 - Copy
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_paste-button.png?sfvrsn=0 - Paste

View Menu


The View menu contains options for visibility of certain tabs and the grid and snap lines in the canvas. You can also zoom the canvas in and out from this menu. A checkmark next to the name of an option indicates that the option is currently active. xgH9rPsCNbLOqbnbeF6iORCuwWgguDNHkw

  • Design Modes - Switch between the Form and Groups view. RsKpM3BLZymHChjHlvAWNsRtUJMiT-ukWg
    • Form - The Form view is the default template view of the designer.
    • Groups - The Groups view reveals another window that is used to group form fields and set security and visibility conditions for those groups. Refer to the Dynamic Content page for more information on Groups and Conditions.
  • Grid Lines* - Toggles the visibility of the grid lines on the canvas.
  • Snap to Grid Lines* - Toggles the "snapping" of controls to automatically align with the grid lines when positioning a field control. If you want to place a control at a very specific position, you may want to disable this feature in the menu.
  • Snap Lines* - Toggle visibility of the snap lines on the canvas.
  • Snap to Snap Lines* - Toggles the "snapping" of controls to automatically align with other controls in the canvas when placed near the same X or Y position of the other controls. If you want to place a control to be perfectly aligned with another control, enable this option.
  • Show Containers - Toggles the visibility of the division between containers
  • Show List Pane - Toggles the visibility of the Controls List pane.
  • Show Property Pane - Toggles the visibility of the Properties pane.

The following buttons can be used for quick access to some of the View menu options:

  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_form-view-button.png?sfvrsn=0 - Switch to Form View
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_group-view-button.png?sfvrsn=0 - Switch to Groups View

*The menu options for grid and snap lines can be accessed through buttons located below the canvas. For more information refer to the section Canvas - Display Options below.

Form Field Menu


The Form Field menu can be used as an alternative to the Form Fields Toolbar to insert or delete controls from the template. Instead of dragging and dropping a control onto the page, you can select the control from the menu and it will be added to the page. You can also change the drawing order of the controls in case two or more controls need to overlap. This is explained in more detail below. https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_form-field-menu.png?sfvrsn=0

  • Order - Change the drawing order of the currently selected control (this is referred to as "Z-Order"). Controls with a higher Z-Order will be drawn in front of items with a lower Z-Order if they overlap. 24yMryn6JtKhdS0VCfVGx7vwviPZrygXAQ
    • Send to Back - Decreases the Z-Order value of the currently selected control.
    • Bring to Front - Increases the Z-Order of the currently selected control.
  • Delete - Deletes the currently selected control from the canvas. This can also be achieved by pressing the Delete key.

The following buttons can be used for quick access to some of the Form Field menu options:

  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_bring-to-front-button.png?sfvrsn=0 - Bring to the Front
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_send-to-back-button.png?sfvrsn=0 - Send to the Back

Container Menu


The Container menu can be used to add or remove containers from the template. Containers can be used to divide a form into multiple sections, or simply add an extra area to the template. When a new form template is created, it includes a container named "Container1" by default. This container is where all form fields are placed when dragged and dropped into the form template. If you plan on creating a template with conditional controls, such as a form approval area that only appears for specific users, it is suggested those controls are placed in a separate container. You can then use the Form Group feature and simply use the container as the conditional group. wxaGTshenAl3xOpkIBpsk9MzFJ9wwHF-pg

  • Insert - Inserts a new container to the form template. The container will be placed before the currently selected container.
  • Append - Creates a new container and adds it to the template. The container will appear at the bottom of the form.
  • Delete - Deletes the currently selected container. Any form fields in this container upon deletion are added to the remaining container(s).

The following buttons can be used for quick access to the Container menu options:

  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_insert-container-button.png?sfvrsn=0 - Insert Container
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_append-container-button.png?sfvrsn=0 - Append Container
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_delete-container-button.png?sfvrsn=0 - Delete Container

Page Menu


The Page menu is used to add or delete pages from the form template. When a form contains multiple pages, tabs will appear on the top of the form that can be selected. More information about pages and their properties can be found in the Form Template Canvas section below. BM7BwdSmt-AOsQAQu-HFhBs3DfbZOZeVzw

  • Insert - Inserts a new page in front of the currently visible page.
  • Append - Inserts a new page after the last page.
  • Delete - Deleted the currently selected page.

The following buttons can be used for quick access to some of the Page menu options:

  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_insert-page-button.png?sfvrsn=0 - Insert Page
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_append-page-button.png?sfvrsn=0 - Append Page
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_delete-page-button.png?sfvrsn=0 - Delete Page

Form Fields


This section reviews the available form fields and functionality.

Form Fields Toolbar


The Form Fields toolbar is located on the left side of the form designer. Controls can be clicked and dragged over to the form template view and placed wherever you wish. Upon selecting a field control, the Properties tab will display configuration options for the control. Below is a list of the available form fields and a brief description of what they can be used for. More detailed information about each control, including unique properties, can be found on the Field Types page.

Icon

Field Type

Description

EgodEygmUEDuMLvjpT2SJuiGuEGCZ8NKrQ

Label

Labels are text that can be placed anywhere on the form template. They are usually used to identify the purpose of a field, such as a textbox.

KPbsaOim_03jioycZGZET5aww46IxeI_-Q

Textbox

A single-line textbox is used to gather user data. It can be configured to accept text, numbers, or both.

2XSRFfJJeHvnJe5eucC9lciJMr_p6VNUJw

Multiline Textbox

Similar to a textbox, but allows multiple lines of input.

kPrRCSsoy5Aohd3E9yWV1zXuWl7_Kc1HbA

Drop Down List

Allows you to select from a populated list of data in order to control what was entered. This list can be populated from an external data source or predefined drop-down lists.

XB7o1QxjHyKDcDp0fdxbc7GD2Oxgak26kQ

Checkbox

A small box that populates with a 'tick' when clicked.

AU2Zy1jMO3wjwBNfehwtZldigmr1OeQ91g

Signature Stamp

This control acts similar to an electronic signature or allows for users to fill in their user name automatically if they are submitting or working with a form where you want to capture their name.

Qn9egZE0rpegTZhzlD18fLNX0XmjDuOZUw

Button

Can be configured to save the form, control wizard steps for a form fill in, complete a task, or execute scripts.

5GKyOJHVwGzQEZzFXZvirb8Ct6cNSphMIg

Upload Button

A special button is used to allow certain users to upload a document from the form.

dya50M0iSb-TwGJ-P7rZ3emSHufFabBTSg

Image Control

A control that allows you to place an image on the form.

EKUtz_7retZ1hqzVCmLxTBBUjjVhzfgMkQ

Barcode Image

Displays a scannable barcode on the form.

LdgNU9uIXE5sqbV7HLUdT3xCXAGe_uIAHw

Calendar

Allow users to select a date from a pop-up calendar.

Bz8Gm8nzKJ7vL893-Il5MuQDdbKhdhx81w

Cell Field

An input field that specifically accepts numbers as input. Used in conjunction with Sum Fields, this control can be used to perform calculations.

HGpGrJOQwfM9nSKRNGIxB8wiotXAvwt4ew

Sum Field

An output field is used in calculations when combined with Cell Fields.

WYVWeyYQI0rgNZrY_JhHqkm5btsHRYI3zg

Form ID Stamp

A label that displays the unique identifier for the form based on the naming conventions of the template.

7PH4ze4SF4mGArypgdipSf7aJyJ_R4kStw

Slider

A movable value indicator that can be configured for multiple different uses.

obWWUt-GDm7fehDRIalzSFHNuWzO-GV9yQ

Conversation List

Provides a link to a conversation window where you can leave comments about the form that other users can observe.

cU2vQEMPTlxL-nVTXHE0vnRCT5vdAmmRag

Rectangle

Creates a rectangle that can be configured for formatting purposes.

qNApI5Y0Il8qD2Q46odkTMF_H8vtidmitw

Repeating Row Control

This control allows rows of fields from another form template to be displayed, modified, or created into individual forms.

91AO3KcUU64CqVb3LgXbOSFeuSN5c6jWhgData GridThis control displays form dashboard records embedded within a form.

Controls List


Located directly to the right of the Form Fields Toolbar is the Controls List. This list displays all existing controls that are currently placed on the form template in alphabetical order. By selecting any of the controls on the list, the designer will give that control focus and the properties will appear under the Properties tab. This feature can potentially make it easier for you to find a specific control on a very large form template or more accurately select the desired control in case it is overlapped by another control.  

Controls List ViewCQGmyhJ065uMKeREMSohF-oH2DEhBoxyMw

Field Calculations


For a form created in VisualVault, you can set up the form to calculate values placed in Cell Fields or Textboxes. This is helpful if you want to design forms such as a Purchase Requisition, Expense Report, or some other form that requires calculations within the form. To complete the calculations, you can place a Cell Field where you expect a user to enter a numerical value. You would then place a sum field where you want to make the calculation. Each cell field and sum field should have their names changed to be a meaningful name to the user. Once this is completed you can select the properties of the Sum Field to develop the calculation that you want to display.

Sum Field View  https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_sum-field-example-1.png?sfvrsn=0 

You can set up an automatic calculation (addition only) by assigning a Group name to the Cell Fields you want to calculate. In the Cell Field Properties is a section titled Cell Properties with two textboxes: Row Group, and Column Group. Simply assign a name to one of these text boxes, such as "RowGroup1", or "ColumnAdditionGroup" for each Cell Field to be added in the calculation. Under the Properties for the Sum Field is a section titled Calculation Properties with a text box labeled Sum the Cells in this Group. Enter the name of the group you assigned to the Cell Fields and save the form template. Whenever the form is saved, the Cell Fields will automatically be added together and A result placed in the Sum Field. The other method for performing calculations is to use the Formula feature in the Sum Field Properties. Click the Edit button under Calculation Properties and a new window will appear: 

Formula View2VpQDC-xBqfmyTryhAUiw3zMLHMHtHlvugThe first column is a list of the form fields. If you followed a meaningful naming convention you can simply select the Cell Fields from the list and click Add Field Value to add the control value to the Script area, or you can manually type the names of the fields you want to add using square brackets. The square [ ] brackets around the name of a control indicate the value of that control. The curly { } brackets are used around the names of Row or Column Groups. You can use the following symbols for calculation:

  • Addition: +
  • Subtraction: -
  • Multiplication: *
  • Division: /

Using the example above, to add the first three Cell Fields together you can use the script: [CellField1] + [CellField2] + [CellField3] By using this configuration, Cell Fields that receive input and then lose focus will be calculated in real-time, and the Sum Field will display the result immediately. For more complex formulas, use parentheses ( ) to ensure the proper order of operations is followed: ([CellField4] + [CellField5]) * ([CellField6] - [CellField7])  This formula will add the values of CellField4 and CellField5, subtract the value of CellField7 from the value of CellField6, and multiply the results.

Canvas


Display Options


Located beneath the canvas are a few controls that enable you to customize the display of the form template. These controls are a quick way to access some of the options from the View menu explained above:

  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_show-gridlines.png?sfvrsn=0 - Show Gridlines: Toggles visibility of the grid lines on the canvas.
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_snap-gridlines.png?sfvrsn=0 - Snap to Gridlines: Toggles the "snapping" of controls to automatically align with the grid lines when positioning a field control. If you want to place a control at a very specific position, you may want to disable this feature.
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_show-snaplines.png?sfvrsn=0 - Show Snaplines: Toggle visibility of the snap lines on the canvas.
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_snap-snaplines.png?sfvrsn=0 - Snap to Snaplines: Toggles the "snapping" of controls to automatically align with other controls on the canvas when placed near the same X or Y position. If you want to place a control to be perfectly aligned with another control, enable this option.
  • https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_show-containers.png?sfvrsn=0 - Show Containers: Toggle visibility of the dashed lines that separate containers.

More information about containers, grid lines, and snap lines can be found below.

Grid Lines and Snap Lines


Grid Lines By default, the canvas will display a grid to help guide the placement of controls. Furthermore, the origin (the top left corner) of the controls will "snap" to the nearest grid line once placed to make it more convenient to properly align controls. You do have the option of eliminating the grid to get a better view of the form template if you choose by selecting the Grid Lines option in the View menu, or clicking the Show Gridlines button under the canvas:

Grid Lines On9WJq8kpeiQ_GEgQhJNzPdDerA_fbV6dZWg

Grid Lines OffB6LfISkVFW7C8oz3HLaDoq5s5WtTAvOGjA

Turning off the grid lines will automatically disable the gridline snapping feature. If you wish to place controls in very specific positions, it is suggested you turn off the grid line snapping in the View menu or toggle the Snap to Gridlines button under the canvas to the off position. Each grid line is placed every 10 pixels. Snap Lines Snap lines serve a similar purpose to grid lines. They are intended to help guide the placement of controls. The difference is the fact that snap lines are not immediately visible, and only become visible when the origin of the control currently being positioned crosses the same horizontal or vertical axis of the origin of another control. Snap lines appear in red: 

Horizontal Snap LinehPMmErvucnz6WOqcFkVK645D19hTwrJRRA

Vertical Snap Linesp25DXJ6tG6peDUjYp4QeLkboXMeTOxvOA

Just like the grid lines, snap lines can be toggled on and off along with their snapping feature from the View menu or button controls below the canvas.

Containers


Containers are separated by dashed lines on the form template. By selecting a container, you can increase or decrease its size by clicking and dragging the dashed line at the bottom of the container. When new containers are added, the current page will increase in size to accommodate them.

Container LineslEON5DHUUE0LFbSfE4kM6ylKx_RP22RFEg

You can also manually change the size of the container from the Properties tab while the container is selected. To select a container, click anywhere inside the boundaries of the container where another form control is not present. The container lines can be disabled by clicking the Show Containers button under the canvas.

Pages


When multiple pages have been added, a tab will appear above the canvas allowing you to switch between the pages. Page Selection TabF_hy-UZfkTs0j73J-i44CJ1nJ26FZ7M2wQIf only one page is present, the selected tab will not appear.

Configuration Panel


Properties Tab


The Properties Tab will list configuration options for all form fields placed on the form template. After selecting a control, various options will appear for that specific control. For example, the image on the left is the properties of a Label Textbox, and the image on the right are the properties of an Image Control:

 Properties of Label Textbox                     Properties of Image Control https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_properties-tab-example-1.png?sfvrsn=0

There are some common properties that most controls share such as Layout Position, Background Color, and Data Reporting. A list of these common properties and unique properties for each control can be found on the Field Types page.

Page Tab


The Page Tab contains configuration options for the currently selected page on the form template. From this tab you can change the name of the page and options for the page appearance: 

Page Tab Optionsxpz4jy6p291H1VOQ3o6ZcpS19jw0FhpDLg

  • Page Size: You can choose from a few predefined options for the page size, or select "Custom" and choose your own dimensions.
  • Width: The current width of the page. Changing this number will automatically change the page size to Custom.
  • Height: The current height of the page. Changing this number will automatically change the page size to Custom.
  • Background: You can change the background color of the page. There are a large number of predefined options to choose from in the drop-down list, or you can click the button next to the list to open a color selector (refer to the section below for more information) to choose a custom color.

Form Tab


The Form Tab features configuration options for the form template itself. You can set the default page size for any new pages created, set the form security, and choose to allow attachments among other options. 

Form TabUYgM3clCGxqONIGsatb9BLmT-0Tjz7tzJA

The name of the Form is determined by what the form template was named upon being saved for the first time. If the form template has not been saved, "Not named yet" will appear as the name. The sections and options available on the Form Tab are as follows:

Appearance

  • Default Page Size - You can select a predetermined size from the drop-down list. All new pages created for the form template will appear at this size. The default is 800 X 1000.
  • Default Page Width - The default width of new pages can be customized. Changing this number will change the page size to Custom.
  • Default Page Height - The default height of new pages can be customized. Changing this number will change the page size to Custom.
  • Textbox Font Size - Changes the size of the text a user enters into a textbox. Default is 10.
  • Inherit design - When this box is checked, any previous form instances made with this form template will update to the latest version if a new revision of the instance is created.
  • Render All Pages - When this box is checked all, all form pages will be rendered together as one long form.

Form Security

  • Viewers Must Have Active Task to Edit - When checked, if a user with Viewer access to the form template is given an active workflow task for the form, their role will temporarily be elevated to that of an Editor while the task is still active.
  • Display Form Tabs and Toolbar - Any user type that is checked will be given access to an advanced form fill-in screen that gives more options than a Public user.

Miscellaneous

  • Confirmation Page - Allows you to change the confirmation page that is shown to Public users upon submitting a form. More information can be found in the Confirmation Page section below.

PDF Printing Options

  • Print Area Width - Allows you to select between using the width of the form page or a custom width for the PDF. If the custom width is smaller than the width of the form page, some information may be clipped off.
  • Custom Width - You can enter a custom width for the PDF. The Print Area Width drop-down must be set to 'Custom Width' for this setting to take effect.
  • PDF Paper Size - Choose from various preset paper sizes. Select 'Custom' if you would like to set the page to a specific size.
  • PDF Page Orientation - Determines the orientation of a page.
  • Paper Width* - Determines the width of a custom page size.
  • Paper Height* - Determines the height of a custom page size.
  • Top Margin* - Determines the size of the top margin of a custom page (in pixels).
  • Right Margin* - Determines the size of the right margin of a custom page (in pixels).
  • Bottom Margin* - Determines the size of the bottom margin of a custom page (in pixels).
  • Left Margin* - Determines the size of the left margin of a custom page (in pixels).

* These options are ignored unless the PDF Paper Size drop-down is set to 'Custom'.

  • Allow Attachments - When checked, allows Public users to upload documents to the Attachment folder in the Document Library.
  • Max Allowed - Maximum number of attachments allowed for a single user to upload at once.
  • Required - When checked, will require at least one document to be uploaded before the form is accepted.

External Form Validation

  • Enable - If checked, this option enables external form validation.
  • Validation Process - Click the Select button to choose from a list of Outside Process calls and enter some information about the process.

Color Selector


Located next to color picking drop-down lists is a  https://www.visualvault.com/images/default-source/Help---Forms---Templates/formdesigner_color-selector-button.png?sfvrsn=0 button that will open a color selector when clicked. The color selector will let you manually choose a color either by entering an RGB value, a hexadecimal value, or using the slider to select a hue and dragging within the color window to find the exact color you want.

Color Selector

1XqS0J-2KmrNdxqfT2BR0x5QIFhUJolZeg


Confirmation Page


The Confirmation Page feature is configured on the Form Tab of the Configuration Panel. This feature configures the form so that a confirmation page is displayed to Anonymous or Public users who fill out a form. Users who are authenticated with VisualVault and fill out a form will not be shown the confirmation page. In order to configure this feature click the Edit Url button under the Miscellaneous section of the Form Tab, enter the Url, and click save. 

Edit Url Windowz_nv6o6Spw1723_9W1O9i0BHrxy-X9tGnA

Foldering Document Uploads


The foldering upload document feature is configured from the Properties Tab of the Upload Button field control. This feature allows form owners to configure the form so that documents will be placed in a certain folder by default when public users upload documents. To configure this capability select the Edit button in the Miscellaneous section of the upload button properties. The following screen will appear:

Upload Folder PathTew093M1KoR6HkmM5PO01F3lm-ByGAQnHQ

At this point, you can select the path to the folder the button will upload the document to and use the arrow beneath the left column to select it.  

Note: Logged in users can select other folders outside of this structure if they wish and if they have permission. Communicating to users on where documents associated with a form should be placed in a best practice at this time.

You may also configure the form so that documents will be dynamically uploaded under the target folder based upon information in the form fields. When configuring this feature, you will use tokens to build the dynamic folder path. You can use the list of controls in the right column and click the arrow to add the name of the control to the folder path. The name of the field will appear between square [ ] brackets.

As an example, let's say that we are filling out a form for an Employee Application. We want all documents to be uploaded into an Applications folder of the Document Library. The customer has provided us with various documents and we want to file the documents based upon their first and last name. If we have two text boxes on the form designer called FirstName and LastName, we would use the following folder path:  /Applications/[LastName]/[FirstName]

If the user Terry Smith was to fill in the application, the documents would be uploaded to the folder at Document Library/Applications/Smith/Terry. If the folder does not exist, it will be created upon uploading automatically. When using this mechanism to folder documents uploaded into VisualVault, we encourage you to validate that tokens are filled in before the form can be saved. We also encourage you to configure the form so that token fields have fixed data where possible. Fixed data can be derived from drop-down lists or external data sources.

Validation and Outside Process


When working with a form, under some circumstances you may want to validate each field above and beyond the validation that VisualVault has built into it. To support this functionality you may need to create a custom web service that can be called to validate this information. The Form Validation and Outside Process configurations within VisualVault will allow you to integrate assemblies or web services that check the forms against your business rules for the form. To set up this level of integration you will need to complete the following steps:

  1. Register your assembly or web services with the Outside Process Admin screen.
  2. From one of the following integration, points select your registered outside process.
    • Form Validation - Found within the form properties area of the form template.
    • Button - Buttons can be configured to execute business logic in a web service in VisualVault.

This level of integration will continue as our product continues to develop. For assistance creating or developing a web service, feel free to contact us for more information.

Advanced Concepts


Advanced Form Features


Fill in Related Forms - This feature allows you to customize and relate forms processes depending on how you do business. For example, if your company works from a customer form, you can right-click for the context menu while on the form and then fill out a new service request, customer complaint, or warranty request and then track those requests from the customer record. Another company may have a similar process, but they may work from the point of view of a service request. In either circumstance, VisualVault can be set up to work with either process. When filling in related forms, you can also set up the process so that data is mapped from the first form to the second form, reducing data entry on the second form. Refer to the information on Fill in and Relate in the Form Context Menu Controls topic.

Wizard Based Forms - You have the capability of using a button control in combination with conditions to determine what part of the screen is visible at any time. As a result, a wizard is created to walk the user through filling in a form. You may include additional instructions that you do not typically need to show on the form. You may also fill in surveys that ask users certain questions based upon how they answer the questions. See the topic How to Setup a Wizard Based Form for more information.

Custom Tabs and Context Menus


Custom Tabs - The form view can be customized to show only the tabs you want the users to see along the top. You can also add in reporting tabs that display summary information, pie charts, a filtered form list, dashboards, etc. By allowing this capability, you can help users focus on aspects of the form that are important to get a task completed, or referential information can be brought into one location for quick access by the form users. See the Form Tab Customization topic for more information.

Custom Context Menus - Similar to custom form tabs, custom context menus can be created allowing you to put in your business terms and add appropriate functionality to the form. Examples of where the custom context menus are beneficial include, navigating to Custom Tabs, Filling in and relating forms that are part of the business process, or printing the form without drilling down into the form. See the Designing Form Context Menus topic for more information.

Form Field Population


Populates fields with External Data - Drop-down lists and text boxes can be populated based upon information from external data sources. This allows for the drop-down lists to change dynamically without the form designers needing to release a new version every time the drop-down information changes. See the topic Using External Data Lookups for more information.

Populate fields based upon a Drop Down List value - Many times you can make users more efficient by filling out as much of a form as possible for the user. You can also reduce the mistakes or misspelling errors when you automatically populate information for the user. This feature allows you to take a value that is selected in the drop-down list and then based upon that value query a database and acquire the information to fill in other fields on the form. This feature has been used by customers to populate Address information based upon a customer or vendor that was selected from a drop-down list. It may also be used to populate a form based upon a status that is selected. With assistance from the Information Technology departments, you can be creative and determine how you want to populate information based upon information selected in a drop-down list. See the topic Using External Data Lookup for more information.

Form Field Visibility


Show only the Fields a user should see - When working with forms in VisualVault, you can design a form so that users can see fields based upon groups they belong to in VisualVault. This feature creates a form that can be used for both public and confidential use. One example of this might be that a company wants to design a form where customers can submit comments or suggestions. When the customer fills in the form, they should only see the top section where the customer will identify themselves and fill in their comments. When an internal employee views the form, they will see the customer's information, but they will also be able to fill in and see internal comments. Designers can secure any object on the form. Controls on the form can also be configured to be read-only. See Groups and Conditions for more information on how to configure this feature.

Show fields based upon a selected value - This feature allows an object of a form to be displayed or set to read-only when certain conditions are true. As an example, a company may have a questionnaire that they send out to their clients. This questionnaire needs to have certain sections completed when the questions are answered in a certain way. With this feature, the additional questions will not become visible until the conditions are met. See Groups and Conditions for more information on how to configure this feature.


¿Te ha sido útil este artículo?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.
ESC

Eddy AI, que facilita el descubrimiento de conocimiento a través de la inteligencia conversacional