Plugin installed incorrectly. Rename plugin directory 'swiftmail.backup' to 'swiftmail'.
en:software:tim:smartform_basics
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
en:software:tim:smartform_basics [2014/06/30 09:45] melanie.yesilcay |
en:software:tim:smartform_basics [2021/07/01 09:52] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | FIXME **This page is not fully translated, yet. Please help completing the translation.**\\ //(remove this paragraph once the translation is finished)// | + | ===== Basics for creating a smartform ===== |
| - | ===== Create smartform ===== | + | === HTML === |
| + | HTML stands for **Hyper Text Markup Language** and is the standard markup language for creating websites. In combination with other languages like **Cascading Style Sheets (CSS)** and **JavaScript** HTML is the basis of web-development. Therefor HTML is used to determine the structure of websites. HTML is therefor not a programming but a markup language and is thus easy to learn. \\ | ||
| + | In the following some useful HTML elements for smartform building are presented. A detailed documentation as well as various tutorials can be found under [[http://www.w3schools.com / | W3Schools]]. | ||
| - | === HTML & CSS general=== | + | === CSS === |
| + | CSS or Cascading Style Sheets are used to affect the **design or presentation** of websites created with HTML. CSS is designed to seperate structure and presentation of a website. Normally the styles are defined in seperate .css files. \\ | ||
| + | The User experience besides the functionality heavily influenced by a appealing design. The visual editing with CSS is an important part of the smartform design. \\ | ||
| + | A detailed documentation as well as various tutorials can be found under [[http://www.w3schools.com / | W3Schools]]. | ||
| - | HTML is a text-based markup language for structuring contenct such as text, images and hyperlinks in documents. With this [[smartform| smartforms]] can be created. With CSS the focus and the layout of individual or multiple HTML elements can be changed at the same time. \\ | + | === JavaScript === |
| - | For each HTML element which can be filled with content (e.g. input field) or a selection can be made (e.g. radiobuttons), a [[process_variables| process variable]] is applied which is then stored in the database. | + | Javascript is a client-side programming language, which is executed in the browser. While HTML and CSS represent the website's static content, **user interaction** can be reacted to with Javascript. Furthermore functionalities like calculation or auto completes can be implemented. \\ |
| + | A detailed documentation as well as various tutorials can be found under [[http://www.w3schools.com / | W3Schools]]. | ||
| + | ---- | ||
| + | |||
| + | ===== Planning ===== | ||
| + | Before implementing a smartform, its structure, design and functionalities should be planned carefully. Smarforms provide a process with necessary information. A good starting point for planning is which information is needed | ||
| + | at which point in the process sequence. These are functional requirements. \\ | ||
| + | When the functional requirements are clear, they hav to be implemented in a user friendly design. It should be noted which users have to work with the smartform. An appealing user interface really makes working with the smartfrom easier. However the functionalities should always come before the aestethics. \\ | ||
| + | When planning a smartform using a paper prototype or mockups can be useful. Drafts can be discussed with endusers and can also be modified. For creating a mockup or a prototype there are many different helpful tools like [[https://balsamiq.com/ | Balsamiq Mockup]] or [[https://www.sketchapp.com/ | Sketch]]. | ||
| + | ---- | ||
| + | |||
| + | ===== Using Frameworks===== | ||
| + | {{ :software:tim:bs.png?}} | ||
| + | To make web development more comfortable, various HTML, CSS and JavaScript frameworks have been developed. We regularly use [[http://www.getbootstrap.org | Bootstrap]] when developing smartforms. **Bootstrap** offers predefined CSS classes, that enable the development of an appealing and responsive smartform design. How Bootstrap is integrated into the form is shown in our detailed [[smartform-example | smartform-example]]. Besides **Bootstrap** libraries like [[ http://www.polymer-project.org | Polymer ]] gain in popularity. | ||
| + | |||
| + | Besides Bootstrap and Polymer the Javascript library [[https://jquery.com/ | jQuery]] is an important component of smartform development. The extensive API offers various functions, like to catch user input. \\ | ||
| + | |||
| + | For very complex smartform with complicated calculations or requests the framework AngularJS, developed by Google, is very useful. | ||
| + | |||
| + | Of course it is possible to integrate own frameworks either via the HTML code of the smartform of via the custom.js file (explained in the [[smartform-example | smartform-example]]). | ||
| + | {{:software:tim:angularJs.png?150}} | ||
| + | ---- | ||
| + | |||
| + | ===== An Appropriate Editor===== | ||
| + | {{ :software:tim:brackets.jpg?150}} | ||
| + | A Smartform can be create in a simple text editor. However editors, that specify in programming, have a lot of advantages, like line indentation, code highlighting or autocompletes. | ||
| + | \\ Popular editors are e.g. [[https://notepad-plus-plus.org/ | Notepad++]], [[http://brackets.io/ | Brackets]] and [[http://www.sublimetext.com/3 | Sublime Text]]. | ||
| ---- | ---- | ||
| Line 35: | Line 66: | ||
| ---- | ---- | ||
| - | === Make form visible for all T!M users === | + | === Make form visible for all TIM users === |
| - | With the attribute security="all" any T!M-User is authorized to view this form. | + | With the attribute security="all" any TIM-User is authorized to view this form. |
| Line 53: | Line 84: | ||
| .....server\default\deploy\loom.ear\loom-portal.war\custom\ | .....server\default\deploy\loom.ear\loom-portal.war\custom\ | ||
| - | In the folder, which belongs to the required client, is a file with the name **custom.js**. This is a Javascript file, which is automatically integrated into the HTML form and thus is usable for the smartform. If functions are necessary for the form Javascript, those can be phrased in the file. | + | In the folder, which belongs to the required client, is a file with the name [[#javascript_einbinden|custom.js]]. This is a Javascript file, which is automatically integrated into the HTML form and thus is usable for the smartform. If functions are necessary for the form Javascript, those can be phrased in the file. |
| The attribute initMethod="" specifies which JavaScript function runs by loading the smartform. | The attribute initMethod="" specifies which JavaScript function runs by loading the smartform. | ||
| Line 59: | Line 90: | ||
| <code html> | <code html> | ||
| - | <form class="classname" name="formname" security="all" initMethod="FUNCTION WHICH RUNS BY LOADING THE SF"> | + | <form class="classname" name="formname" security="all" initMethod="FUNCTION WHICH RUNS BY LOADING THE SMARTFORM"> |
| </form> | </form> | ||
| </code> | </code> | ||
| Line 94: | Line 125: | ||
| - | {{ :software:tim:table.png }} | + | {{ :en:software:tim:table.jpg |}} |
| - | 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 columsn, 100 pixel of width each, shall be created. \\ | + | 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, 100 pixel of width each, 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. | 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 you are and the desired content can be entered here. | Within the **td** tag it is exactly defined in which row and column you are and the desired content can be entered here. | ||
| Line 132: | Line 163: | ||
| - | {{ :software:tim:table_bild.png }} | + | {{ :en:software:tim:table_logo.jpg |}} |
| 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. | 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. | ||
| Line 171: | Line 203: | ||
| - | {{ :software:tim:table_radiobuttons.png }} | + | {{ :en:software:tim:table_radiobuttons.png |}} |
| Radiobuttons 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 radiobuttons 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 radiobutton for each radiobutton group. For all <input> - elements the [[process_variables| process variables]] are set on 'id', only for radiobuttons the process variable is set on the 'name' attribute. The attribute colspan="2" connects a table cell with the following table cell (to the right). | Radiobuttons 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 radiobuttons 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 radiobutton for each radiobutton group. For all <input> - elements the [[process_variables| process variables]] are set on 'id', only for radiobuttons the process variable is set on the 'name' attribute. The attribute colspan="2" connects a table cell with the following table cell (to the right). | ||
| Line 187: | Line 220: | ||
| <tr> | <tr> | ||
| <td colspan=2> | <td colspan=2> | ||
| - | <input type="radio" name="radiobuttongroup" id="radio_1" checked="checked" /> <label for="radio_1">Radiobuttonselection 1</label><br/> | + | <input type="radio" name="radiobuttongroup" value="1" id="radio_1" checked="checked" /> <label for="radio_1">Radiobuttonselection 1</label><br/> |
| - | <input type="radio" name="radiobuttongroup" id="radio_2"/> <label for="radio_2">Radiobuttonselection 2</label><br/> | + | <input type="radio" name="radiobuttongroup" value="2" id="radio_2"/> <label for="radio_2">Radiobuttonselection 2</label><br/> |
| - | <input type="radio" name="radiobuttongroup" id="radio_3"/> <label for="radio_3">Radiobuttonselection 3</label> | + | <input type="radio" name="radiobuttongroup" value="3" id="radio_3"/> <label for="radio_3">Radiobuttonselection 3</label> |
| </td> | </td> | ||
| <td>column3</td> | <td>column3</td> | ||
| Line 212: | Line 245: | ||
| - | {{ :software:tim:table_checkbox.png }} | + | {{ :en:software:tim:table_checkbox.png |}} |
| Checkboxes are also selection boxes, but can be clicked individually and independently. Otherwise, the same rules apply as those for <radio> buttons. | Checkboxes are also selection boxes, but can be clicked individually and independently. Otherwise, the same rules apply as those for <radio> buttons. | ||
| Line 250: | Line 283: | ||
| - | {{ :software:tim:table_select.png }} | + | {{ :en:software:tim:table_select.png |}} |
| - | 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 T!M. | + | 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 TIM. |
| Line 290: | Line 323: | ||
| - | {{ :software:tim:table_eingabe.png }} | + | {{ :en:software:tim:table_eingabe.png |}} |
| There are different types of input fields in which free text can be written. | There are different types of input fields in which free text can be written. | ||
| For a normal text array, the tag **input** is used in combination with the attribute **type="text"**. This forms a simple text field with one row. (see element 1)\\ | For a normal text array, the tag **input** is used in combination with the attribute **type="text"**. This forms a simple text field with one row. (see element 1)\\ | ||
| Line 322: | Line 355: | ||
| </table> | </table> | ||
| </code> | </code> | ||
| + | |||
| + | ---- | ||
| + | === 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. | ||
| + | |||
| + | <note important>Attention! The variable's name also has to contain richtext and bootstrap has to be loaded (data-bootstrap="true" in <form>).</note> | ||
| + | |||
| + | <code html> | ||
| + | <textarea class="richtext" id="richtext_variable_name"></textarea> | ||
| + | </code> | ||
| + | |||
| + | |||
| + | {{ :software:tim:actionhandler:chrome.png?300 |:software:tim:datepicker.png}} | ||
| ---- | ---- | ||
| Line 336: | Line 383: | ||
| - | {{ :software:tim:datepicker.png }} | + | {{ :en:software:tim:datepicker.png |}} |
| ---- | ---- | ||
| Line 343: | Line 390: | ||
| === Add stylesheets (CSS) === | === Add stylesheets (CSS) === | ||
| - | {{ :software:tim:table_css.png }} | + | {{ :en:software:tim:table_css.png |}} |
| The stylesheets are defined between an opening <style> and a closing </style> - tag. The attribute 'type="text/css"' must be assigned to the opening <style> - tag. \\ | The stylesheets are defined between an opening <style> and a closing </style> - tag. The attribute 'type="text/css"' must be assigned to the opening <style> - tag. \\ | ||
| In order to address elements that have a class, the class name must be added with a point in front. Within the following braces 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. \\ | In order to address elements that have a class, the class name must be added with a point in front. Within the following braces 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. \\ | ||
| Line 404: | Line 451: | ||
| <input type="text" id"mandatoryField" name="mandatoryField" required="true" /> | <input type="text" id"mandatoryField" name="mandatoryField" required="true" /> | ||
| </code> | </code> | ||
| + | |||
| + | If a Selectbox 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. | ||
| + | |||
| + | <code> | ||
| + | <select> | ||
| + | <option dafault="default">Please select</option> | ||
| + | <option>Value1</option> | ||
| + | ... | ||
| + | </select> | ||
| + | </code> | ||
| + | |||
| + | |||
| + | |||
| + | |||
en/software/tim/smartform_basics.1404114345.txt.gz · Last modified: 2021/07/01 09:55 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: 2013 T!M Solutions GmbH
