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.
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, 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, 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 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.||Numbers of the tab order E.g. 1,100,200|
|Default Values||The Default value is used to prepopulate 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.
A single row field for smaller amounts text, can contain any characters.
A multiline field for larger amounts of text, can contain any characters.
|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|
An advanced text area field that allows basic text formatting.
|anchor||Percent (100%)||The width of the HTMLeditor field, used instead of width|
A field that only allows numeric inputs.
A date picker field allowing users to pick a date from a calendar.
Contains a list of predefined times to choose from
|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|
Checkboxes allow a user to make an optional choice by checking in the checkbox.
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 allows you to add descriptive texts, headings and information to help users understand your e-form.
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".
|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.
You can add different kind of variables to the form. Read more about variables here.