Create a form

The following paragraphs explain how to create a smartform step by step. 

Create a form

For creating a smartform an opening <form> and a closing </form> - tag are required. These two tags mark the start and the end of the smartform. The content to be displayed is located between these two tags.

Class and name for the form

A form needs a class and a name. Those are defined within the opening <form> - tags. 

Make form visible for all system users

The attribute security="all" authorizes any system-user to view this form. 

Create a table

Open

The opening table tag indicates the beginning of a table. Within the subsequent colgroup the width for each column is specified. 

In this case, a table with 3 columns, 200 pixels of width each and a border around each cell, shall be created. 

The tr tag is the starting point for a new row within a table, while the td tag begins a new column. Within the td tag it is exactly defined in which row and column the user is, and the desired content can be entered here.

Integrate Image (Logo)

Open

To integrate an image, the tag img is required. The attribute src=“..” (the path to the desired image is given here) and the attribute alt=“..” (this is displayed when the image can not be loaded) has to be given to this. In this example, the image should be located in the first column. Because the image would be too big, it can be scaled down by the additional attribute width. This defines the width of the image in pixel. The attribute colspan=“2” connects a table cell with the following table cell (to the right).

Selection box (Radiobuttons)

Radio Buttons are selection boxes that are always grouped together. Only one choice can be made from this group. For this, the type 'radio' is assigned to the “in-itself-closing” <input> - element. To consolidate multiple radio buttons to one group, the same 'name'-attribute must be assigned to it. If a radiobutton is already checked when opening the smartform, the attribute 'checked=“checked' must be assigned to it. PLEASE NOTE! This attribute can only have one radio button for each radio button group. For all <input> - elements the process variables are set on 'id', only for radio buttons the process variable is set on the 'name' attribute. 

If the selection of a radiobutton is also possible by clicking on the associated label, the label must be enclosed by an opening <label> - and a closing </label> - tag. This is addressed with the attribute 'for=”“' via the 'id' of the respective <input>-elements. With a <br /> - element (break) a new line is generated.

Selection box (Checkboxes)

Checkboxes are also selection boxes, but can be clicked individually and independently. Otherwise, the same rules apply as those for <radio> buttons.

Choice box (Selectbox)

For creating a selectbox, an opening <select> and a closing </select> - tag are necessary. To add options for selection to this, any number of options can be added between the <select> - tags. Every option needs the attribute 'value=”“', whose content can be different to the text between the <option> - tags and is not displayed. With the 'value=”“' - attribute process variables are set and queried in the system.

Input fields

There are different types of input fields in which free text can be written.

One-line text input field

For a normal text field, the tag input is used in combination with the attribute type="text". This forms a simple text field with one row. 

Multiple-line text input field (Textareas)

For creating an input field (e.g. for description), an opening <textarea> - and a closing </textarea> - tag are necessary. This can be resized by the user and multiple rows can be written in.

Formatting in textareas

To offer the formatting elements cursive, bold, underlined, blue font and red font in a textarea, the class richtext has to be given.

The variable's name also has to contain rich text and bootstrap has to be loaded (data-bootstrap=“true” in <form>).

Datepicker (Calendar)

To create a so-called Datepicker to an input field, only the class datepicker must be given to it.

The Javascript library JQuery, which is automatically integrated into every smartform, opens now by clicking a field a calendar from which a date can be selected, which is then transferred in the input field.

Add stylesheets (css)

In order to address elements that have a class, the class name must be added with a point in front, e.g. .background. Within the following brackets it can be defined, how the element should be affected. The information about the style affects all elements that have a class with this name.

To address an element with a specific ID, the ID must be added with a hash mark (#) in front, e.g. #firstRow. All the elements with this ID, now focus their style according to the following definition.

If all elements of a specific type should be addressed, only the tag of the element needs to be added, e.g. label.

Subsequently, for all label elements, the font-color is changed to green.
All elements with the ID firstRow get a blue background, and all elements with the ID background-color get a red background.
Finally, now the frame of the table is set to a width of 0 pixel and disappears.

Mandatory fields at instance start

If an input field has to be already defined as a mandatory field at the instance start, the attribute “required” with the value “true” is necessary.

If a Select Box changes into a mandatory field and the basic option (eg, “Please select …”) should be defined as not a valid value, the attribute default=“default” of this option must be included.

Index fields

Index fields are used for displaying information from a smartform, such as tasks, instances and so on, directly in a list. They can be filtered and sorted. See also https://tim-doc.atlassian.net/wiki/spaces/eng/pages/228492556.

So that a index field indicates a value, it must be defined in the smartform. “Input” and “Select” fields can be selected as index fields. To display a value from the smartform in the columns, the attribute index=„fieldX“ must be added to the respective field in the smartform. Where “X” is the value of the index fields, so 1 to 10.

Now the value is displayed in the index field number 2, which was entered in the smartform in the textfield “name”.