Joget Form Builder makes it easy for you to design your forms. One can easily build a form by using the simplistic and guided interface.
Figure 1: Form Builder
Yellow - Quick Selector to easily switch between forms, lists and userviews
Red - Main Menu
Purple - Element Palette
Blue - Design Content Pane
Forms are made up of form elements, many types of which are already built inside Joget and ready to be used. We have listed them below.
When you design forms, you must first set its properties.
"ID" is a unique identifier for the form.
"Name" allows you to identify this form in other places (e.g., when creating a data list).
"Table Name" is the table used by the Joget core to store the form data during a workflow process. The Joget core automatically creates the table and assigns a name to it (i.e., 'app_fd_mytablename'). You can choose to specify a table name that already exists; new columns will be added to that table when you build your form. We will discuss more of this later on.
There are many different form fields (i.e., TextField, SelectBox, Hidden Field, etc.) to choose from when your are designing your forms. You can drag-and-drop them on your form canvas and then edit their properties.
The 'ID' in the property editor is a unique identifier. The Joget core uses this ID as a column name within the table associated to the form (e.g. c_patientAssignment in the figure above). When a user enters a value in the field during a workflow process, the value is stored in that column. If the ID has never been used in previous forms associated to the same table, a new column will be created. If the ID, on the other hand, has been used before, that column will be used. It is important to note that when someone enters a value when completing a form during a workflow process, that value will overwrite the existing one.
"Label" is the human-readable identifier for the form field.
"Value" is the static value or hash variable that you would like to store in that column.
Other properties may exist depending on the type of form field you added to the canvas.
- AJAX Sub Form (Enterprise)
- Calculation Field (Enterprise)
- Custom HTML
- Date Picker
- File Upload
- Form Grid (Enterprise)
- Hidden Field
- ID Generator Field
- Image Upload (Enterprise)
- List Grid (Enterprise)
- Multi Paged Form (Enterprise)
- Multi Select Box (Enterprise)
- Password Field
- Popup Select Box (Enterprise)
- Rich Text Editor (Enterprise)
- Sub Form
- Text Area
- Text Field
Page: Text Field
Page: Password Field
Page: Text Area
Page: Date Picker
Page: File Upload
Page: Sub Form
Page: Custom HTML
Page: ID Generator Field
Page: Multi Paged Form (Enterprise)
Page: Multi Select Box (Enterprise)
Page: Popup Select Box (Enterprise)
Page: Calculation Field (Enterprise)
Page: AJAX Sub Form (Enterprise)
Page: Image Upload (Enterprise)
Page: Rich Text Editor (Enterprise)
Page: Form Grid (Enterprise)
Page: List Grid (Enterprise)