E-form fields define your e-form and the information that you contain in a process application. If you have not created an e-form yet, follow the instructions in the article Create your first e-form. In this article, there is a list of the most common e-form fields and the most common properties with a description of how they are used.
Understanding the table below
Property is what you can add to the e-form field that can contain a value that will set your field's behavior or layout to what the property describes and the value decides.
The Barium Live e-form designer has a property table on the bottom right corner which shows the properties of the e-form field you have selected. Selected fields are shown in yellow in your form designer.
Common properties
These properties are available to all e-forms:
| Property | Description | Value and example |
| width | Sets the width of the field to a fixed width in pixels or a percentage. | Number in pixels or percent. E.g., 200 or 50%. |
| fieldLabel | The label for your field. Describe what information to input in the field. | Any alpha numeric characters and most special characters. |
| hideInViewModes | Hides the field when viewing the e-form a defined viewMode. This is used to create process aware e-forms for showing and hiding fields depending on where in the process the e-form is. | Alpha numeric characters. E.g., CREATE or REVIEW. See Create your first process aware e-form to learn how to use it. |
| lockInVeiwModes | Locks the field for editing when viewing the e-form in a defined viewMode. This is used to create process aware e-forms for showing and hiding fields depending on where in the process the e-form is. | Alpha numeric characters. E.g., REVIEW or COMPLETE. See Create your first process aware e-form to learn how to use it. |
| hideLabel | Hides the fields label | true or false |
| id | The unique ID of the e-form field. | Alpha numeric characters. No special characters allowed. Must be unique in the e-form. |
| labelStyle | Cascading Style Sheets is a standardized way to set layout and design to web items. | All CSS Attributes. E.g., font-weight:bold; |
| collapsed | Makes a fieldset collapsed on form load. NOTE: This will cause layouts inside to not render properly so instead use a checkbox and rules to make fields visible or hidden. | true or false |
| collapsible | Makes a fieldset collapsible if True. Can be used together with collapsed False which will render layouts properly but will show the entire fieldset on form load. | true or false |
| tabIndex | Will set the tab order through the form. Note: Recommended to set number 1 in the first field and then higher numbers (E.g., 100, 200) in order to add new fields without any issues further on. | Numbers of the tab order E.g., 1,100,200 |
| Default Values | The Default value is used to pre-populate a field with data. The data populates the field when the form is created in the process for the first time. | To set default value from another text field: $form.field$ To set from a multi select field $form.field.key$ To set Global Variables. =global.sessionData.account.[ACCOUNT VARIABLE ] (Read more about variables here). |
| formula | Performs calculations. Will execute from top to bottom according to the cascade function. Supported fields to use in formula: number field, numeric field, text field, single select. The deliminator , is not supported and if used in text field will generate wrong calculation. | Operators: + - / * ( ) E.g., field*10, field+field, (field-field)*field+1.5 |
| Bodystyle | Can be used to personalize your form with different CSS styles that can be applied to the form. | padding: [top, right, bottom, left] Ex. Padding: 5px 5px 5px 5px. |
| Tooltip Text | Adds a floating tooltip text when you move your mouse cursor over the specific field. | Tooltip text Example: "Add your name here" |
| dismissDelay | Specifies how long a Tooltip Text should be visible in milliseconds. Can be used in a specific field or directly in the root to be used as a default for all tooltips in the form. Note: If there is a dismissDelay both on the root panel and a field, the fields property will be used. | Value 1000= 1 second |
Textfield
A single row field for smaller amounts text, can contain any characters.
Textarea
A multiline field for larger amounts of text, can contain any characters.
| Field-specific property | Value | Description |
| height | Number in pixels (200px) | The height of the field in the e-form |
| grow | true or false | A textarea height will dynamically grow according to the amount of text being filled out |
HTML editor
An advanced text area field that allows basic text formatting.
| Field-specific property | Value | Description |
| anchor | Percent (100%) | The width of the HTMLeditor field, used instead of width |
Number field
A field that only allows numeric inputs.
Numeric field
A field that only allows numeric inputs. This is more advanced than the number field and has support for the following attributes.
| Field-specific property | Value | Description |
| thousandSeparator | , | Defines what thousand separator you want. Write if you wish there to be a space as the thousand separator. The default is set to ",". Period "." is not an allowed value. |
| decimalSeparator | , or . | Sets what decimal separator you would like. Note: Do not select the same decimal separator as your thousand separator, that will result in miscalculations. For example, if using the formula attribute, the default is set to "." |
| alwaysDisplayDecimals | true/false | Add and set to true if you always wish to display decimals. For example, if set to false, the number 50.00 will show as 50. If set to true, it will show as 50.00 |
| decimalPrecision | 1,2,3 etc. | Decides how many decimals to show and also rounds off any greater input number. For example, if set to 2 and you type in 10.127 the value will be 10.13 as it rounds of to two decimals. |
| prefix and suffix | £ $ € kr sek :- etc. | The two attributes prefix & suffix will add the input symbol before or after your input value. This is only for display; if you try to copy the value in a field you will only get the numeric value, not the prefix/suffix. |
Date field
A date picker field allowing users to pick a date from a calendar.
Note: The attribute "format" cannot be used with Date field. It will display wrong dates in lists if used.
Time field
Contains a list of predefined times to choose from.
| Field-specific property | Value | Description |
| format | H:i (creates a list of hours with i minute intervals). H:15 = Every hour with 15 minute intervals (1:00pm, 1:15pm, 1:30pm, 1.45pm) | Set the time format to show in the list |
Checkbox
Checkboxes allow a user to make an optional choice by checking in the checkbox.
Radio button
Radio buttons allow a user to make a mandatory choice between two or more options. The default is that the buttons are detached from each other.
To 'group' two or more buttons to each other, set the property called 'name' (e.g., Group1) for each of the radio buttons you want to group. Let the property 'inputValue' remain different for the buttons. If you have another group of radio buttons, just set its name (e.g., Group2).
Note: A radio button group cannot be mandatory. If you want to use this function to select one of several options, you can use a drop-down list.
Label
Label allows you to add descriptive texts, headings, and information to help users understand your e-form.
Attachment
The attachment field allows the user to upload a document from their computer to the process instance. Documents will be uploaded to the instance folder.
Combotypefield and Combotypefield2
These fields look at a value list in your space and presents these values in a drop down list. The values are searchable in the list by typing in the first letters of the value you are looking for.
The difference between them is that Combotypefields2 is the default type as it is faster to load. However, it only presents 100 values in the drop down even if all values are searchable.
If you have more than 100 values and want them all to be presented in the drop down, simply change the "Combotypefield2" type to "Combotypefield".
| Field-specific property | Value | Description |
| typeNamespace | id.type | Contains the id of the connected value list, this can be altered here directly if you want to swap to another value list. |
Variables
You can add different kind of variables to the form. Read more about variables here.