Page History

When creating a widget with a SimpleTag, use the attributes below to configure its functionality.

Note
When a widget is implemented, all tag attribute values are transmitted as a string regardless of the attribute type; and during the processing phase, the attribute value is applied in line with the type specified.

Attribute types

There are two types of widget attributes:

configuration attributes that set form views of widgets.
event-related attributes that set actions when users interact with the widgets.

Configuration attributes

description

a

unstyled
primary
approve
destructive
secondary
icon-mini

Specify deselect items.
If it's equal to 'true', then the selection of all elements is not available.Specify class

Define the CSS styles classes description.

Define the attribute it in the Template field of the widget. Then, describe it in the CSS field.

Attribute

Type

Description

Available in

alignRight

Boolean

Set true, to align text to the right.

beginDate

String

Specify a minimum possible date for a field.

Code Block

language	xml
title	beginDate

<datetime model="data.dueDate" label="data.dueDateTitle" isMandatory="true" beginDate="{data.beginDate}" endDate="{data.endDate}"></datetime>

Code Block

language	js
theme	Eclipse
title	Server Script

const nowDate = new SimpleDateTime();
data.beginDate = nowDate.getDate();
nowDate.addDays(3);
data.endDate = nowDate.getDate();

<date>

buttonType

String

Specify

button displaying style for forms and lists.

Code Block

language

xml

theme

The disabled buttons appear in gray.

Button colors:

unstyled – a white color button
primary – a blue color button
approve – a green color button
destructive – a red color button
secondary – a transparent background for the button

Use the following button types along with the svg attribute:

icon-mini – a small square button
icon – a square button
icon-primary – a square button with blue background
icon-border – a square button with borders
expand – a rectangular button with blue background, and specified svg is colored in blue as well

Code Block

language	xml
theme	Eclipse
title	buttonType

<button class="btn" event-click="window.s_widget_custom.forceUpdate();" buttonType="destructive">
  Force
</button>

canExcludeAll

Boolean

Code Block

Set the attribute to

true to make it possible to leave the field with no items selected.

Code Block

language	xml
title	values

<multiselect model="data.values" canExcludeAll="true" values='["1", "2"]' options='[{"database_value":"","display_value":""},{"database_value":"1","display_value":"First"},{"database_value":"2","display_value":"Second"}]'></multiselect>

canRead

Boolean

Specify the attribute to make the referred dictionary available

<list>

canCreate

Boolean

Set the attribute equal to true to add the button Image Modified for creating a new record.

<list>

canRead

Boolean

To restrict access to the specified table, set the attribute to false.

<list>

categoryDescription

String

Specify a table field that contains category descriptions.

categoryIcon

String

Specify a table column that contains category icons.

categorySubject

String

Specify a table field that contains category descriptions.

childDepth

Integer

Specify the depth of the child categories.

choiceConditionName

String

Define the columns that contain data of the Choice type to specify choice options in your condition.

class

String

Specify a CSS class name defined in the CSS field of the widget.

Define the attribute it in the Template field of the widget. Then, describe it in the CSS field.

Code Block

language	xml
title	class

<button
  id="addBtn"
  class="button disable"
  event-click="window.s_widget_custom.addParticipants()">
  {data.createCABbuttonTitle}
</button>

Code Block

language	css
title	CSS
collapse	true

