Forms and Form elements / Input fields

Forms and Form elements / Input fields

Wizard

Vergrößern

A wizard is a step-by-step form. Generally wizards are used to separate big forms by smaller logical steps. There are several types of the behavior for the wizards:

• each next step of the wizard depends on the previous: the user cannot move to the next step until they filled the previous field;
• wizard steps are mutually independent: user can move from the previous one to the next one even if the form on the previous step was not filled;
• combined: combined logic; it is configured whether the user can move from the previous step to the next one without filling the form on the previous step (within the same wizard).

The example of the wizard in the Webdesk application is "Business trip expenses" form.

Wizards are have the timeline with the step listed (usually on the top of the form area) and a pager: "Back" / "Next" buttons in the bottom of the form area - allow user to move to the previous / next step correspondingly.

Date picker

The UI element that allows the user to select the date. Input field with the button.

In the Webdesk application it is possible to enter the date with no formatting to the input field directly. The entered date is automatically formatted.

In the responsive skin for the mobile devices triggers the native date picker component.

Time picker

The UI element that allows the user to select the time. Input field with the button.

In the Webdesk application it is possible to enter the time with no formatting to the input field directly. The entered time is automatically formatted.

In the responsive skin for the mobile devices triggers the native time picker component.

Selectors

There are different types of the used selectors.

• standard dropdowns
• dropdown with the filtering possibility:
  standard dropdown element with the additional text input for quick searching across the items in the dropdowns
• double list of multiple selectors:
  One can select items from the left list (which is a list of all available options) and move them to the list on the right (which is a custom-selected list). Double multi-select provides good visibility for the user of what is selected by him from the all options available.

HTML Text editor

Text editors are used in Webdesk when writing new message for the user (these can be help messages, system messages, email texts, etc). It is a standard text editor with a standard toolbar for styling text in different ways.