> 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/add-fields.md).

# Add Fields

Fields are the elements placed on an Applet page to display information, collect user input, present data, and allow users to perform actions.

Fields are added from the **Toolbox** and configured through the **Field Properties** panel.

Before adding fields that depend on data, create the required Applet records and local variables. This makes the appropriate data available when field binding is configured.

### Open the Toolbox

To display the fields available for an Applet:

1. Open the Applet in the **Applet Editor**.
2. Select the page on which the field will be placed.
3. Select **Toolbox** from the Applet Editor menu.

The **Add Fields** panel opens.

<figure><img src="/files/4XFOKhnWaiwIKhnziJX0" alt=""><figcaption></figcaption></figure>

*The Add Fields panel contains the field types that can be placed on the selected page.*

Fields are organized into four categories:

| Category      | General purpose                                                  |
| ------------- | ---------------------------------------------------------------- |
| **Visual**    | Displays headings, text, media, dividers, and device information |
| **Input**     | Collects text, dates, selections, and other user input           |
| **Container** | Displays collections of information in tables or charts          |
| **Action**    | Allows users to initiate an operation or capture information     |

Each available field type is described in **Field Types**.

### Add a field to a page

To add a field:

1. Confirm that the correct page is selected.
2. Open **Toolbox**.
3. Locate the required field type.
4. Drag the field from the **Add Fields** panel into the Main Workspace.
5. Position and size the field as needed.
6. Configure the field through the **Field Properties** panel.
7. Save the Applet.

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

*Drag a field from the Add Fields panel and place it on the selected page.*

A newly added field receives a system-generated **Field ID**, default field name, and initial configuration. These settings can then be reviewed and adjusted.

### Select a field

Select a field in the Main Workspace to display its settings in the **Field Properties** panel.

The heading at the top of the panel identifies the selected field and its field type.

For example:

> Header f1 Properties

Only the properties applicable to the selected field type are displayed.

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

{% hint style="info" %}
Confirm that the correct field is selected before changing its properties. The Field Properties panel always applies to the currently selected field.
{% endhint %}

### Understand the Field Properties panel

Most fields share several groups of properties. Additional groups appear when a field type requires specialized configuration.

Common property groups include:

| Property group     | Purpose                                                |
| ------------------ | ------------------------------------------------------ |
| **Info**           | Identifies the field and contains its primary settings |
| **Position**       | Controls where the field appears on the page           |
| **Size**           | Controls the field’s width and height                  |
| **Font**           | Configures the appearance of text                      |
| **Color**          | Configures text and background colors                  |
| **Border**         | Configures the field’s border                          |
| **Text Alignment** | Controls the alignment of text within the field        |

Field-specific groups may also appear. For example:

* A **Table View** includes **Table** properties.
* A **Button** includes **Actions** properties.

The exact properties available depend on the selected field type.

### Review the Info properties

The **Info** group contains the field’s primary identification and behavior settings.

Common Info properties include:

#### Field ID

The **Field ID** is assigned by DC Works and identifies the field within the Applet.

#### Field Type

The **Field Type** identifies the type of field, such as Header, Text, Table View, or Button.

#### Field Name

The **Field Name** identifies the field within the Applet Editor.

Replace generic names such as `Text f2` or `Button f4` with descriptive names that indicate the field’s purpose.

Examples include:

| Generic name  | Descriptive name        |
| ------------- | ----------------------- |
| Header f1     | Equipment Lookup Header |
| Text f2       | Lookup Instructions     |
| Table View f3 | Equipment Lookup Table  |
| Button f4     | Equipment Detail Button |

Descriptive field names make actions, conditions, data binding, and troubleshooting easier to understand.

#### Hidden

Enable **Hidden** when the field should not initially be visible to the user.

Actions or conditions may later control whether a hidden field becomes visible.

#### Field Text

Fields that display a label or message include a **Field Text** property.

For example:

* A Header field might display `Equipment Lookup`.
* A Text field might display `Search items and select them`.
* A Button might display `Equipment Detail`.

The Field Name identifies the field in the Applet Editor, while Field Text is the wording displayed to the user.

{% hint style="info" %}
Use **Field Name** to identify the field while building the Applet. Use **Field Text** to control what users see when running it.
{% endhint %}

### Configure position and size

Use the **Position** and **Size** properties to control where the field appears and how much space it occupies.