.button {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  display: inline-block;
  vertical-align: top;
  text-align: center;

String

Code Block

language	xml
title	class

<button
  id="addBtn"
  class="button disable"
  event-click="window.s_widget_custom.addParticipants()">
  {data.createCABbuttonTitle}
</button>

Code Block

language	css
title	CSS
collapse	true

.button { font-weight: 600; font-size: 14px; color: #fff; display: inline-block; vertical-align: top; text-align: center;

border-radius: 4px;
  padding: 0 14px;
  line-height: 30px;
  letter-spacing: 0.2px;
  background-color: #0f8af9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  height: 32px;
}
.button.disable {
  cursor: not-allowed;
  pointer-events: none;
  color: #c0c0c0;
  background-color: #ffffff;
 }

All

Simple Tags (except for Portal Tags <attachment>

SimpleTags except for the Common tags

attachment>

<rem>

and Portal tags

)

condition

String

Specify the condition. It is an equivalent of Reference Qualifier

in the agent interface.

Code Block

language	xml
title	isFixed
linenumbers	true

<reference
  isFixed="true"
  condition="{data.condition}"
  label="{data.instanceTitle}"
  tableName="sys_cmdb_ci_instance"
  model="data.instance"
  event-change="s_widget_custom.instanceSelected();">
</reference>

Code Block

language	js
theme	Eclipse
title	Server Script

if (!!input.tableName && !!input.caller) {
  data.condition =
    `owned_by=${input.caller}^ORDERBYDESCsys_created_at`;
}

<list>

config

String

Configure the Activity Feed. Describe the object in JSON format, as in the example below.

Define the following parameters:

title – change the title of the Activity Feed.
journal – specify the Journal Input fields to display.
columns – filter the fields to display in History.
classes – add classes to style the Activity Feed. These class styles can be redefined.
isNotStylized – remove the styling of the Activity Feed.

date

String

Specify a column containing the item creation date and time (for more details, see the example below).

dateColumn

String

Specify a table column that contains dates related to list items.

dateConditionName

String

Define the columns that contain data of the Date or Date/Time type to specify date ranges in your condition.

disabled

Boolean

Set the attribute to true to disabled the button. A disabled button cannot be clicked.

displayColumnNumber

Integer

Specify the number of the column, by clicking on which the record opens.

doClose

Function

Specify the function to execute when the modal window or menu is closed.

Code Block

language	xml
title	doClose

<modal
  isShow="{data.isShow}"
  doClose="window.s_widget_custom.countClosing();">
</modal>

doClose

Function

Specify the function to execute when the modal window is closed.

Code Block

language	xml
title	doClose

<modal
  isShow="{data.isShow}"
  doClose="window.s_widget_custom.countClosing();">
</modal>

Code Block

language	js
theme	Eclipse
title	Client Script

window.s_widget_custom.countClosing = function () {
  window.closeCount = window.closeCount + 1 || 1
  s_widget.setFieldValue('isShow', false);
}

<modal>

endDate

String

Specify a maximum possible date for a field.

Code Block

language	xml
title	beginDate

Code Block

title
language	js
theme	Eclipse

Server

Client Script

const nowDate

window.s_widget_custom.countClosing =

new

function

SimpleDateTime

()

; data.beginDate

 {
  window.closeCount =

nowDate.getDate(); nowDate.addDays(3); data.endDate = nowDate.getDate();<datetime>fixedConditionString

Specify a condition applied to the list. Unlike the condition specified with the condition attribute, this condition is fixed and cannot be removed; it can be only specified more precisely.

The attribute work logic is similar to the Reference Qualifiers (fixed).

listitems

window.closeCount + 1 || 1
  s_widget.setFieldValue('isShow', false);
}

<modal>

elementCount

String

Specify the number of page items. If not specified, then equal to 5 by default.

endDate

String

Specify a maximum possible date for a field

isFixed

BooleanDisable the changing of the condition value by making attribute equal to 'true'

.

Code Block

title
language	xml

isFixedlinenumberstrue<reference isFixed="true"

beginDate

<datetime model="data.dueDate" label="data.dueDateTitle" isMandatory="true"

condition

isVisible="

(state!=10)" label="Incident" model="data.incident_id" tableName="itsm_incident"> </reference>

<list>

isMandatory

Boolean

Enable setting a mandatory status to a field. To do so, set the attribute equal to 'true'.

Code Block

language	xml

<select model="data.reason" label="{data.reasonTitle}" options='[{ "database_value": "", "display_value": "--None--" },
      {"database_value": "defect", "display_value": "Defect"},
      {"database_value": "low_test_coverage", "display_value": "Low Test Coverage"},
      {"database_value": "other", "display_value": "Other"}]' value='{"database_value": ""}' isMandatory="true">
