> 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/applet-editor-overview.md).

# Applet Editor Overview

The **Applet Editor** is the workspace used to build and configure an individual Applet. It provides access to the Applet’s pages, records, fields, styles, properties, and other workflow settings.

The tools and options displayed in the Applet Editor change according to the item currently selected.

<figure><img src="/files/8Ynoz0v5tQxdYoQCKPJM" alt=""><figcaption></figcaption></figure>

*The Applet Editor consists of the Applet Editor Menu, Main Workspace, Properties Panel, and Top Taskbar.*

### Main areas of the Applet Editor

The Applet Editor is organized into four primary areas:

| Area               | Purpose                                                                           |
| ------------------ | --------------------------------------------------------------------------------- |
| Applet Editor Menu | Provides access to Pages, Toolbox, Records, and Styles                            |
| Main Workspace     | Displays the selected Applet page and its fields and visual elements              |
| Properties Panel   | Displays the settings available for the selected page, field, or element          |
| Top Taskbar        | Provides common Applet editing, viewing, saving, publishing, and testing controls |

### Applet Editor Menu

The **Applet Editor Menu** is located on the left side of the Applet Editor. It provides access to the primary tools used to build an Applet.

#### Pages

The **Pages** section is used to add, select, and manage the pages contained in the Applet.

Selecting a page displays it in the Main Workspace and makes its settings available in the Properties Panel.

#### Toolbox

The **Toolbox** contains the fields and visual elements that can be added to an Applet page.

Fields added from the Toolbox can be positioned in the Main Workspace and configured through the Properties Panel. Depending on the field type and its purpose, it may also need to be connected to a record.

#### Records

The **Records** section is used to create and manage the records available to the Applet.

Records allow the Applet to hold information and interact with data from sources such as DC Works tables or external APIs. Records should generally be defined before configuring fields that depend on their data.

Detailed instructions are provided in **Records and Data**.

#### Styles

The **Styles** section is used to manage the Applet’s colors and general visual appearance.

Additional appearance settings may also be available for individual pages and fields through the Properties Panel.

### Main Workspace

The **Main Workspace** displays the currently selected Applet page.

Within the Main Workspace, you can:

* Select fields and visual elements.
* Position and arrange elements on the page.
* Review the page layout.
* See how the Applet will appear at the selected display size and orientation.

Selecting an item in the Main Workspace displays its available settings in the Properties Panel.

### Properties Panel

The **Properties Panel** is used to configure the item currently selected in the Applet Editor.

The available settings depend on whether you have selected:

* A page.
* A field.
* A visual element.
* Another configurable Applet component.

For example, selecting a field may display settings related to its name, appearance, data binding, input behavior, validation, actions, and conditions.

{% hint style="info" %}
The Properties Panel does not display the same options for every item. Its contents automatically change according to what is selected.
{% endhint %}

### Top Taskbar

The **Top Taskbar** provides controls for working with and testing the Applet.

Depending on the current context, these controls may be used to:

* Navigate between Applet pages.
* Adjust the workspace zoom.
* Select a display size.
* Change the display orientation.
* Save changes.
* Publish the Applet.
* Export the Applet.
* Run the Applet for testing.

### How the interface works together

The four areas of the Applet Editor work together:

1. Select a tool or component from the **Applet Editor Menu**.
2. Select or arrange an item in the **Main Workspace**.
3. Configure the selected item in the **Properties Panel**.
4. Use the **Top Taskbar** to save, view, publish, or test the Applet.

For example, you might create a record from the Applet Editor Menu, add a field from the Toolbox, position it in the Main Workspace, and then use the Properties Panel to connect that field to the record.

{% hint style="info" %}
If you are new to DC Works and want to build an example applet, refer to **Create Your First Applet** in the **Getting Started** chapter.
{% endhint %}

### Next

Continue to **Create an Applet** to learn about the four available methods for creating a new Applet.


---

# 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/applet-editor-overview.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.
