Follow the steps below to create your first e-form. No matter if you have already added an empty form template to a process model (step 6-15 in Create your first process application  or if you are working with an application without forms, this article is relevant to you.

Why e-forms?

• Forms can be created in the Barium Live form editor allowing you to create forms that contain the information which is needed in order to be able to perform the tasks in the process application.
• Forms are usually the first thing users who initiate instances of your process see. It could be a non-conformance form, a form to register to a webinar, a work order and much more.
• Forms can be process aware allowing you to control which fields are visible or editable depending on where in he process it is.

Open/create a form template from the Application Configuration

1. Go to the Application configuration of the application you want to open or create a form template for.

2. Either double-click on the form in the lower left hand corner (if you already have a form template) or create a new form with the button Create.

If you create a new form you can choose a form layout, a new window appear with the selections Default layout and 2-column layout. 

If you choose the 2-column layout the form will automatically be prepared with a Column Layout with two columns and two Form fields. 

NOTE: a 2-column layout can be made in a Default layout as well. 

Open/Create a form template from the BPMN 2.0 Modeler

1. Open the process where you want to open or create a form template for.

2. Open the Asset Browser and find the section Form templates. Either choose the "+"-sign, if you want to add a new template, or hover an existing template and click on the appearing pen symbol to edit the form.

NOTE: If it is the first time you edit a form template you have to choose a form layout, a new window appear with the selections Default layout and 2-column layout. If you choose the 2-column layout the form will automatically be prepared with a Column Layout with two columns and two Form fields. 

NOTE: a 2-column layout can be made in a Default layout as well. 

Edit the form

1. If you created a new form, the form editor will be either blank or have the prepared column layout if you have chosen that in previous stages. If you, on the other hand, opened a form template, your form will contain previous added objects. No matter which, you are free to add, edit and remove fields. To remove fields, right-click and choose Delete this element.

2. In the middle of the screen the form's drawing board is shown. This is where you add the fields which will create your form. On the left hand side you have your Toolbox, containing the different fields and other objects that are available to you.

On the right hand side you have the Outline showing you the added form objects, giving you a simple way to select specific objects for configuration. 

You create your form by dragging fields and objects from your palette and dropping them on the drawing board. Your basic form is built with panels which contain your form fields.

3. Expanding the Fields folder reveals the form fields which are available to you.

The predefined forms available in the list can be seen here. Different fields have different attributes which allow them to hold different types and amounts of information. Numberfield will only allow numeric characters to be filled out, Attachment will allow the user filling out the field to upload a document along with filling out the form.

4. Expanding the Object fields folder allows you to add special process aware form fields. These are fields which will affect the running process instance that has been started. An example is the Instance priority field which is predefined to be a drop down combo box containing the values Low, Normal, High and Urgent. The user filling out the form will be able to choose one of the values and this will affect the priority status of the current instance.

5. It’s important to always have one of the available Object fields in your e-form; namely the Instance name field. This is a standard text field but the text filled out in this field will give the current instance the name filled into the form.

Drag the Instance name field from your palette to your drawing board and drop it anywhere in the New form panel.

6. You now have a field in your form with a standard size and a standard label. To change the text of the label, click inside the field once until you see the small cursor blinking inside the field box. This will activate the attributes panel on the bottom right side of your screen.

7. The attributes panel is where you can do all sorts of settings to each field. You can decide whether the form is optional or must be filled out (allowBlank:false), you can change the fieldLabel, set an id and add a number of additional attributes that will make your field behave and look the way you want.

This is a very powerful tool where it is possible to do some advanced things both function wise and layout wise. All the details of what is possible here is out of the scope for this guide, we will stick to the basics.

8. Make sure that the Instance name field is the one you marked. Change the fieldLabel to Heading and hit Enter on your keyboard.

9. You can add additional attributes in the drop down field using the drop down field on the bottom of the attributes panel.

If you scroll down in the list you can see the almost endless attributes available to your field. These attributes, used in the right way can make your e-form process aware and user friendly.

10. Let’s try to add the width attribute. The easiest way to add an attribute is to write the name of the attribute in the bottom field. Start writing width and you will see that the list of attributes will start to shrink.

11. Write Width and hit Enter on your keyboard twice.

12. Now you can add the width you wish to set on your field. You can use percentage values or pixel values. Write 50% and hit enter.

13. You have now added a width to your text field and you should notice your field change size in the drawing area. It should now take up 50 % of the width of your field.

14. Add a Textarea field by dragging and dropping it to the form drawing area. In the same way as above, change the field label and add the width attribute. Set the width to 50%.

NOTE: If your width dosen't scale properly in a fieldset that was hidden it could be worth trying to set width 0.5 instead on the fieldset to make it scale as intended. A scaling issue could also appear in internet explorer if padding-right is set, please use margin-right instead. Should you have any questions on more advanced configuration don't hesitate to contact support@bariumlive.com.

15. Also, add a Datefield, change the field label to Registered date but don’t add any other attributes to it.

16. That’s enough for now. Click on the button Save on the top left of the drawing area.

It is possible to create more than one form to each process application. Simply click on Create and repeat the above steps.