Skip to main content

Controls

Introduction to controls​

In the Universal user interface, different controls are used to display and edit different types of data.

The Universal user interface currently only supports editing data through the Form component, but in the future it will be possible to edit data using the grid and other components too.

When editing a row, mandatory fields are marked with an asterisk after the title and require a value before the row can be saved. Fields without an asterisk are optional and can be left blank.

Mandatory Name field

Optional Website field

Generic controls​

Text​

Text fields are used to input free text, and can allow single or multiple lines of text.

For longer texts, users can also use the Multiline domain control.

Single line text field

Multiline text field

Multiline​

The Multiline control is intended for texts that exceed one line. Use Text controls instead for single-line texts.

Users can edit Multiline controls in grid edit mode. They can edit these controls directly within the grid or open them in a pop-up for editing. The pop-up button is also available for a Multiline control in the form.

During grid editing, this button also appears on the active record in the grid. It respects the setting Show action button found in the Software Factory menu: Data > Domains > tab Form > tab Domain.

Code editor​

The domain control Code editor is used for editing JSON and XML data. It highlights the syntax for keys, values, strings, and more. Users can click the pencil icon next to the editor to open the JSON or XML code in an external editor.

Code editor control

Text in HTML format​

With an HTML control, users can enter formatted text.

In the form editor, users can edit the text in the currently applied format. Or, if there is no text in the field yet, they can start typing without formatting.

In an editable grid, users can only edit the contents of an HTML control via the pop-up.

HTML control

If the pop-up icon is present, users can click it to open a larger display. In edit mode, that display contains a formatting toolbar.

HTML control pop-up toolbar

In both the pop-up and form editor, users can use regular keyboard shortcuts, such as:

  • ctrl + b for bold text
  • ctrl + i for italic text
  • ctrl + u for underlined text
  • ctrl + c to copy
  • ctrl + v to paste
tip

Images can be pasted directly into the editor.

SQL editor​

The domain control SQL editor highlights the syntax for SQL statements, keywords, comments, and strings. Users can click the pencil icon next to the editor to open the SQL code in an external editor.

SQL editor control

Number​

Number fields only allow the input of numeric values and will automatically apply the correct number of decimals. Use the minus key to toggle between positive and negative numbers.

Number control

Progress bar​

The progress control shows the percentage progress of, for example, a task.

Progress control

Color picker​

The Color control is available in the grid, form, and card list.

  • When in edit mode in the grid or form, the user can select a value for the Color control using a color picker.
  • When not in edit mode or in the card list, the user sees the color that was selected and its textual representation (in hex).

Calculator​

The Calculator domain control enables users to carry out calculations using on-screen buttons or their keyboard. The decimal separator, either a comma or a period, is automatically determined according to the user's regional setting.

Calculator control

Personal information controls​

Password​

In a password control field, the password is by default hidden from view. Users can use the 'visibility' icon to display the password in plain text or to hide the password from view. Password controls are available in grid, form, and card list components.

When a password field is non-editable or read-only, the 'visibility' icon is hidden, and the number of characters is set to 8 instead of revealing the password length.

Password control field with visibility icon

warning

The passwords are not sent or stored encrypted, so this only protects against being displayed in plain text.

Signature​

The signature control provides the possibility to enter a signature using a mouse, stylus or finger.

Signature control

Selection controls​

Checkbox​

A checkbox is used to toggle the value of a field, for example, between Yes and No, or Enabled and Disabled.

Checkbox control

Radio button​

A radio button control is used to select from two or more options. If the field is not mandatory, a choice can be undone by clicking on it again.

Radio button control

You can configure a radio button icon instead of radio button text. See domain elements for combo and radio button.

Combobox (dropdown list)​

A combobox is used to select an option from a predefined set.

Combobox control with images

Combobox control with lookup button

If a lookup button is displayed in the combobox, it is possible to open a pop-up window for more information about the options or, if allowed, to add or edit the available options.

Lookup pop-up to select or modify the available Countries

Combobox with a suggestion​

The suggestion control is similar to a combobox, but provides the ability to filter the available options. It only shows the first couple of options that match the input filter. The suggestion control is often used when there are a large number of options to choose from. On mobile, a keyboard will open automatically when the lookup is accessed.

Suggestion control

Date​

The date control provides a drop-down calendar to easily select a date:

Date control

Time​

A Time field provides a drop down menu to easily select a time value.

Time control

Visual information controls​

Image​

Image controls are used to display images. To upload an image from the local file system, click on the image icon.

Image control

Video​

The video control is used to upload and display videos and can also play uploaded videos.

Video control

Communication and information controls​

Make a phone call​

Clicking on the phone icon in a phone number control opens the default telephony application, like Skype on Windows or the integrated iOS and Android app.

Phone number control

Send an email​

Clicking the email address in read-only mode or the email icon while editing mode creates a new email to the provided email address, using the default Email client.

Email control

Two controls are available to allow users to navigate to a website:

  • URL control - A user can click a URL in read-only mode or the open icon in edit mode to open the URL in a new browser window or tab.
  • or add a URL in the text in an HTML control - A user can open this link in two ways:
    • Right-click on the link and select their browser's option to open the link in a new tab.
    • Press CRTL while clicking on the link.

A URL control

Upload a file​

The file control is used to upload a file, like an Office or PDF document, from the local file system to the server.

File control

Location controls​

Show an address in Google Maps​

The maps icon in the Address control opens Google Maps in a new browser window or tab, showing the provided address.

Address control

Add a location pin​

Location controls add a location pin to the input field. For more information, see LOCATION control.

In an empty mandatory field, the location is filled automatically

Bar code scanner​

If users have a hand-held scanner and scanning is the last step in a task, the task is submitted directly, if:

  • The scanner is configured to send Tab after the barcode.
  • The scanner is connected to, e.g., a cell phone or a desktop.
  • The focus is on the barcode input field in a task.
  • The barcode field is the last visible field in a task.
Was this article helpful?