# Fields and Links ## Overview Based on the selected page type, the layout designer provides special controls to display object fields and links on the layout. {% hint style="info" %} Fields and links are supported on pages that are bound to a class only, such as [Object Page](/building-an-application/views/design-ui/page-types.md#object-page). {% endhint %} 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. ![](/files/-MJ3cYEh5cy6Ji82ER8x) Fields and/or Links can be added to your layout by dragging the selected item and dropping it in the main designer canvas. ![Adding a Field Element to your Layout](/files/-MHl_AiLYNSHnb2WrseD) 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 Elements in Layout Designer](/files/-MHlPIqWZ0FBB68rL547) {% hint style="info" %} 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 {% endhint %} ### General General properties define the basic format of your field control in your layout.

General Properties

#### Force Read-Only Enabling this options prevents the field value to be modified by any user. {% hint style="danger" %} Even users with administrator rights cannot modify a **read-only** field. {% endhint %} #### Item Appearance Defines which control should be used to display the field. {% hint style="info" %} The controls available are based on the field type. More information about field types and controls can be found in [Data Modelling](/building-an-application/data/data-modelling/field.md#control-type). {% endhint %} #### Full Size Enables setting the full size of the field. ### Label Label properties allows you to customize the appearance of your field label.

Label Properties

#### 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.\ \&#xNAN;*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.\ \&#xNAN;*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.

Html Editor Settings

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.

Display Inline

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

Html Editor Fixed Toolbar

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.*

Sample Use of Section Html Inline Images

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. {% hint style="info" %} Supports multiple languages. {% endhint %} #### 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. {% hint style="info" %} 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. {% endhint %} ### 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. ![Link Elements in Layout Designer](/files/-MHlPpwfPWzy2ZGfdib1) {% hint style="info" %} Read more about class links in [Data Modelling](/building-an-application/data/data-modelling/link.md). {% endhint %} Similar to [field controls](/building-an-application/views/design-ui/fields-and-links.md#fields), the appearance of link controls can be customized in their configuration settings. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.tivity.one/building-an-application/views/design-ui/fields-and-links.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.