</select>

All Simple Tags (except for Portal Simple Tags and <attachment>

<rem>

<remform>)

isPortal

BooleanEnable the display of the attributed widget on the Self-Service Portal.

<rem>

remform>

isShow

Boolean

Enable the display of the modal window.

Code Block

language	xml
title	isShow

<modal
  model="data.modal"
  title="{data.modalTitle}"
  isShow="{data.isShow}">
</modal>

<modal>

isUserScripts

BooleanDisable the client scripts execution in a form.

<rem>

true" beginDate="{data.beginDate}" endDate="{data.endDate}"></datetime>

Code Block

language	js
theme	Eclipse
title	Server Script

const nowDate = new SimpleDateTime();
data.beginDate = nowDate.getDate();
nowDate.addDays(3);
data.endDate = nowDate.getDate();

<date>

events

String

Specify the actions to perform after one of the predefined patterns is selected:

click
context
mouseOver

exclude

Array

Specify the parameters to exclude from the display.

Code Block

language	xml
title	exclude
linenumbers	true

<durationinput value='{data.duration1}' exclude='["days","seconds"]' alignRight='true' onChange="s_widget_custom.onChange1(arguments[0]);"></durationinput>
<durationinput value='{data.duration2}' exclude='["days","seconds"]' alignRight='true' onChange="s_widget_custom.onChange2(arguments[0]);"></durationinput>

fixedConditionString

Specify the condition applied to the list. Unlike the condition specified with the condition attribute, this condition is fixed and cannot be removed. It can be only specified more precisely.

The attribute work logic is similar to the fixed reference qualifiers.

hintString

Specify the button text hint.

includeCategoriesIntegerSet the attribute to 1 to add categories to the side menu.<sidemenu>includeItemsIntegerSet the attribute to 1 to add items to the side menu.<sidemenu>isAlwaysOpenBoolean

To make the Activity Feed widget always open, set the attribute equal to true. If the widget is always open, it has no chevron Image Added icon and option to hide.

isFixed

Boolean

Set the true value to disable the editing of the condition value.

Code Block

language	xml
title	isFixed
linenumbers	true

<reference
  isFixed="true"
  isMandatory="true"
  condition="(state!=10)"
  label="Incident"
  model="data.incident_id"
  tableName="itsm_incident">
</reference>

<list>

isFullScreenMode

Boolean

Set the attribute to true to display the modal window in full screen when opened on a mobile device.

<modal>

isMandatory

Boolean

isVisible

BooleanDisable the visibility of a widget. By default, the attribute is equal to 'true'

To make a field mandatory, set the attribute equal to true

.

Code Block

linenumbers
language	xml
title	isMandatory

isVisible

true

<string

<select

model="data.

additionalComment

reason"

isVisible

label="{data.

showComment}"> </string>All Simple Tags (except for <attachment>)

label

String

Speicy the field label with the text information generally describing the field content.

Code Block

language	xml

<textarea
  model="data.name"
  label="Name">
</textarea>

All Simple Tags (except for <attachment>

<rem>

<remform>)

model

String

This attribute points to the client controller data object. When the model data changes, it is automatically transferred to data of the client script.

Code Block

language	xml

<textarea
  model="data.name"
  label="Name">
</textarea>

