Definition

Form Element is a type of plugin that is extensible via Joget's plugin architecture. Form Element is responsible for providing the end users form input elements to interact with.

There are many different form fields (i.e., TextField, SelectBox, Hidden Field, etc.) to choose from when you are designing your forms.  

You can drag and drop them on your form canvas and then edit their properties. 


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

Figure 1: Text Field Properties

NameDescription

Label

"Label" is the human-readable identifier for the form field.

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.

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

Take note of the following IDs as these are automatically generated upon the creation of a new form. Please take note upon submission of the form in runtime, these fields will be updated automatically:

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

Recommended Naming Convention

We 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.



New Feature

This is a new feature in Joget DX 8.

The Form Builder now suggests an ID to an element based on the Label you have entered for that element. (Figure 2)


New feature

New sorting feature in Joget DX 8 version 8.1 onwards

Able to sort alphabetically thru hardcoded options in these form elements 

  1. Select Box
  2. Check Box
  3. Radio
  4. Grid
  5. Multi Select Box
  6. Popup Select Box
  7. Calculation Field
  8. Advanced Grid
  9. Form Grid
  10. List Grid

Description of Feature : 

  • Support sorting by headers and sorting control button
  • Click the pointed header or button as in figure below.After clicking the header or button, the column cells will be sorted alphanumerically,

     
  • The first numerical value in the sequence having priority over alphabetical characters in the string sequence.
  • For example, in the string 'test123', the first numerical value would be referring to '123'.
  • The first click will sort it in ascending order,(Numerical : 123) will be shown first
  • The second click will sort it in descending order.
  • Subsequent clicks on the same header will repeat this cycle of ascending and descending until a different header is selected. Empty cells are placed at the bottom of the column.
  • If the cells contain checkboxes instead, unchecked boxes will appear on top during ascending and the checked boxes at the bottom while during descending, checked boxes will appear on top and unchecked boxes at the bottom.

Download this sample app to see this new feature in action : APP_kb_dx8_grid_sort_feature.jwa

  1. Import the app
  2. Open the App Composer 
  3. Click on each Form Element in GridTest form
  4. Harcode any value to see the sortable Heading and button feature in the App Composer



List of Form Elements




  • No labels