Page History

When creating a widget, define its form, fields, and its behavior by using the template elements to specify the way it displays with HTML and Widget Attributes.

Common SimpleTags

Learn how to apply HTML tags

that add and control elements such as buttons and various types of fields. 

<attachment>

Adds a files attachment widget.

The following attributes are applicable:

<attachment model="data.attachments"></attachment>

<button>

Use this attribute to add a button to your widget form. This element behavior is similar as React does.

<button event-click="window.s_widget_custom.showDropdown()">
	Toggle dropdown
</button> 

<checkbox>

This element allows adding and configuring the checkbox field.

The following attributes are applicable:

<modal model="data.modal" isShow="{data.isShow}" doClose="window.s_widget_custom.closeModal();">
                <div class="crossCheckbox">
                    <div class="checkboxLabel">{data.onlyCrossedElements}</div>
                    <checkbox id="crossCheckbox" class="checkbox disabledCheckbox" model="data.crossCheckbox" event-change="window.s_widget_custom.crossed()"></checkbox>
                </div>
</modal>

<codemirror>

The element adds a text field with the code formatting.

The following attributes are applicable:

<codemirror model="data.mirror"></codemirror>

<conditions>

Adds the condition builder widget.

The following attributes are applicable:

<conditions model="data.conditions" tableName="itsm_incident" tableId="155964310500000569"></conditions>

<datetimeinput>

The element provides a data input of the datetime format. 

The following attributes are applicable:

<datetimeinput label="Date and Time" isMandatory="true" model="data.dueDate" beginDate="{data.beginDate} " endDate="{data.endDate}"></datetimeinput>

<daysofweek>

The element adds a field that allows selecting days of week.

The following attributes are applicable:

<daysofweek model="data.daysofweek"></daysofweek>

<duration>

The tag adds a field counting the time duration.

The following attributes are applicable:

<duration model="data.duration"></duration>

<htmlinput>

This widget adds an HTML input field with text formatting options.

The following attributes are applicable:

<htmlinput label="Description" model="data.description" isMandatory="true"></htmlinput>

<modal>

A modal window solution.

The following attributes are applicable:

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

• click
• context
• mouseOver

<modal model="data.modal" title="Modal Label" isShow="true"
doClose:
{
"click": "runScript()"
},>

<multiselect>

Provides multiple choice selection for widgets.

The following attributes are applicable:

Matches database values with what will be displayed. 

<multiselect model="data.values" values='["1", "2"]' options='[{"database_value":"","display_value":""},{"database_value":"1","display_value":"Первый"},{"database_value":"2","display_value":"Второй"}]'></multiselect>

<reference>

This element adds a reference field to a widget for establishing connections with data tables by a custom reference.

The following attributes are applicable:

<reference label="Configuration Item" model="data.element" data-table="cmdb" isMandatory="true" condition="{data.condition}"></reference>

<report>

Add this SimpleTag to display a particular report.

The following attributes are applicable:

When placing two or more conditions into the condition string, merge them with the carat symbol ( ^ ). The condition syntax will look like this:

To know more about possible condition operators, please refer to the Condition Operators article.

The 

<report reportId="123456789012345678" condition="(group=helpdesk^ORstate=active)"/>

<select>

A field that allows selecting items.

The following attribute is applicable:

<select label="Class" isMandatory="true" model="data.class" options='[{"database_value":"","display_value":""},{"database_value":"155964310500000004","display_value":"Server"},{"database_value":"155964310500000006","display_value":"Database"}]'></select>

<string>

In a widget, use this attribute to designate an input field for text information. The element is similar to the react component:

The following attributes are applicable:

<string model="data.input"></string>

<textarea>

A multi-line text field.

The following attributes are applicable:

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

Portal SimpleTags 

Learn SimpleTags that implement portal widgets.