edit-text

Overview

To get started, see the introductory guide on editable object-table cells.

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.

On Desktop: Pressing enter will cause a line break, and pressing [shift] + enter will fire the submit event.

Basic Example

<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 that executes when a cell's value is updated (once the user hits enter).

main.view.xml

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

main.js

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

value

Required

Default: unset

The object field or result of a $:function which is the initial editable value shown when the user edits the cell. Valid values are:

• value="$object.[field]"

• value="$:getInitialEditingValue($object)"

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}"

Advanced Attributes

clear-button-visibility

clear-button-visibility

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:

disabled