All Simple Tags (except for <attachment>

<modal>

<rem>

modelId

StringUse this attribute to specify the Record Extended Model ID when configuring a form extension.

<rem>

options

Array

Specify the options available for selecting. Use the CodeMirror JSON formatting to set the necessary options.

Code Block

language	xml

<select model="data.reason" label="{data.reasonTitle}" options='[{ "reasonTitle}" options='[{ "database_value": "", "display_value": "--None--" },
      {"database_value": "defect", "display_value": "Defect"},
      {"database_value": "low_test_coverage", "display_value": "Low Test Coverage"},
      {"database_value": "other", "display_value": "--None--Other" },
      ]' value='{"database_value": "defect",}' "display_value": "Defect"},
      {"database_value": "low_test_coverage", "display_value": "Low Test Coverage"},
      {"database_value": "other", "display_value": "Other"}]' value='{"database_value": ""}'>
</select>

placeholder

String

isMandatory="true">
</select>

Common SimpleTags except for

<modal>

<rem>

isPortal

BooleanSet the attribute to true to give the tag portal behavior and rendering.

<rem>

remform>

isRegistration

BooleanSet to true to make registration available to new users of the service portal. By default, the attribute value is false and only existing users can log in.

isRememberMe

BooleanSet to true to store the user's credentials on the computer.

isResetPassword

BooleanSet to true to add a password reset link to the widget form. By default, this feature is disabled and the value is false.

isShow

Boolean

Set the attribute to true to display the modal window or menu.

Code Block

language	xml
title	isShow

<modal
  model="data.modal"
  title="{data.modalTitle}"
  isShow="{data.isShow}">
</modal>

<modal>

isSwitchLang

Boolean

If the attribute value is false, users cannot change the interface language, and it is displayed in the system language.

isTreeShown

BooleanSet this attribute value to true to group search results and display the results grouping tree.

isUserScripts/userScripts

BooleanTo disable the client scripts execution, set the false value.

<Form>

<rem>

isVisible

Boolean

To disable the tag, set the false value.

Code Block

language	xml
title	isVisible

<string
  model="data.additionalComment"
  isVisible="{data.showComment}">
</string>

Common SimpleTags except for

<Form>

<modal>

<rem>

itemDescription

String

Specify a table field that contains item descriptions.

itemIcon

String

Specify a table column that contains item icons.

itemPageString

Specify the path to a page in the portal structure.

Example:

itemPage="page" defines the URL slug as page and the whole path has the following view:

https://your_instance_url/page?searchQuery

https://your_instance_url/your_portal/page

itemSubjectStringSpecify a table field that contains item titles.

itemView

String

Specify the view used for item rendering.

label

String

Speicy the field label with the text information generally describing the field content.

Code Block

language	xml
title	lable
linenumbers	true

<textarea
  model="data.name"
  label="Name">
</textarea>

Common SimpleTags except for

<Form>

<modal>

<rem>

listView/view

String

Specify a list view to use. Note that first you need to create this view in the List Views (sys_ui_list) table.

logo

String

Define the absolute path to the logo displayed on the authorization page.

For example:

https://example.com/logo.png

maxValue

Integer

Specify the maximum value in milliseconds.

model

String

This attribute connect the client controller data object. When the model data changes, it is automatically transferred to data of the client controller.

Code Block

language	xml
title	model
linenumbers	true

<textarea
  model="data.name"
  label="Name">
</textarea>

Common SimpleTags and PortalTag <dropdownMenu> except for the Common tags

<Form>

<modal>

<rem>

modelId

StringUse this attribute to specify the ID of the RE model to show its attributes.

<rem>

options

Array

Specify the options available for selecting. Use the CodeMirror JSON formatting.

Code Block

language	xml
title	options
linenumbers	true

<select model="data.reason" label="{data.reasonTitle}" options='[{ "database_value": "", "display_value": "--None--" },
      {"database_value": "defect", "display_value": "Defect"},
      {"database_value": "low_test_coverage", "display_value": "Low Test Coverage"},
      {"database_value": "other", "display_value": "Other"}]' value='{"database_value": ""}'>
</select>

parentsDepth

Integer

Specify the depth of the parent category.

placeholder

String

Specify a placeholder for a text field.

Code Block

language	xml
title	placeholder

