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;


collapsedMakes 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


collapsibleMakes 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


tabIndexWill 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 ValuesThe 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).

formulaPerforms 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
BodystyleCan 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 TextAdds 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 "."
alwaysDisplayDecimalstrue/falseAdd 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
decimalPrecision1,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
typeNamespaceid.typeContains 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.