Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Introduction

...

borderColorgreen
borderWidth1
titleBGColor#ddffcc
borderStylesolid
titleDefinition

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

...

to it.

Image Removed

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

Image Removed

...

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:

StepsScreens (Click to view)
  1. Start the Joget Server and open the App Center.

  2. Log in as admin and click on the pencil icon on the Expenses Claim to open the Design App. (see Figure 1)

  3. Click on Expense Claim New and you will be directed to the Form Builder.

  4. 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).

  5. To add new columns, hover over the section and click on the Add Column button (see Figure 3)

Image Added

Figure 1


Image Added

Figure 2


Image Added

Figure 3


Column Properties

NameDescriptionScreen (Click to view)
LabelColumn label. Blank by default.

Image Added

Width

Width of the element.

Code Block
titleExample
30%
120px
Horizontal LayoutHorizontal Layout in the arrangement of elements contained.