E-form fields define your e-form and the information that you contain in a process application. If you haven’t yet created an e-form 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 used and the most common properties along 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 which will set your fields’ 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 whichever e-form field you have selected. Selected fields are shown in a yellow color in your form designer.





Common properties

These properties are available to all e-forms.

Property
Value and example
Description
width
Number in pixels or percent. E.g. 200 or 50%.
Sets the width of the field to a fixed width in pixels or a percentage.
fieldLabel
Any alpha numeric characters and most special characters.
The label for your field. Describe what information to input in the field.
hideInViewModes
Alpha numeric characters. E.g. CREATE, REVIEW. See Create your first process aware e-form to learn how to use it.
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.
lockInVeiwModes
Alpha numeric characters. E.g. REVIEW, COMPLETE. See Create your first process aware e-form to learn how to use it.
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.
hideLabel
true or false
Hides the fields label
id
Alpha numeric characters. No special characters allowed. Must be unique in the e-form.
The unique ID of the e-form field.
labelStyle
All CSS Attributes. E.g. font-weight:bold;
Cascading Style Sheets is a standardized way to set layout and design to web items.
collapsed true or false
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.
collapsible true or false
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.
tabIndex Numbers of the tab order E.g. 1,100,200 Will set the tab order through the form. NOTE: Recommended to set nr 1 in the first field and then higher numbers E.g. 100, 200 in order to without any issues add new fields further on.


Global Variables

Global variables exist in Barium Live and are accessible to be inserted into e-forms for automatic identification information in form fields.


You must add this to the form definition in the form editor today.


{
 xtype : "textfield",
 id : "field1",
 fieldLabel : "Field label",
 defaultValue : "=global.sessionData.account.[ACCOUNT VARIABLE]"
}

global.sessionData contains information available in the current session.


account contains the following variables variables connected to the users account:

  • name = The account's first and last name combined
  • userName = User name
  • firstName = The account's first name
  • lastName = The account's last name
  • fullName = The account's first and last name combined
  • email = The account's email address

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.



Date field

A date picker field allowing users to pick a date from a calendar.



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. Default, however, is that the buttons are detached from each other.



To 'group' two or more buttons to each other, set the property called 'name' to 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 to e.g. Group2.


NOTE: A radio button group can't be mandatory. If you want to use this function to select one of several options, you can instead 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 his/her computer to the process instance. Documents will be uploaded to the instance folder.



Combotypefield & Combotypefield2

These field looks 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're 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.


E-form field examples

Below are links to examples of e-forms and fields to show how they look and feel for end users who view or use the e-form.