string

Use 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.
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.
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.
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: help – adds a question mark on the right from the title. Specify the text that appears when the user clicks the question mark. hint – adds a tooltip that appears when a user moves the pointer over the title. An example of the fieldInfo value with the help and hint objects: 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: text integer smallinteger biginteger float decimal percent_complete password

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 elements 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);
  } 
})();

Page tree

string