<textarea
  model="data.name"
  label="Name"
  placeholder="{data.namePlaceholderText}">
</textarea>

<date>

preview

StringSpecify a column that contains information for the card preview.

profileUrl

String

Specify the path to the service portal section that contains the current user's profile page.

If specified, the Profile item is available in the user menu. Otherwise, this item is not available, and users cannot open their profiles.

quantity

Integer

Specify the maximum number of the search results per page.

radioButtonsMode

Boolean

Set the attribute to true to display choice options in the form of radio buttons. Otherwise, the standard drop-down list is used.

readOnly/isReadOnly

Boolean

To make the field read-only, set the attribute equal to true.

Code Block

language	xml

<select model="data.state" label="{data.stateTitle}" options='[
      {"database_value": "registered", "display_value": "Registered"},
      {"database_value": "open", "display_value": "Open"},
      {"database_value": "in_progress", "display_value": "In Progress"}]' value='{"database_value": ""}'
  readOnly="true">
</select>

Common SimpleTags except for

<Form>

<modal>

<rem>

recordId

String

Specify an ID of an existing record to extend. When using, do not forget to specify a table (use the tableName attribute). See the example code for the <rem> SimpleTag.

Code Block

language	xml
theme	Eclipse
title	recordId

<rem modelId="{data.model_id}" tableName="{data.table_name}" recordId ="{data.record_id}" />

<rem>

redirectTo

String

Specify the path to redirect a user to the service portal after successful authorization.

reportId

String

Specify the report ID for viewing

Specify a placeholder for a text field

.

Code Block

title
language	xml

placeholder

reportId

<textarea

<report

model

reportid="{data.

name

monthBarReportId}"

label="Name" placeholder="{data.namePlaceholderText}"> </textarea>

readOnly

Boolean

 condition="(group.nameLIKEdesk^state=active)" />

save

Sting

Add a Save button on the form with the customized text (see the code example below).

It makes sense to use this attribute when it is impossible to use the UI actions due to any reasons (the uiActions attribute is equal to false).

<Form>

saveButtonCaption

String

Specify a text displayed on the Save button on the portal form

To make a fiels read-only, set the attribute value equal to 'true'

.

Code Block

language	xml

<select model="data.state" label="{data.stateTitle}" options='[
      {"database_value": "registered", "display_value": "Registered"},
      {"database_value": "open", "display_value": "Open"},
      {"database_value": "in_progress", "display_value": "In Progress"}]' value='{"database_value": ""}'
  readOnly="true">
</select>

All Simple Tags (except for Portal Tags, <attachment>

<rem>

<remform>)

recordId

StringSpecify a record ID for the extention. When using, do not forget to specify a table (use the tableName attribute for this). See the example code for the <rem> SimpleTag

theme	Eclipse
title	saveButtonCaption

<remform modelId="{data.model_id}" isPortal="true" tableName="rem_table" saveButtonCaption="Save" />

<remform>searchUrlString

Specify the URL path that determines which page the user will be redirected to after clicking the Search button.

searchQuery

String

Add a search bar initial value.

searchQuery

String

Add a search bar to perform search requests and display results.

showTitle

Boolean

To enable the title displaying, set the attribute value equal to true.

size

String

Specify the search bar size. Available values:

lg (large)
sm (small)

size

String

Specify the dropdown menu size by selecting from the predefined options:

low (224px)
large (464px)

shortDescription

String

Add a short description for the card.

<card>

stateColumn

String

Specify a table column that contains item states.

style

String

Specify the display settings (size, font, color, and others.) of the tag elements using the CSS syntax.

Code Block

language	xml

themeEclipse

title

recordId<rem modelId

style

<textarea
  model="

{

data.

model_id}" tableName="{data.table_name}" recordId ="{data.record_id}" />

<rem>

notes"
  label="Notes"
  style="height: 328px; width: 100%; padding: 32px 64px 40px 64px;">
</textarea>

Common SimpleTags except for

