{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"611c5adf-7608-447f-8566-11800a51ff6a"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"a985a07e-c31b-4afd-9404-93acd40f6a25"}},{"type":"rule"},{"type":"paragraph","content":[{"text":"The following paragraphs explain how to create a form step by step. ","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Create a form","type":"text"}]},{"type":"paragraph","content":[{"text":"For creating a form an opening - tag are required. These two tags mark the start and the end of the form. The content to be displayed is located between these two tags.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Class and name for the form","type":"text"}]},{"type":"paragraph","content":[{"text":"A form needs a class and a name. Those are defined within the opening ","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Make form visible for all system users","type":"text"}]},{"type":"paragraph","content":[{"text":"The attribute security=\"all\" authorizes any system-user to view this form. ","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Create a table","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"width":622,"id":"11a8e021-439f-47fb-966f-27bfb19832ee","collection":"contentId-228493282","type":"file","height":88}}]},{"type":"paragraph","content":[{"text":"The opening","type":"text"},{"text":" table","type":"text","marks":[{"type":"strong"}]},{"text":" tag indicates the beginning of a table. Within the subsequent ","type":"text"},{"text":"colgroup","type":"text","marks":[{"type":"strong"}]},{"text":" the width for each column is specified. ","type":"text"}]},{"type":"paragraph","content":[{"text":"In this case, a table with 3 columns, 200 pixels of width each and a border around each cell, shall be created. ","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"tr","type":"text","marks":[{"type":"strong"}]},{"text":" tag is the starting point for a new row within a table, while the ","type":"text"},{"text":"td","type":"text","marks":[{"type":"strong"}]},{"text":" tag begins a new column. Within the ","type":"text"},{"text":"td","type":"text","marks":[{"type":"strong"}]},{"text":" tag it is exactly defined in which row and column the user is, and the desired content can be entered here.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Integrate Image (Logo)","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"width":619,"id":"c60443f6-7f3a-47f7-9479-32ec36a76a3e","collection":"contentId-228493282","type":"file","height":97}}]},{"type":"paragraph","content":[{"text":"To integrate an image, the tag ","type":"text"},{"text":"img","type":"text","marks":[{"type":"strong"}]},{"text":" 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 ","type":"text"},{"text":"width","type":"text","marks":[{"type":"strong"}]},{"text":". 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).","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Selection box (Radiobuttons)","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"width":618,"id":"df9f4c81-7533-4996-a8d0-2ff9a8cba0f9","collection":"contentId-228493282","type":"file","height":140}}]},{"type":"paragraph","content":[{"text":"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” - 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 form, 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 - elements the ","type":"text"},{"text":"process variables","type":"text","marks":[{"type":"link","attrs":{"href":"https://tim-doc.atlassian.net/wiki/spaces/eng/pages/228298382/General#Process-variables"}}]},{"text":" are set on 'id', only for radio buttons the process variable is set on the 'name' attribute. ","type":"text"}]},{"type":"paragraph","content":[{"text":"If the selection of a radiobutton is also possible by clicking on the associated label, the label must be enclosed by an opening - and a closing - tag. This is addressed with the attribute 'for=”“' via the 'id' of the respective -elements. With a
- element (break) a new line is generated.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Selection box (Checkboxes)","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"width":623,"id":"d58cf73b-517d-455c-a832-9211e8595484","collection":"contentId-228493282","type":"file","height":142}}]},{"type":"paragraph","content":[{"text":"Checkboxes are also selection boxes, but can be clicked individually and independently. Otherwise, the same rules apply as those for buttons.","type":"text"},{"type":"hardBreak"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Choice box (Selectbox)","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"width":621,"id":"c7178979-a676-422d-bd6e-12ea2cc794a6","collection":"contentId-228493282","type":"file","height":142}}]},{"type":"paragraph","content":[{"text":"For creating a selectbox, an opening - tag are necessary. To add options for selection to this, any number of ","type":"text"},{"text":"options","type":"text","marks":[{"type":"strong"}]},{"text":" can be added between the Radiobuttonselection 1
\n\t\t\t Radiobuttonselection 2
\n\t\t\t Radiobuttonselection 3\n\t\t \n\t\t\t\n\t\t\t Checkbox 1
\n\t\t\t Checkbox 2
\n\t\t\t Checkbox 3\n\t\t \n\t\t\t\n\t\t\t\n\t \n\t\t\n\t\t\n\t\t\tcolumn1 row3\n\t\t\tcolumn2 row3\n\t\t\tcolumn3 row3\n\t\t\n\t\n","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Input fields","type":"text"}]},{"type":"paragraph","content":[{"text":"There are different types of input fields in which free text can be written. ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"One-line text input field","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"width":620,"id":"1f5b7d2d-63b6-4d35-84ee-fcfb7a201402","collection":"contentId-228493282","type":"file","height":141}}]},{"type":"paragraph","content":[{"text":"For a normal text field, the tag ","type":"text"},{"text":"input","type":"text","marks":[{"type":"code"}]},{"text":" is used in combination with the attribute ","type":"text"},{"text":"type=\"text\"","type":"text","marks":[{"type":"code"}]},{"text":". This forms a simple text field with one row. ","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Multiple-line text input field (Textareas)","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"width":620,"id":"798cbddb-3cb9-487b-b6e9-a4ec37238bae","collection":"contentId-228493282","type":"file","height":188}}]},{"type":"paragraph","content":[{"text":"For creating an input field (e.g. for description), an opening - tag are necessary. This can be resized by the user and multiple rows can be written in.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Formatting in textareas","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":55.0},"content":[{"type":"media","attrs":{"width":487,"id":"280b9d2b-0e2d-46d4-abe0-c727e4290cb7","collection":"contentId-228493282","type":"file","height":402}}]},{"type":"paragraph","content":[{"text":"To offer the formatting elements cursive, bold, underlined, blue font and red font in a textarea, the class ","type":"text"},{"text":"richtext","type":"text","marks":[{"type":"strong"}]},{"text":" has to be given.","type":"text"}]},{"type":"paragraph","content":[{"text":"The variable's name also has to contain rich text and bootstrap has to be loaded (data-bootstrap=“true” in ","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Datepicker (Calendar)","type":"text"}]},{"type":"paragraph","content":[{"text":"To create a so-called Datepicker to an input field, only the class ","type":"text"},{"text":"datepicker","type":"text","marks":[{"type":"strong"}]},{"text":" must be given to it.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":55.0},"content":[{"type":"media","attrs":{"width":491,"id":"e47cecd5-3604-4f77-8589-cfd925ebe25e","collection":"contentId-228493282","type":"file","height":342}}]},{"type":"paragraph","content":[{"text":"The Javascript library ","type":"text"},{"text":"JQuery","type":"text","marks":[{"type":"strong"}]},{"text":", which is automatically integrated into every form, opens now by clicking a field a calendar from which a date can be selected, which is then transferred in the input field.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Add stylesheets (css)","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"width":916,"id":"818d2a9a-776c-4f64-acfa-d07a97cbaffc","collection":"contentId-228493282","type":"file","height":148}}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"To address an element with a specific ID, the ID must be added with a hash mark (#) in front, e.g. ","type":"text"},{"text":"#firstRow","type":"text","marks":[{"type":"code"}]},{"text":". All the elements with this ID, now focus their style according to the following definition.","type":"text"}]},{"type":"paragraph","content":[{"text":"If all elements of a specific type should be addressed, only the tag of the element needs to be added, e.g. label.","type":"text"}]},{"type":"paragraph","content":[{"text":"Subsequently, for all ","type":"text"},{"text":"label","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"elements, the font-color is changed to green.","type":"text"},{"type":"hardBreak"},{"text":"All elements with the ID ","type":"text"},{"text":"firstRow ","type":"text","marks":[{"type":"code"}]},{"text":"get a blue background, and all elements with the ID ","type":"text"},{"text":"background-color","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"get a red background.","type":"text"},{"type":"hardBreak"},{"text":"Finally, now the frame of the table is set to a width of 0 pixel and disappears.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Mandatory fields at instance start","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Index fields","type":"text"}]},{"type":"paragraph","content":[{"text":"Index fields are used for displaying information from a form, such as tasks, instances and so on, directly in a list. They can be filtered and sorted. See also ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://tim-doc.atlassian.net/wiki/spaces/eng/pages/228492556"}},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"So that a index field indicates a value, it must be defined in the form. “Input” and “Select” fields can be selected as index fields. To display a value from the form in the columns, the attribute index=„fieldX“ must be added to the respective field in the form. Where “X” is the value of the index fields, so 1 to 10.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Now the value is displayed in the index field number 2, which was entered in the form in the textfield “name”.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Date in index fields:","type":"text"}]},{"type":"paragraph","content":[{"text":"If a date was saved in a process variable as a string ","type":"text"},{"text":"10.02.2015","type":"text","marks":[{"type":"code"}]},{"text":", it can only be sorted alphabetically (0-9 for each digit). But if the date is saved in the format ","type":"text"},{"text":"2015-02-10T0:0:0","type":"text","marks":[{"type":"code"}]},{"text":", a correct sorting for the date can be achieved. The system's datepicker automatically saves the dates in this format (simply add ","type":"text"},{"text":"class=\"datepicker\"","type":"text","marks":[{"type":"code"}]},{"text":" in the input element). The clients display the clean date format ","type":"text"},{"text":"10.02.2015","type":"text","marks":[{"type":"code"}]},{"text":" (depends on language/culture settings in the browser) instead of ","type":"text"},{"text":"2015-02-10T0:0:0","type":"text","marks":[{"type":"code"}]},{"text":". See: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://tim-doc.atlassian.net/wiki/spaces/eng/pages/228036827"}},{"text":" ","type":"text"}]}]},{"type":"paragraph"}],"version":1}

