Use the <string> tag to designate an input field for the text information. The element is similar to React.Component.

Available attributes:

AttributeTypeMandatoryDescription
classStringNSpecify the CSS class name defined in the CSS field of the widget.
isMandatoryBooleanNSet the value to true to make the field mandatory. The default value is false.
isVisibleBooleanNSet the value to false to hide the tag. The default value is true.
labelStringNDescribe the field content by giving it a title.
modelStringYSpecify 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.
placeholderStringNSpecify a placeholder for the field.

readOnly

BooleanNSet the value to true to make the field read-only. The default value is false.
styleStringNSpecify the display settings (size, font, color, and others) of the tag elements using the CSS syntax.

value

StringN

Specify the default value for the field.

fieldInfo

ObjectN

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

StringN

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:

<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:

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