...
Table of Contents
Introduction
| English | |
|---|---|
| borderColor | green |
| borderWidth | 1 |
| titleBGColor | #ddffcc |
| borderStyle | solid | title | Definition
| Form Column is the placeholder to hold Form Elements. Each section has one column in it by default. At the section level, you may add more columns into to it. |
Figure 1: Column highlighted in blue in sample HR Expenses Claim app
Screenshots in this article obtained from http://localhost:8080/jw/web/console/app/hr_expense/1/form/builder/hr_expense_new
Figure 2: Column Properties
Get Started
The easiest way to see how the Form Column works is to use the existing built-in App Expenses Claims. Here are the steps:
- Start the Joget Server and open the App Center.
- Log in as admin and click on the pencil icon on the Expenses Claim to open the Design App. (see Figure 1)
Figure 1 - Click on Expense Claim New and you will be directed to the Form Builder.
- Hover the mouse over to the top right corner below the section and click Edit Column to open up Edit Column Properties (see Figure 2).
Figure 2 - To add new columns, hover over the section and click on the Add Column button (see Figure 3)
Figure 3 - To edit specific column, hover over to the top right corner within the specific column (see Figure 4)
Figure 4
Column Properties
| Name | Description | |||||
|---|---|---|---|---|---|---|
| Label | Column label. Blank by default. | |||||
| Width | Width of the element.
| |||||
| Horizontal Layout | Horizontal Layout in the arrangement of elements contained. |