string
title: string
string
The <string> tag to designate an input field for the text information. The element is similar to React.Component.
Available attributes:
Attribute | Type | Mandatory | Description |
---|---|---|---|
class | String | N | Specify the CSS class name defined in the CSS field of the widget. |
model | String | Y | Specify this attribute to connect the client controller data object. When the model data changes, it is automatically transferred to the data of the client controller. |
isMandatory | Boolean | N | Set the value to true to make the field mandatory. The default value is false. |
isVisible | Boolean | N | Set the value to false to hide the tag. The default value is true. |
label | String | N | Describe the field content by giving it a title. |
placeholder | String | N | Specify a placeholder for the field. |
readOnly | Boolean | N | Set the value to true to make the field read-only. The default value is false. |
style | String | N | Specify the display settings (size, font, color, and others) of the tag elements using the CSS syntax. |
value | String | N | Specify the default value for the field. |
fieldInfo | Object | N | Specify additional information for the field:
fieldInfo='{"help": "help text!", "hint":"hint text!"}' |
column_type | String | N | Specify column type. The field only accepts the data that corresponds with the selected type. The default value is text. Available options:
|
Examples:
string
<h1>General</h1>
<string
model="data.firstname"
label="First name"
event-change="s_widget_custom.updateFullname();"
></string>
<string
model="data.lastname"
label="Last name"
event-change="s_widget_custom.updateFullname();"
></string>
The template above adds the following element to the page:
Client script
;
(() => {
window.s_widget_custom.updateFullname = async function () {
const firstname = s_widget.getFieldValue('firstname') || '';
const lastname = s_widget.getFieldValue('lastname') || '';
s_widget.setFieldValue('fullname', lastname + ' ' + firstname);
}
})();