# edit-text

## Overview

{% hint style="info" %}
To get started, see the introductory [guide](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/object-table-guides/edit-cells) on editable `object-table` cells.
{% endhint %}

`edit-text` is the simplest type of editable cells. This cell type is used when the data captured requires standard `utf-8` input. The data allows for line breaks and is treated as a `textarea`, as opposed to a `textfield`.

{% hint style="info" %}
**On Desktop**: Pressing `enter` will cause a line break, and pressing `[shift]` + `enter` will fire the submit event.
{% endhint %}

### Basic Example

```xml
<object-table ...>
    <column display="{field}">
        <edit-text value="$object.field" on-change="$:valueChanged($object, newValue, oldValue)" />
    </column>
</object-table>
```

## Standard Attributes

### `on-change`

**Optional**

**Default**: unset

A JavaScript/TypeScript [`$:function`](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml) that executes when a cell's value is updated (once the user hits enter).

{% code title="main.view\.xml" %}

```xml
<object-table ...>
    <column heading="Editable field" display="{name}">
        <edit-text on-change="$:valueChanged($object, newValue, oldValue)" />
    </column>
</object-table>
```

{% endcode %}

{% code title="main.js" %}

```javascript
function valueChanged(object, newValue, oldValue){
    object.name = newValue;
    object.save();
}
```

{% endcode %}

### `value`

**Required**

**Default**: unset

The object field or result of a [`$:function`](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml) which is the initial editable value shown when the user edits the cell. Valid values are:

* `value="$object.[field]"`
* `value="$:getInitialEditingValue($object)"`

{% hint style="warning" %}
Unlike `display`, `value` is **not** a text attribute and must therefore represent a variable or result of a function, i.e. do not use string literals to give it a value in curly brackets like this: `value="{do_not_do_this}"`
{% endhint %}

## Advanced Attributes

### `clear-button-visibility`

{% content-ref url="../../../xml-fields/clear-button-visibility" %}
[clear-button-visibility](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/clear-button-visibility)
{% endcontent-ref %}

### `disabled`

**Optional**

**Type**: `boolean`

**Default**: `false`

When a particular editable cell should not be editable based on a condition, the `disabled` attribute can be used to dynamically turn it into a standard display-only cell. This attribute has access to `$object`.

Also see:

{% content-ref url="../../../xml-fields/disabled" %}
[disabled](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/disabled)
{% endcontent-ref %}