<Form>

subjectColumn

StringSpecify a table column that contains item subjects.

svg/img

StringSpecify the code of the SVG file with the pre-decoded image or a link to the image.

<card>

sysId

reportId

String

Specify the

report ID for viewing.

Code Block

language	xml
title	reportId

<report reportid="{data.monthBarReportId}" condition="(group.nameLIKEdesk^state=active)" />

saveButtonCaption

StringSpecify a text displayed on the Save button on the portal form

ID of the table record. The table should be specified first via the tableName attribute. If the <activityFeed> tag is specified near the <Form> tag, the value of this attribute is populated automatically with the value from the relevant <Form> attribute.

<Form>

tableId

String

Specify the table ID that the tag refers to.

tableName

String

Specify the table title that the tag refers to.

Code Block

language	xml

theme

title

Eclipse

tableName

title

linenumbers

saveButtonCaption

<remform modelId="{data.model_id}" isPortal="true" tableName="rem_table" saveButtonCaption="Save" />

style

String

true

<reference
  isFixed="true"
  isMandatory="true"
  condition="(state!=10)"
  label="Incident"
  model="data.incident_id"
  tableName="itsm_incident">
</reference>

<Form>

<list>

<rem>

title

String

Specify the modal window or search title

Specify the display settings (size, font, color, and etc.) of the widget elements using the CSS syntax

.

Code Block

title
language	xml

style

isShow

<textarea

<modal

model

  title="{data.

notes

modalTitle}"

label="Notes" style="height: 328px; width: 100%; padding: 32px 64px 40px 64px;"> </textarea>

All Simple Tags (except for <attachment>

<button>)

tableId

Big Integer

Specify the referenced dictionary by its ID.

  isShow="{data.isShow}"
</modal>

<modal>

titleHide

Boolean

Set to true to show the form title by default.

<Form>

top

Integer

Specify the number of first matches to display in the search autosuggestion.

transparent

Boolean

Set this attribute to true to change the style of the list and make its background transparent.

tsGroupId

String

Enter an ID of the table group to specify the search area. Find the necessary information in the Text Search Group (ts_group) table.

UiActions

Boolean

Set this attribute value to true to make UI actions available to use. Otherwise, their usage is prohibited (except for the Save button specified by the save attribute).

<Form>

url

String

Specify a URL that defines the page for this card.

<card>

user

String

Specify a column that contains the information about the item originator (for more details, see the example below).

useSourceUrl

Boolean

Set to true to keep the original URL after a redirect if the user has not previously logged in.

Note
If the attribute value is true, it is a higher priority than the redirectTo attribute value.

tableName

String

Specify the referenced dictionary.

Code Block

language	xml
title	tableName
linenumbers	true

<reference
  isFixed="true"
  isMandatory="true"
  condition="(state!=10)"
  label="Incident"
  model="data.incident_id"
  tableName="itsm_incident">
</reference>

<list>

<rem>

title

String

Specify the modal window title.

Code Block

language	xml
title	isShow

<modal
  title="{data.modalTitle}"
  isShow="{data.isShow}"
</modal>

<modal>

value

String (Array for the <list> tag)

Specify the default value for a field.

Code Block

language	xml
title	value

<checkbox
  model="data.locked_out"
  label="{data.lockedOutLabel}"
  value="true">
</checkbox>

Code Block

language	xml
theme	Eclipse
title	List

<list label="Configuration Item" model="data.element" tableName="cmdb" isMandatory="true" condition="{data.condition}" value='[{"database_value":"

","display_value":""},{"database_value":"

1","display_value":"First"},{"database_value":"2","display_value":"Second"}]'></list>

All Simple Tags (

Common SimpleTags except for

)

values

StringArray

Specify the default value for a field.

Code Block

language	xml
title	values

<multiselect model="data.values" canExcludeAll="true" values='["1", "2"]' options='[{"database_value":"","display_value":""},{"database_value":"1","display_value":"First"},{"database_value":"2","display_value":"Second"}]'><

