The <string> tag designates an input field for text information. The element is similar to React.Component.
The following attributes are applicable:
| Attribute | Type | Mandatory | Description |
|---|---|---|---|
| class | String | N | Specify the CSS class name defined in the CSS field. |
| isMandatory | Boolean | N | Make the field mandatory. For this, set the attribute equal to 'true'. |
| isVisible | Boolean | N | Disable the widget displaying. This attribute is equal to 'true' by default. |
| label | String | N | Describe the field content by giving a field label with text information. |
| model | String | Y | Specify this attribute to point to the client controller data object. When the model data changes, it is automatically transferred to the data of the client script. |
| placeholder | String | N | Specify a placeholder for the text field. |
readOnly | Boolean | N | Make the field read-only. For this, set the attribute equal to 'true'. |
| style | String | N | Specify the display settings (size, font, color, etc.) of the widget elements using the CSS syntax. |
value | String | N | Specify the default value for the field. |
string
<h1>{data.fullname}</h1>
<string model="data.firstname" event-change="s_widget_custom.updateFullname();"></string>
<string model="data.lastname" event-change="s_widget_custom.updateFullname();"></string>
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);
}
})();
