Design a Form

Design a new form within your Joget environment to enhance functionality and integration in your application. The process from initial setup to final saving and previewing is straightforward and customizable.

Create a new form

Begin designing your form by following these steps:

1. Go to App Composer page. 
2. In the Design App page, create a new form using the + button on the Form Builder column.
   
3. Enter the form details:
   • Form ID: Unique ID to represent this entity.
     
     Naming convention
     A standard naming convention is highly recommended to be used across the development of your App to maintain consistency and ease maintenance works.
     Camel case naming convention is recommended for this field.
     Example:  travelRequestForm
     Reserved IDs
     Do not use the following reserved IDs as ID of Form, Section, and Field: appId, appVersion, version, userviewId, menuId, key, embed.
   • Form Name: Name to represent this entity.
     
     Example
     Travel Request Form
   • Table Name: The database table name to store the form data.
     
     Naming convention
     As the table name is related to the database, we highly recommend the use of database naming conventions, e.g.  travel_requests
     Note that different forms can share data by pointing to the same table name.
   • Description: Entity description.
   • Duplicate Settings: With the above information filled up, one can choose to clone the design from existing Form entity. 
     

     

4. Click Save to create the form. As a result, the Form Builder will be launched in a new window.
   

Design the form

1. Access the Form Builder: You'll see a palette of form elements on the left and a canvas in the middle with sections that may include multiple columns.
   
2. Edit Sections: When you hover over a section header, editing options will appear. Users can click Edit Section, which opens the Property Editor on the right pane, showing properties that the user can modify. 
   

   Field	Description	Value for this example
   Label	A unique descriptive name.	Travel Request Details
   ID	A unique identifier.	travel_request_details

   When renaming sections or form fields, Joget will suggest IDs based on the provided Label. You can accept them or change to one that best fits your needs. Then click OK to apply changes.
   
   
   
   
   
3. Add and Arrange Sections: Use the Add Section button to introduce new sections, and drag to rearrange them.
4. Add Elements: Drag elements from the palette into any section. Click on an element to view and edit its properties.
   
   
   
   
   
5. Use the Preview button at the top to see how the form will appear to users.
6. Once you are satisfied, click the Save button to confirm all changes. You will receive a confirmation once the form is successfully saved. Continue editing or close the Form Builder as needed.

The video below provides a visual representation of the steps mentioned previously.