When positioning fields:

* Follow the order in which users will read or use them.
* Keep related fields together.
* Maintain consistent spacing.
* Make frequently used controls easy to reach.
* Allow sufficient space for labels and displayed values.
* Consider the screen dimensions shown in the Applet Editor.

Field dimensions can also influence how text wraps and how much information a container field can display.

### Configure text appearance

Fields containing text may include **Font** and **Text Alignment** properties.

Font settings can include:

* Font family.
* Font weight.
* Font style.
* Font size.

Text Alignment controls how the text is positioned within the field.

Use consistent typography throughout the Applet. Reserve larger or heavier text for headings and important instructions.

### Configure colors and borders

Use the **Color** and **Border** properties to adjust the field’s visual appearance.

Depending on the field type, color settings may control:

* Text color.
* Background color.
* Transparent background.

Border settings can be used to visually define or separate a field.

Use colors and borders consistently. Visual differences should help users distinguish headings, information, inputs, and primary actions.

### Configure field-specific properties

Some fields require settings beyond the common property groups.

For example, a Table View can include:

* A bound list record.
* Displayed columns.
* A search bar.
* A loading spinner.
* Column headers.
* Filtering.
* Sorting.
* Row-click actions.

A Button can include:

* Display text.
* Disabled state.
* Click actions.

These specialized settings are covered on the pages dedicated to the applicable field types and features.

### Delete a field

To remove the selected field, use the trash icon at the top of the **Field Properties** panel.

Before deleting a field, determine whether it is referenced by:

* An action.
* A condition.
* A page event.
* Another field.
* Data-binding configuration.

Removing a referenced field may interrupt the Applet’s workflow.

### Save field changes

Save the Applet after adding or configuring fields.

During saving, DC Works may identify fields with incomplete configurations. For example, a Button without a click action may produce an issue such as:

> Page: Home → Field: Button f4 → Button field does not have any associated click actions.

Review each reported issue and complete the required configuration.

{% hint style="warning" %}
A field may appear correctly in the Main Workspace but still require additional configuration before the Applet can operate as intended.
{% endhint %}

### Field configuration guidelines

When adding fields:

* Use the correct field type for the required information or activity.
* Give each field a descriptive name.
* Use clear, concise field text.
* Keep the page layout organized.
* Apply consistent fonts, colors, borders, and alignment.
* Confirm that fields requiring data have the appropriate records available.
* Identify fields that will require actions or conditions.
* Save and review configuration issues regularly.

### Arrange fields on a page

Fields are arranged primarily through their **Position** and **Size** properties.

To change a field’s placement:

1. Select the field in the Main Workspace.
2. Open **Position** in the Properties Panel.
3. Adjust the available positioning settings.
4. Review the field’s placement in the Main Workspace.
5. Save the Applet.

#### Position Type

**Position Type** determines how the field is positioned within the page layout.

The default **Normal** position places the field within the page’s regular sequence of fields.

#### Field Order

**Field Order** controls where the field appears in relation to the other fields on the page.

Use the order controls to move the selected field earlier or later in the page layout. This makes it possible to reorganize a page without deleting and re-adding its fields.

#### Vertical Alignment

Use **Vertical Alignment** to control the field’s vertical placement within its available layout area.

#### Margins

Margins add space around a field and help separate it from nearby content.

Individual values can be configured for:

* **Margin Top**
* **Margin Bottom**
* **Margin Left**
* **Margin Right**

Use margins to create consistent spacing between headings, instructions, input fields, tables, buttons, and other page elements.

#### Layer Index

**Layer Index** controls the stacking order of fields when two or more fields occupy the same area.

Adjust the Layer Index when a field needs to appear in front of or behind another page element.

#### Adjust the field size

Open **Size** in the Properties Panel to configure the field’s width and height.

Depending on the selected field type, the available settings may include:

* **Fixed Width**
* **Width**
* **Fixed Height**
* **Height**

Field dimensions can be entered using the available unit, such as pixels or a percentage of the available space.

{% hint style="info" %}
Use consistent field widths, spacing, and alignment throughout the Applet. Preview the Applet on its intended device or as a Web App to confirm that the layout works at the target screen size.
{% endhint %}

### Next

Continue to **Field Types** for an overview of the visual, input, container, and action fields available in the Toolbox.


---

# 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/add-fields.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.