> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superoffice.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add screen element

> Add screen element

**Screen elements** (controls) are the building blocks of custom screens. They determine the [layout][1], display [read-only info][2], and provide [user interaction][3].

**Element properties** are a combination of settings (simple values) and CRMScripts.

## Adding an element

1. Click **New element**.
2. Select an element type and enter element properties.
3. Add config in the **Simple values** tab.
4. Click **Apply**.
5. Select the **Creation script** tab.
6. Set which data to display by extending the script.
7. Click **Apply**.

<Tip>
  Click **Apply** after selecting an element type. This adds information the selected element to the **Help** tab.
</Tip>

## Simple values

Most elements have configuration options. These are specific to the different types of elements (for example, title and name).

<Tip>
  You can look up available settings for a specific element under the *Configuration* heading in the [element reference][4].
</Tip>

Each option is written as a **key-value** pair in the **Simple values** tab of the element.

```crmscript theme={null}
key = value
key2 = value2
key3 = value3
```

Each line is interpreted independently of the other lines. You can use our [line-based query syntax][5] to specify values.

<Note>
  There's **no semicolon or comma at the end** of simple value lines.
</Note>

Keys are automatically sorted alphabetically when you save an element.

## Body

Many elements have a **body**, which can be quite long. Settings for the element body are set in the **Body** tab, not the **Simple values** tab.

The body is a CRMScript. It can:

* print any HTML to the screen using `print()`
* retrieve any configuration variable using `getVariable()` (v. 4.11)

## Creation scripts

A **creation script** builds the element and populates it with data. It consists of 2 parts:

* An initial call to `addHtmlElement()` - default
* Your extension, which tailors the element and pulls in data

You'll see the default code when you open the **Creation Script** tab of an element.

```crmscript theme={null}
addHtmlElement(getScreenElementId(screenElementIndex),
  getScreenElementName(screenElementIndex),
  getScreenElementType(screenElementIndex),
  getScreenElementConfig(screenElementIndex));
```

To extend the default code, you'll be using database queries and the functions supported by that element.

It might look something like this:

1. Get a reference to the element by declaring a variable of type [`HtmlElement`][6] and assigning the object returned by `addHtmlElement()`

2. Create a `SearchEngine` object and [specify your query][7].

3. [Run the query][8].

4. [Loop over the result][9]. For each row:
   * Create a [Map][10].
   * Add key-value pairs to the map.
   * Add the map to the element using one of the element's functions.

<Tip>
  You can look up available functions for a specific element under the *Functions* heading in the [element reference][4].
</Tip>

[1]: ./layout-elements

[2]: ./view-elements

[3]: ./form-elements

[4]: ../reference/index

[5]: ./blogic-query-syntax

[6]: /en/automation/crmscript/reference/CRMScript.Native.HtmlElement

[7]: ../../../automation/crmscript/searchengine/se-select

[8]: ../../../automation/crmscript/searchengine/se-run

[9]: ../../../automation/crmscript/searchengine/se-results

[10]: ../../../automation/crmscript/datatypes/map-type


## Related topics

- [screen_definition_element table](/en/database/tables/screen-definition-element.md)
- [Void](/en/automation/crmscript/reference/CRMScript.Global.Void.md)
- [The layout elements on the Main screen](/en/learn/getting-started/main-screen/index.md)
- [Trigger](/en/automation/trigger/reference/CRMScript.Event.Trigger.md)
- [Screen definition](/en/ui/blogic/learn/screen-definition.md)
- [Add a button or link](/en/customization/screen-designer/admin/add-button.md)
- [Screen designer](/en/customization/screen-designer/admin/index.md)