When creating a widget, 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 widgets.

Configuration attributes description

AttributeTypeDescriptionAvailable in

beginDate

String

Specify a minimum possible date for a field.

beginDate
<datetime model="data.dueDate" label="data.dueDateTitle" isMandatory="true" beginDate="{data.beginDate}" endDate="{data.endDate}"></datetime>
Server Script
const nowDate = new SimpleDateTime();
data.beginDate = nowDate.getDate();
nowDate.addDays(3);
data.endDate = nowDate.getDate();
<datetime>

buttonType

String

Specify a button displaying style for forms and lists. 

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

canExcludeAll

Boolean

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

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>
canReadBooleanSpecify the attribute to make the referred dictionary available 

<list>

<reference>

canCreateBoolean

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

<list>

<reference>

class

String

Define CSS styles classes description.

Define the attribute it in the Template field of the widget. Then, it should be described in the CSS field.

class
<button
  id="addBtn"
  class="button disable"
  event-click="window.s_widget_custom.addParticipants()">
  {data.createCABbuttonTitle}
</button>
CSS 
.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 Tages <attachment>

<button>

 <rem>

 <remform>

<sidemenu>)

condition

String

Specify the condition. It is an equivalent of Reference Qualifier in the agent interface.

isFixed
<reference
  isFixed="true"
  condition="{data.condition}"
  label="{data.instanceTitle}"
  tableName="sys_cmdb_ci_instance"
  model="data.instance"
  event-change="s_widget_custom.instanceSelected();">
</reference>
Server Script
if (!!input.tableName && !!input.caller) {
  data.condition =
    `owned_by=${input.caller}^ORDERBYDESCsys_created_at`;
}

<list>

<listitems>

<previewList>

<reference>

<report>

doClose

Function

Specify function that will be executed when the modal window is close.

doClose
<modal
  isShow="{data.isShow}"
  doClose="window.s_widget_custom.countClosing();">
</modal>
Client Script
window.s_widget_custom.countClosing = function () {
  window.closeCount = window.closeCount + 1 || 1
  s_widget.setFieldValue('isShow', false);
}

<checkbox>

<dropdownMenu>

<modal>


endDate

String

Specify a maximum possible date for a field.

beginDate
<datetime model="data.dueDate" label="data.dueDateTitle" isMandatory="true" isVisible="true" beginDate="{data.beginDate}" endDate="{data.endDate}"></datetime>
Server Script
const nowDate = new SimpleDateTime();
data.beginDate = 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

isFixed

Boolean

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

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

<list>

<reference>

isMandatory

Boolean

Enable setting a mandatory status to a field. For this, set the attribute equal to '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": ""}' isMandatory="true">
</select>

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

<button>

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

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


<checkbox>

<dropdownMenu>

<modal>


isUserScripts

BooleanDisable the client scripts execution in a form. 

<rem>

<remform>

isVisible

Boolean

Disable the visibility of a widget. The attribute is equal to 'true' by default.

isVisible
<string
  model="data.additionalComment"
  isVisible="{data.showComment}">
</string>
All Simple Tags (except for <attachment>)

label

String

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

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

All Simple Tags (except for <attachment>

<button>

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

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

All Simple Tags  (except for <attachment>

<button>

<modal>

<rem>

<remform>) and <dropdownMenu>

modelId

StringThis attribute allows to specify Record Extended Model ID when configuring a form extension.

<rem>

<remfrom>

options

Array

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

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

<select>

<multiselect>

placeholder

String

Specify a placeholder for a text field.

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

<datetime>

<select>

<string>

<search>

<textarea>

readOnly

Boolean

Allow setting a read-only status to a field. For this, set it equal to 'true'.

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

<button>

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

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

<activityFeed>

<attachment>

<rem>

<remform>

reportId

String

Specify the report ID for viewing.

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

<report>



saveButtonCaption

String

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

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

style

String

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

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.

<conditions>

<template>

tableName

String

Specify the referenced dictionary.

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

<activityFeed>

<attachment>

<conditions>

<list>

<listitems>

<previewList>

<reference>

<rem>

<remform>

<template>

title

String

Specify the modal window title.

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

<checkbox>

<modal>

<search>


value

String (Array for the <list> tag)

Specify the default value for a field.

value
<checkbox
  model="data.locked_out"
  label="{data.lockedOutLabel}"
  value="true">
</checkbox>
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

<attachment>

<button>

<multiselect>

<rem>

<remform>)


values

String

Specify the default value for a field.

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>

<checkbox>

<multiselect>

Event-related attributes

AttributeDescription

event-change

Specify the actions performed when the change event occurs.

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

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

Widget data input and output

A widget template components:

  1. Template specifies the widget view and the way it displays with HTML. It also allows end-users to input and to interact with data.
  2. 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.

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

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

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


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

  • No labels

© 2019-2023, SimpleOne

https://simpleone.ru