> For the complete documentation index, see [llms.txt](https://docs.amltd.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.amltd.com/dc-works/applets/field-types.md).

# Field Types

Learn about the visual, input, container, and action fields available in the DC Works Applet Editor.

Fields are the components placed on an Applet page. They can display information, collect user input, organize data, or initiate an operation.

The **Toolbox** organizes fields into four categories:

* **Visual**
* **Input**
* **Container**
* **Action**

<figure><img src="/files/hQBvHF2UqgN0wshGYWKo" alt=""><figcaption></figcaption></figure>

Drag a field from the Toolbox to the Main Workspace to add it to the selected page. After adding the field, select it to configure its settings in the Properties Panel.

### Visual fields

Visual fields display text, media, separators, and status information.

#### Header

Use a **Header** to display a prominent title or section heading.

Enter the displayed wording in **Field Text**, and use the font, color, border, and alignment properties to control its appearance.

Common uses include:

* Page titles.
* Section headings.
* Applet names.
* Instructions requiring additional emphasis.

#### Horizontal Divider

Use a **Horizontal Divider** to create a horizontal line between sections of a page.

Configure its size, color, border, and position to match the page layout.

#### Vertical Divider

Use a **Vertical Divider** to create a vertical line between areas of a page.

Vertical dividers are useful when visually separating content arranged side by side.

#### Text

Use a **Text** field to display static wording on a page.

Text fields can be used for:

* Instructions.
* Labels.
* Descriptions.
* Notes.
* Informational messages.

Enter the displayed wording in **Field Text**, and use the available font, color, border, and alignment properties to format it.

#### Image

Use an **Image** field to display an image on a page.

The image can be configured through the field’s **Image** properties. An Image field can also be associated with a record when its displayed content depends on Applet data.

#### Video

Use a **Video** field to display playable video content.

The field presents the video with playback controls. Use its field-specific properties to configure the video source and display behavior.

#### Connectivity Display

Use a **Connectivity Display** to provide a visual indication of the device’s network connectivity.

This can help users determine whether the device currently has access to a network before performing an operation that requires a connection. the connectivity display icon is meant to applets running on mobile devices, it turns green automatically when network connectivity is present, and red when not.

#### Time Display

Use a **Time Display** to show the current date or time.

Configure its display properties to determine how the value appears on the page.

### Input fields

Input fields allow the user to enter or select values.

Many input fields include a **Bound Record** property. Binding connects the value displayed or collected by the field to a record in the Applet.

Detailed binding instructions are provided later in **Data Binding**.

#### Input

Use an **Input** field to collect a single line of text.

Common uses include:

* Names.
* Identifiers.
* Short descriptions.
* Quantities entered as text.
* Search values.

Use **Field Text** to configure the field’s label. Additional entry behavior can be configured under **Capture Properties**.

#### Multiline Input

Use a **Multiline Input** when the user may need to enter multiple lines of text.

Common uses include:

* Notes.
* Comments.
* Detailed descriptions.
* Explanations.

#### Date/Time Input

Use a **Date/Time Input** to allow the user to select a date, a time, or a date-and-time value.

This field is useful for values such as checkout dates, expected return dates, appointments, and timestamps.

#### Password Input

Use a **Password Input** to collect text that should not remain visible while it is being entered.

Entered characters are masked. The user can select the visibility control to temporarily show or hide the value.

#### Checkbox

Use a **Checkbox** for a value that can be either selected or not selected.

A checkbox commonly represents a true-or-false choice, such as:

* Approved.
* Completed.
* Include accessories.
* Acknowledged.

Use **Default Value** to determine whether the checkbox is initially selected.

#### Radio Buttons

Use **Radio Buttons** when the user must select one option from a visible group of choices.

Use the **Radio Items** properties to add, edit, or remove the available choices. The options can be displayed horizontally or vertically.

A default selection can also be configured.

#### Slider Input

Use a **Slider Input** to select a numeric value from a defined range.

Configure the slider using:

* **Min Value**
* **Max Value**
* **Increment Value**
* **Default Value**

A Slider Input is useful when the user should choose from a controlled numeric range rather than enter an unrestricted value.

#### Popup List

Use a **Popup List** to allow the user to select an item from a list.

The field displays the current selection and opens the available choices when selected. It is useful when the available options should remain hidden until the user opens the list.

### Container fields

Container fields present collections of data rather than a single value.

#### Table View

Use a **Table View** to display a list of records in rows and columns.

A Table View can provide:

* A search bar.
* Primary and additional search columns.
* Configurable display columns.
* Filtering.
* Sorting.
* Row-click actions.
* Optional headers and loading indicators.

In the Equipment Checkout Applet, the Table View on the home page displays the available equipment records. A user can search the table and select the required item before continuing to another page.

A Table View must be connected to an appropriate list record before it can display data.

#### Chart View

Use a **Chart View** to present record data visually.

The Chart properties control settings such as:

* Chart type.
* Chart color.
* Legend visibility.
* Legend position.
* Legend alignment.

A Chart View must be connected to the list record containing the data to be represented.

### Action fields

Action fields allow the user to initiate an operation or capture information that requires a device interaction.

#### Button

Use a **Button** to initiate one or more configured actions.

Enter the wording displayed on the button in **Field Text**. Configure what happens when the user selects the button under **Click Actions**.

Buttons can be used to:

* Navigate to another page.
* Run a query.
* Set or update a value.
* Save information.
* Start another configured operation.

A button does not perform an operation until the appropriate click action has been configured.

Detailed instructions are provided later in **Actions, Events, and Conditions**.

#### Signature

Use a **Signature** field to capture a handwritten signature.

The user signs within the field’s signature area using a touchscreen or another supported pointing device. This field can be used for acknowledgments, approvals, and proof of receipt.

#### Camera

Use a **Camera** field to capture an image using the device’s camera.

Camera availability depends on the device, browser, hardware, and permissions. If the Applet Editor cannot access a camera, the field may display **CAMERA NOT AVAILABLE** while the Applet is being designed or previewed.

### Select an appropriate field type

Choose a field according to the way users will interact with the value.

| Requirement                                  | Suggested field                        |
| -------------------------------------------- | -------------------------------------- |
| Display a page or section title              | Header                                 |
| Display instructions or other static wording | Text                                   |
| Separate sections visually                   | Horizontal Divider or Vertical Divider |
| Display an image or video                    | Image or Video                         |
| Show connectivity or time information        | Connectivity Display or Time Display   |
| Collect one line of text                     | Input                                  |
| Collect longer text or notes                 | Multiline Input                        |
| Collect a date or time                       | Date/Time Input                        |
| Mask entered text                            | Password Input                         |
| Collect a true-or-false selection            | Checkbox                               |
| Select one visible option from a group       | Radio Buttons                          |
| Select a numeric value from a range          | Slider Input                           |
| Select an option from a compact list         | Popup List                             |
| Display multiple records                     | Table View                             |
| Visualize record data                        | Chart View                             |
| Initiate an operation                        | Button                                 |
| Capture a handwritten signature              | Signature                              |
| Capture an image                             | Camera                                 |

{% hint style="info" %}
Select a field after adding it to the page to display its available settings. The sections shown in the Properties Panel vary according to the selected field type.
{% endhint %}

### Next

Continue to **Data Binding** to learn how to bind fields to single records and list records, display table data, and collect values that can later be saved or processed through actions.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.amltd.com/dc-works/applets/field-types.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
