Page History

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

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

Attribute

Type

Description

Available in

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

buttonType

String

Specify

a

the button style for forms and lists.

The disabled buttons appear in gray.

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
icon-mini – is a small button that provides extra information when moving the pointer over it or clicking it. See the example below:

Image Added

Code Block

language	xml
theme	Eclipse
title	buttonType

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

canExcludeAll

Boolean

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

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

Specify the attribute to add the button for creating a new record.

<list>

class

String

Define the CSS styles classes description.

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

<rem>

<sidemenu>)

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>

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

<datetime model="data.dueDate" label="data.dueDateTitle" isMandatory="true" isVisible="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();

fixedCondition

String

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

isFixed

Boolean

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

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>

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

Boolean

Enable 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

Boolean

Disable the client scripts execution in a form.

<rem>

isVisible

Boolean

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

Code Block

language	xml
title	isVisible

<string
  model="data.additionalComment"
  isVisible="{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

String

Use 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='[{ "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>

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>

readOnly

Boolean

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

String

Specify 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.

Code Block

language	xml
theme	Eclipse
title	recordId

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

<rem>

reportId

String

Specify the report ID for viewing.

Code Block

language	xml
title	reportId

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

saveButtonCaption

String

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

Code Block

language	xml
theme	Eclipse
title	saveButtonCaption

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

style

String

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

Code Block

language	xml
title	style

<textarea
  model="data.notes"
  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.

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 (except for Portal Tags

<rem>

<remform>)

values

String

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>

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>

Widget data input and output

A widget template components:

Template specifies the widget view and the way it displays with HTML. 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 receives data from the server-side, processes data before rendering, then passes it to the widget template. Also, the client script passes the data input received to the server-side.

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

Input and output fields

Widget elements can be defined as input fields and manage the input data in the way you want.

The code below implements data input using the model widget 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 6

New Version 7

Key

Attribute types

Configuration attributes description

Event-related attributes

Widget data input and output

Input and output fields

Multiple data output