...
Table of Contents
...
Introduction
| English | |
|---|---|
| green | |
| borderWidth | 1 |
| titleBGColor | #ddffcc |
| borderStyle | solid |
| title | Definition | Calculation Field allows you to perform a series of arithmetic computations to a set or a series of fields. The Calculation Field is only available on Professional and Enterprise Edition. |
Get Started
The easiest way to see how the Advanced Grid works is to use the existing built-in App Expenses Claims and look at an existing form in the app. Here are the steps:
- Start the Joget Server and open the App Center.
...
Figure 1: Screenshot highlighting Calculation Field taken from sample HR Expenses Claim app
Screenshots taken from http://localhost:8080/jw/web/console/app/hr_expense/1/form/builder/hr_expense_claim
Figure 2: Calculation Field Properties
- Log in as admin and click on the pencil icon on the Expenses Claim to open the Design App. (see Figure 1)
Figure 1 - Under FORMS column, click on Expense Claim Form (see Figure 2)
Figure 2 - Hover the mouse over the Calculation Field labeled Total Amount $ on the canvas and click on Edit to open up the Edit Calculation Field properties.
- Take note of the Variables field. The spECD value is referring to another field within the form (see Figure 3).
Figure 3 - Hover the mouse over the Grid element on the canvas above the Calculation Field and click on Edit to open up the Edit Grid properties (see Figure 4).
Figure 4 In Figure 5, we are summing at a specific column from a Form Grid.
Form Grid ID: spECD
Column in Form Grid: amount
Field ID to be filled in: spECD.amount
Figure 5- Click on Preview and enter values into the Amount column in the Grid to see the Total Amount $ automatically adds the values.
Calculation Field Properties
Edit Calculation Field
Field ID to be filled in: entries.formattedAmount
| Name | Description | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ID | Element ID (By declaring as "total", a corresponding database table column "c_total" will be created) Please see Form Element for more information about defining the ID and list of reserved IDs. | |||||||||||
| Label | Element Label to be displayed to end user. | |||||||||||
| Variables |
|
In the example above, we are summing at a specific column from a Form Grid.
Form Grid ID: entries
Column in Form Grid: formattedAmount
| |||
| Equation | Arithmetic operation using the variables declared above. |
Figure 3: Calculation Field Properties - Advanced Options
|
Advanced Options
Data
| Name | Description |
|---|---|
| Validator | Attach |
a Form Validator plugin to validate the input value.
|
Format
| Name | Description |
|---|---|
| Formatting Style |
|
| Number of Decimal | Number of Decimal |
| Prefix | Prefix of the calculated value |
| Postfix | Postix of the calculated value |
| Use Thousand Separator? | Thousand Separator toggle. |
| Store as Numeric Value? | Toggle to store as numeric value instead of a string |
UI
| Name | Description |
|---|---|
| Hidden? | Shows this element to the end user. |
| Display as Label? | Displays the value of the element as plain text. |
Workflow
...
| Name | Description |
|---|---|
| Workflow Variable | If the form is part of a workflow process, upon saving of the form (by clicking on "Save as Draft" or " |
Save" button). The value in this input field will be saved into the corresponding workflow variable named here.
|