Form Element

Form elements in Joget are extensible plugins that provide users with various input options for forms. These elements range from text fields and select boxes to hidden fields and custom HTML components. You can drag and drop onto the form canvas, and their properties can be edited to suit the application's needs.

Each form element has its own set of attributes; ID and Label attributes are common to most of them.

• Label: The element label to be displayed to the end-user.
• ID: The 'ID' in the property editor is a unique identifier.
  Joget core uses this ID as a column name within the table associated with the form (e.g. c_title 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.
  The Form Builder now suggests an ID to an element based on the Label you have entered for that element.
  Reserved IDs
  Do not use the following reserved IDs on the form element's ID attribute:
  
  

  • id (can be used but with caution)
  • appId
  • appVersion
  • version
  • userviewId
  • menuId
  • key
  • embed
  • primaryKey
  Auto Generated IDs
  Note the following IDs, as these are automatically generated upon creating a new form. Upon submission of the form in runtime, these fields will be updated automatically:
  

  • dateCreated
  • dateModified
  • createdBy
  • createdByName
  • modifiedBy
  • modifiedByName

  Recommended Naming Convention
  You recommend using snake_case (i.e., first_name) as this is the standard database naming convention. The ID declared will be part of the database table column name.

Sortable Columns

Certain form elements support sorting by headers and sorting control buttons:

Elements with Sorting Feature

Able to sort alphabetically through hardcoded options in these form elements:

• Select Box
• Check Box
• Radio
• Grid
• Multi Select Box
• Popup Select Box
• Calculation Field
• Advanced Grid
• Form Grid
• List Grid

Description of Feature

• Click the header or button to sort the column alphanumerically.
• The first click sorts in ascending order, while the second click sorts in descending order.
• Empty cells are placed at the bottom of the column.
• For cells with checkboxes, unchecked boxes appear on top during the ascending sort and at the bottom during the descending sort.
  

List of form elements

• Advanced Grid
• AJAX Subform
• Calculation Field
• Captcha
• Check Box
• Custom HTML
• Date Picker
• File Upload
• Form Column
• Form Grid
• Grid
• Hidden Field
• ID Generator Field
• Image Upload
• List Grid
• Multi Paged Form
• Multi Select Box
• Password Field
• Popup Select Box
• Radio
• Rich Text Editor
• Section
• Select Box
• Signature
• Spreadsheet
• Subform
• Text Area
• Text Field
• Time Picker

By utilizing these elements, you can create dynamic and interactive forms tailored to your application's requirements.