Docs
  • Getting Started
  • Overview
    • Understanding
      • User-Interface
      • Shortcuts
    • Getting Started
      • Creating A New Application
      • Adding Basic Structure using Class Designer
      • Creating a link to the TIVITY File Class
      • Setting Rights
      • Creating Queries
      • Building The Layout
        • Creating an App Page
        • Creating an Object Page
        • Creating a List Item Layout
  • Building an Application
    • Application Setup
      • General
      • Documentation
      • License Management
      • Publishing the Application
      • Advanced Settings
        • Document-MailEditor
    • Data
      • Sources
      • Data Modelling
        • Class
        • Field
        • Action
        • Link
      • Query Data
        • Get Started with Query Designer
        • Common
        • Fields
        • Conditions
        • Default Values
        • Preview
      • Roles & Permissions
        • Rights Designer
      • Access Control Lists (ACL)
    • Views
      • Design UI
        • Page Types
        • Fields and Links
        • Layout Controls
          • Actions
          • Panels
          • Sections
          • Lists
          • Input
        • Layout Templates
      • Document Templates
        • Get started with Template Designer
        • Expressions in Templates
    • Execution
      • Functions
      • Workflows
        • Control Types
      • Trigger
      • Scripting
        • Accessing the Script Designer
        • Using the Script Designer
        • Commonly used Actions
        • Reference: Actions
          • Math
          • System
          • Date
          • Collection
          • LogicalOperators
          • Web
          • Structure
          • Constants
          • Converters
          • Commands
          • Text
          • PDF
          • Operators
          • PowerPoint
          • QR-/Barcode
          • Messaging
          • Cells
          • Xml
          • Admin
          • Integrations
    • Expressions
      • Expressions in Expressions
      • Expressions in Condition Values
  • Administration
    • Platform
    • Workspace
    • Security
    • Platform Setup
  • Extensibility and Integration
    • REST API
    • Source Adapter
      • Getting Started
      • Source Adapter Interface
      • RESTful Adapter Service
  • Adapter Portfolio
    • MongoDB Adapter
  • Platform Features
    • Enterprise Search
      • Integration into an App
      • General Settings
    • Templates
    • Tagging
      • Getting Started
      • Manage Tags
      • Settings
      • Usage
        • Tag filter
        • Tag panel
    • DMS Setup
Powered by GitBook
On this page
  • Overview
  • Fields
  • General
  • Label
  • Html Editor Settings
  • Html Inline Images
  • Text Box Settings
  • Text Area Settings
  • Help
  • Date or Time Settings
  • Links

Was this helpful?

  1. Building an Application
  2. Views
  3. Design UI

Fields and Links

Layouts are closely related to class definitions. This section explores how application classes and its properties can be integrated into a layout for further interaction from the end user.

PreviousPage TypesNextLayout Controls

Last updated 2 years ago

Was this helpful?

Overview

Based on the selected page type, the layout designer provides special controls to display object fields and links on the layout.

Fields and links are supported on pages that are bound to a class only, such as .

In order to access the list of fields and links, select your page from the layouts manager and expand the Fields or Links list in the layout elements panel on the left.

Fields and/or Links can be added to your layout by dragging the selected item and dropping it in the main designer canvas.

Each field control can be customized by selecting the control in the main designer canvas and clicking on the gear icon to access its properties.

Fields

Based on the class definition bound to the page, field controls are available for every field in the linked class. The controls can be added to your layout to display the field value for the currently selected object.

Field controls are categorized to help you find your required fields easier.

  • All: Displays all the fields in the class

  • Id: Displays standard fields that help identify the class

  • Main: Displays content fields that you added to the class

General

General properties define the basic format of your field control in your layout.

Force Read-Only

Enabling this options prevents the field value to be modified by any user.

Even users with administrator rights cannot modify a read-only field.

Item Appearance

Defines which control should be used to display the field.

Full Size

Enables setting the full size of the field.

Label

Label properties allows you to customize the appearance of your field label.

Show Label

Determines whether the field label should be visible or not.

Use Custom Label

Enabling this option allows you to overwrite the field label derived from the field's name in its class definition. This option requires further configuration when activated.

  • Custom Label Text Determines the text that should be displayed as the field label.

Icon

Allows you to select an icon from a pre-defined list to appear alongside your field label.

  • Icon Display Options Allows you to manipulate the icon displayed. Options: Rotate 45°, Rotate 90°, Rotate 135°, Rotate 180°, Rotate 225°, Rotate 270°, Rotate 315°, Flip Horizontal, Flip Vertical, Spin, Pulse-Spin

Label Position

Determines where the label should be place relative to the field value. Options: Top, Left.

Html Editor Settings

Available only if the field is using a HtmlEditor as display control.

Html Editor Settings allows you to set the appearance and complexity of the Html toolbar for the user.

Same set of options Display Inline and Single Line Toolbar is available for usage of the Html Editor on the desktop and mobile devices (represented here with Desktop and Mobile tabs).

Display Inline enables showing of the Html Editor toolbar supplementary, just in time when user selects the area for data input.

If Display Inline is not selected, then Html Editor toolbar is shown fixed above the input area.

Within Predefined Presence two options can be chosen:

  • Medium

  • Minimal

Each of the options sets number of buttons to invisible, where Minimal disables less buttons visible in the toolbar than the Medium option.

In addition, in the section Disabled Buttons user is able to mark the buttons which shall be disabled/not shown in the HtmlEditor toolbar also manually

Html Inline Images

Available only if the field is using a HtmlEditor as display control.

Html Inline Images allows you to define a linked class that is used to retrieve and display inline images. When a inline image specification is found, then the image document of the linked class with the given Image-ID is displayed. When no document is found, then the standard missing image notification is displayed.

Independent of the Desktop or Mobile choice you can configure:

  • Inline Images Link: The link to a document supporting class (direct).

  • Inline Image Match Field: The ID field of the linked class to identify an instance with (with the Image-ID).

Text Box Settings

Available only if the field is using a TextBox as display control. Text Box Settings allows you to customize your textbox design for the field.

Formatter

Determines how your field values should be formatted when displayed.

  • None No formatting is applied.

  • Integer - File Size Field value is displayed as a user-friendly file size string (e.g. 24.5MB)

  • Numeric - Percent Field value is displayed as a percentage.

Text Area Settings

Available only if the field is using TextArea as display control. Text Area Settings allow you to customize how your text area control should appear on the layout.

Text Area Height

Determines the number of rows (between 1 to 6) that should be provided for the Text Area control.

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 contain help information.

Help Html

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

Supports multiple languages.

Position

Allows you to define where the help text tooltip should be displayed relative to your control.

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.

Date or Time Settings

Available only if the field is using Calendar, TimePicker or DatePicker. No icons are shown when 'Show Calendar Icon' is unchecked.The picker drop down is displayed on input focus if 'Show Calendar Icon' is unchecked.

Links

Based on the class definition bound to the page, controls are provided for every class link defined in the class designer.

The controls available are based on the field type. More information about field types and controls can be found in .

Read more about class links in .

Similar to , the appearance of link controls can be customized in their configuration settings.

Data Modelling
field controls
Adding a Field Element to your Layout
Field Elements in Layout Designer
General Properties
Label Properties
Html Editor Settings
Display Inline
Html Editor Fixed Toolbar
Sample Use of Section Html Inline Images
Link Elements in Layout Designer
Object Page
Data Modelling