| Table of Contents |
|---|
...
Form basics
Smartforms Forms are HTML forms and contain all required data for processing the process. These forms are attached to a process definition. In a started instance, a smartform form can be viewed at any time and data can be entered and changed.
...
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. Therefore, HTML is used to determine the structure of websites. HTML is not a programming but a markup language and is thus easy to learn.
In the following, some useful HTML elements for smartform form building are presented. Detailed documentation as well as various tutorials can be found under w3schools.
Please find here a detailed description of how to implement a Smartform form with HTML: Create a smartform
...
CSS
CSS or Cascading Style Sheets are used to affect the design or presentation of websites created with HTML. CSS is designed to separate structure and presentation of a website. Normally, the styles are defined in separate .css files.
The user experience besides the functionality heavily influenced by an appealing design. The visual editing with CSS is an important part of the smartform form design.
A detailed documentation as well as various tutorials can be found under w3schools.
Please find here a detailed description about how to add style attributes to a Smartform form with CSS: Create a smartform
...
Section Handling
Which user may see specific parts (so-called sections) within the smartform form is determined by the Section Handling. These restrictions can either apply in a whole process or at a certain level in the course of the process. The following permissions can be granted or revoked:
...
Please find here a detailed description about how to implement a Section Handling.
...
JavaScript
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 with JavaScript. Furthermore functionalities like calculation or auto completes can be implemented.
...
Please find here a detailed description about how to integrate JavaScript in a Smartformform: Integrate JavaScript.
...
Planning
Before implementing a smartformform, its structure, design, and functionalities should be planned carefully. Smartforms forms 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 have to be implemented in a user-friendly design. It should be noted which users have to work with the smartformform. An appealing user interface really makes working with the smartform form easier. However, the functionalities should always come before the aesthetics.
When planning a smartfrom using a paper prototype or mockups can be useful. Drafts can be discussed with end users and can also be modified. For creating a mockup or a prototype there are many helpful tools like balsamiq or Sketch.
...
Using Frameworks
To make web development more comfortable, various HTML, CSS, and JavaScript frameworks have been developed. We regularly use Bootstrap or Kube. Both frameworks offer predefined CSS classes, that enable the development of an appealing and responsive smartform form design. Besides Bootstrap and Kube libraries like Polymer gain in popularity.
Additionally, the JavaScript library jQuery is an important component of smartform form development. The extensive API offers various functions, like to catch user input.
For very complex smartform form with complicated calculations or requests the framework AngularJS, developed by Google, is very useful.
Of course, it is possible to integrate the own frameworks within the HTML code of the smartform form as well as within the custom.js file.
...
Editor
A smartform form can be created in a simple text editor. However, editors for programmers have a lot of advantages, like line indentation, code highlighting or autocompletes.
...