How To: Create Your First Form

Follow the steps below to create your first form

Why forms?

• Forms can be created in the Process Automation form editor. This allows you to create forms that contain information that is needed in order to be able to perform the tasks in the process application.
• Forms are usually the first thing seen by users who initiate instances of your process. 
• Forms can be made process aware, allowing you to control which fields are visible or editable, depending on where in the process it is. You can learn more about this function in the article, Process Aware Forms.

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. If you already have a form template, double-click on the form to open it.
   To create a new form, click on Create.
   
   
   
   If you create a new form, a window appears 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. A 2-column layout can be made in a Default layout as well. Once you save the form for the first time from the template configuration tool, you will be asked to also name the form and define its language. The language will enable text-to-speech tools to interpret the form in the correct language.

Open/Create a form template from Process Studio

1. Open the process where you want to open or create a form template.
2. Open the Asset Browser found in the menu on the left side of Process Studio
   
   
   
3. Find the section Form templates. Choose the plus sign +, if you want to add a new template, or hover over an existing template and click on the pen symbol to edit the form.
   
   
   If it is the first time you edit a form template you have to choose a form layout. A new window appears 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. 
   A 2-column layout can also be created using the Default layout. 

Edit a form

1. Once you are in the form editor, you can add, edit, and remove fields. To remove fields, right-click and choose Delete this element.
   
   
   
2. The form's drawing board is located in the middle of the screen. This is where you add the fields that will make up the form.
   On the left side is the Toolbox, which contains the different fields and objects that are available to you.
   On the right 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 that contain your form fields.
3. Expand the Fields folder to view the available form fields.
   The predefined fields available in the list can be seen here. Different fields have different attributes which allow them to hold different types and amounts of information. For example, Numberfield will only allow users to enter numeric characters. Attachment will allow the user to upload a document to the form.
   
   
   
4. Expanding the Object fields folder allows you to add special process aware form fields. These are fields that 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 is important to always have one of the available Object fields in your 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.  Now you have a field in your form with a standard size and label. To change the text of the label, click inside the field. When the small cursor blinks inside the field box it will activate the attributes panel on the bottom right side of your screen.
   
   
   
7. You can use the attributes panel to change the settings of each field. You can decide whether the field 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 tool allows for a lot of customization both function-wise and layout wise, however, the details of its functions are out of the scope of this guide.
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 form process aware and user-friendly.
   
   
   
10. 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 your field change will change size in the drawing area. It should now take up 50 % of the width of your form.
    
    
    
14. Add a Textarea field by dragging and dropping it into the form drawing area. Following the same steps you did above to change the field label and add the width attribute. Set the width to 50%. If your width does not scale properly in a hidden fieldset, it could be worth trying to set width 0.5 instead on the fieldset to make it scale as intended. If you have any questions on more advanced configuration do not hesitate to contact support.
15. Also, add a Datefield, change the field label to Registered date but do not add any other attributes to it.
    
    
    
16. When you are finished editing your form, click Save.
    
    
    It is possible to create multiple forms for each process application. Just create a new form and follow the same steps as you did with the first form.