Editable text

What is Editable Text?

Editable text allows users to create and manipulate text within their applications. With this component, users can easily input and edit text directly on the interface, making it ideal for creating dynamic and interactive content.

Properties

Properties	Description
Default value	The initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
Placeholder	The value will be shown when the input field is empty.
Label	The name of the field displayed to the user
Caption	A caption used to describe the field in detail
Hidden label	Set whether to display the label
Position	Set the position of the label relative to the component
Alignment	Set the alignment (align to left or right) of the label
Width	When the label is on the left side of the component, set the width ratio of the label.
Event Handler	Trigger queries, control components, or call other APIs in response to component events.
Disabled	Control the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read Only	Control the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear button	control whether or not a clear button is displayed in the input field
Show character count	control whether or not the character count of the input is displayed
Prefix text	a short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix text	a short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Tooltip	Users can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required field	Valid only when the switch is on.
Pattern	specify a pattern that the input value must match
Max length	set the maximum number of characters that can be entered into the input field.
Min Length	specify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom rule	Create your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation message	You can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Hidden	Dynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme Color	Allows users to specify the button's background color and opacity

Method

You can use other components to control the component. We support the following five methods:

• setValue

To set the text area input value, for example, {{"value1"}}

Properties	Description
Value	Input value

• clearValue

To clear the value of the selected component

• focus

When the focus method is called, the text area input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

• validate

To verify that the input information is legal

• clearValidate

To clear the validation message

Event handler

Event	Description
Change	When a user changes the input value
Focus	When a user moves the mouse cursor on the input component
Blur	When a user is done inputting value and quit focusing on component

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property name	Description
value	user input value
colorScheme	background color of the button
customRule	user-defined rule or validation logic that can be applied to the number input component
disabled	a Boolean value indicate the disabled status
displayName	the name of this component (ie button1)
events	generated or triggered when certain actions or events occur
hidden	hidden status (true or false)
label	label value
labelAlign	alignment of input label (left or right)
labelPosition	position of input label (left or right)
labelWidth	the integer representing width of label.
maxLength	the value of maximum length
minLength	the value of minimum length
placeholder	placeholder value
prefixText	value of the text prefix
suffixText	value of the text suffix
readOnly	a Boolean value indicate the readyOnly status of input.
required	a Boolean value indicate the required status of input.
regex	apply pattern-based validation to the input text in the text area
showCharacterCount	a Boolean value indicate whether the character count of input is displayed
tooltipText	value of tooltip text

Example: {{editable_text1.value}}

Use case

Next, we will demonstrate how to map the data from the data source to the editable text with a button.

Step 1 Add an action

Let us create a table in REST API with columns id, name, and age. The id 1 document is what we want to show in the form component.

Then we can create a new action for REST API from the action list in the app we want to build, listing all the data in the bucket and named restapi1.

Select GET for **Action Type**. In URL Parameters, put id for key and 1 for value.

Click Save and Run to activate this action.

Step 2 Add Components

Next, we can add an editable text component and a button component to the canvas.

We label editable text to be 'Name' and labeled the button as "Set value" as shown below

Step 3 Configure the component

For the button component, we can configure it to set the value in editable text component to the data of the document we read from restapi.

1. In the Edit event handler, select Control component in action, and select the editable text component that you want to update as the target of the event.
2. Choose the setValue action and set the value as {{restapi1.data[0]["name"]}}

Step 4 Test

Now that when you click the "Set value" button, the value should change to the text.