/multiselect>

/multiselect>

view

String

Define a view name of the table, for example, Default.

<Form>

wrapBooleanSet this attribute to true to set up the quick view.<previewList>

Event-related attributes

Attribute

Description

event-change

Specify the actions performed when the change event occurs.

Code Block

language	xml

<string
  model="data.lastname"
  event-change="s_widget_custom.updateFullname();">
</string>

event-click

Specify the actions that should be performed when the click event occurs.

Code Block

language	xml

<button event-click="window.s_widget_custom.close();">
    {data.closeTitle}
</button>

onChange

Specify a function called when the value is changed. Set the attribute value to the custom s_widget_custom method created in the client script.

Info
The attribute is applied to the <durationinput> and <search> tags instead of event-change.

Widget data input and output

A widget template The client controller components:

Template specifies specifies the widget view and the way it displays with in HTML format. It also allows end-users to input and to interact with data.
Client script runs a JS script on the client-side, so that it . It receives data from the server-side, processes data before rendering, then passes it to the widget template. Also, the client script passes the input data input received to the server-side.

In the widget template scripts, use data input fields for passing the data values to a widget for any purpose. The client script uses the data object to access data received form the server dataside. After processing data by the client script processed the data, invoke the the s_widget.serverUpdate() method to send the data to the server controller. When calling this method, the server script data object script data object automatically overwrites the client controller data objectcontroller data object.

Input and output fields

Widget elements can be defined as input fields and manage the input data in the way you wantInput fields are widget elements. You can manage the entered data according to your purposes.

The code below implements data input using the model widget tag attribute, then after the data gets updated on the client-side, this value passes to the <h1> header.

Code Block

language	xml
theme	Eclipse
title	HTML
linenumbers	true

<string model="data.input">
</string>
<h1>
	{data.input}
</h1>

The <string> field is a text field that allows a user to enter some text information. The <h1> header dynamically displays this text with the {data.input} object.

Multiple data output

The examples below describe how to place the values into two fields and output the joined value of them formatted with "h1 header" style in two different ways.

Example 1

Code Block

language	xml
theme	Eclipse
title	Template
linenumbers	true

<string model="data.lastname" event-change=";(( ) => { 
	const lastname = s_widget.getFieldValue('lastname') || ''; 
	const firstname = s_widget.getFieldValue('firstname') || ''; 
	s_widget.setFieldValue('fullname', lastname + ' ' + firstname) 
} )();">
</string> 
<string model="data.firstname" event-change=";( () => { 
	const lastname = s_widget.getFieldValue('lastname') || ''; 
	const firstname = s_widget.getFieldValue('firstname') || ''; 
	s_widget.setFieldValue('fullname', lastname + ' ' + firstname) 
})();">
</string>
<h1>{data.fullname}</h1>

Example 2

Code Block

language	js
theme	Eclipse
title	Client script
linenumbers	true

;(() => { 
	window.s_widget_custom = window.s_widget_custom || {}; 
	window.s_widget_custom.updateFullname = function() { 
		const lastname = s_widget.getFieldValue('lastname') || ''; 
		const firstname = s_widget.getFieldValue('firstname') || ''; 
		s_widget.setFieldValue ('fullname2', lastname + ' ' + firstname) 
	} 
} )();

Code Block

language	xml
theme	Eclipse
title	Template
linenumbers	true

<string 
	model="data.lastname" 
	event-change="s_widget_custom.updateFullname();">
</string> 
<string 
	model="data.firstname" 
	event-change="s_widget_custom.updateFullname();">
</string> 
<h1>{data.fullname2}</h1>

Table of Contents

absoluteUrl	true

Page tree

Versions Compared

Old Version 5

New Version Current

Key

Attribute types

Configuration attributes

Event-related attributes

Widget data input and output

Input and output fields

Multiple data output