Input

This section covers input controls that allows the user to enter data in order to provide parameter values for further interaction with an application.

Overview

Input controls are independent entry fields that are usually used to support other features on the layout. Input controls can be customized by selecting the control in the main designer canvas and clicking on the gear icon to access its properties.

For instance, an input control can be used as a filter for a list element.

Accessing Input Control Properties

Supported input controls:

• Annotation List

• Filter Input

Annotation List

Annotation lists are used in Object Pages consisting of document instances. The Annotation List control attempts to load all bookmarks and an outline of the current document loading in the layout.

Filter Input

Filter inputs are mainly used in the context of lists to provide a means for filtering the list.

Sample Filter Input

Appearance

Appearance properties allows you to further customize the design of your control.

Margin CSS

Defines the margin around your control, offsetting it from the edges of its parent element.

The margin value is set using CSS notation.

Padding CSS

Defines a padding inside your control, offsetting your control content from its edges.

The padding value is set using CSS notation.

Placeholder

Defines a text that is displayed in a muted style by default when the control is not being used.

Supports multiple languages

If Placed In Page Header

The properties provided in this section allows you to customize the design of your input control when it is used in a page header.

Align Right

Enabling this option ensures your input control and its content are aligned to the right.

By default, the control and its content are aligned to the left.

Display As Action

Enabling this option causes your filter input control to be rendered as an action link.

Help

Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.

Help Html

Allows you to write Html code that is rendered as help text for your element.

Supports multiple languages.

Position

Allows you to define where the help text should be displayed relative to your application window.

Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right

Step Order Index (Number)

Allows you to define the order within the intro tour.

The tab-index refers to the order in which elements are focused on using the Tab key on your keyboard. This is an essential feature to enhance the accessibility and usability of your application by any user.

Tag filter

Tag filter is used in the list context to provide to the end user a means for filtering the tags.

Adding Tag Filter in the List Context

Tag Filter has one configuration option which sets it's visual appearance in the final layout visible to the end users.

Tag Filter configuration

If Display as an action is kept with the default value false, the end user will see a button and the list of already chosen Tags for results filtering.

In the case Display as an action is set to true, the Filter Tag button

• is shown in gray color if no Tag Filter has been applied by the end user or
• is shown with the glowing effect if tags have been chosen by the end user for list filtering.

In this last variant of the tag filter, the selected tags are not displayed. This can be useful in situations where there is not enough space to show all selected tags, or for aesthetic reasons. This variant of the tag filter allows you to filter the list or board without cluttering the interface with the selected tags.