column1 row1	column2 row1	column3 row1
column1 row2	column2 row2	column3 row2
column1 row3	column2 row3	column3 row3

\n\t\t\t\t $\"logo\"$ \n\t\t\t		column3 row1
column1 row2	column2 row2	column3 row2
column1 row3	column2 row3	column3 row3

\n\t\t\t\t $\"logo\"$ \n\t\t\t		column3 row1
\n\t\t\t Radiobuttonselection 1 \n\t\t\t Radiobuttonselection 2 \n\t\t\t Radiobuttonselection 3\n\t\t	column2 row2	column3 row2
column1 row3	column2 row3	column3 row3

\n\t\t\t\t $\"logo\"$ \n\t\t\t		column3 row1
\n\t\t\t Radiobuttonselection 1 \n\t\t\t Radiobuttonselection 2 \n\t\t\t Radiobuttonselection 3\n\t\t	\n\t\t\t Checkbox 1 \n\t\t\t Checkbox 2 \n\t\t\t Checkbox 3\n\t\t	\n\t\t\t\n\t
\n\t\t\t\t\n\t\t\t	\n\t\t\t\t\n\t\t\t	column3 row3

\n\t\t\t\t $\"logo\"$ \n\t\t\t	column3 row1
\n\t\t\t Radiobuttonselection 1 \n\t\t\t Radiobuttonselection 2 \n\t\t\t Radiobuttonselection 3\n\t\t	\n\t\t\t Checkbox 1 \n\t\t\t Checkbox 2 \n\t\t\t Checkbox 3\n\t\t	\n\t\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t	\n\t\t\t\t\n\t\t\t	column3 row3

Browser not supported