Skip to main content
Version: 1.22.3

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:

AttributeTypeMandatoryDescription
classStringNSpecify the CSS class name defined in the CSS field of the widget.
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.
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.
placeholderStringNSpecify a placeholder for the field.
readOnlyBooleanNSet 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.
valueStringNSpecify the default value for the field.
fieldInfoObjectNSpecify 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_typeStringNSpecify 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 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);
}
})();