W
hen creating a widget, define its form, fields, and its behaviour by using the template elements to specify the way it displays with HTML and Widget Attributes. Widget templates also allow end-users to input data and interact with it. Apply HTML tags and React components to add and control elements such as buttons and various types of fields.
Adds a widget that allows attaching files to a record.
Code Block |
---|
|
<attachment model="data.attachments"></attachment> |
Use this attribute to add a button to your widget form. The element is similar to the React component.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<button event-click="window.s_widget_custom.showDropdown()">
Toggle dropdown
</button> |
This element allows adding and configuring the checkbox field.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<checkbox model='data.check'></checkbox> |
The element adds a text field with the code formatting.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<codemirror model="data.mirror"></codemirror> |
A condition...
The following attributes are applicable:
- data-table - connection with a table by its name.
- data-table_id - connection with a table by the ID.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<conditions model="data.conditions"
data-table="itsm_incident"
data-table_id="155964310500000569">
</conditions> |
The element provides a data input of the datetime format.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<datetimeinput model="data.datetime"> |
The element adds a field that allows selecting days of week.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<daysofweek model="data.daysofweek"></daysofweek> |
The tag adds a field counting the time duration.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<duration model="data.duration"></duration> |
Text input field in html format along with text formatting options.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<htmlinput model="data.htmlinput"></htmlinput> |
A modal window solution.
The following attributes are applicable:
- title - a modal window title.
- isShow -
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<modal model="data.modal" title="Modal Label" isShow="true"> |
Provides multiple choice selection for widgets.
The following attributes are applicable:
- values - specify values for the selection.
- options - matches database values with what will be displayed.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<multiselect model="data.values" values='["1", "2"]' options='[{"database_value":"","display_value":""},{"database_value":"1","display_value":"Первый"},{"database_value":"2","display_value":"Второй"}]'></multiselect> |
This element adds a reference field to a widget for establishing connections with data tables by a custom reference.
The following attributes are applicable:
- data-table - connection with a table by its name.
- condition -
- isFixed -
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<reference model="data.element" data-table="cmdb" condition="(sys_id=123456789012345678)" isFixed="true"></reference> |
Add this SimpleTag to display a particular report.
Specify the reportID attribute of this element to display the report with the appropriate ID.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<report reportid="123456789012345678"/> |
A field that allows selecting items.
The following attributes are applicable:
- options - matches database values with what will be displayed.
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<select model="data.select"
options='[{ "database_value": "1", "display_value": "Test" },
{ "database_value": "2", "display_value": "Test 2" }]'>
</select> |
In a widget, use this attribute to designate an input field for text information. The element is similar to the react component:
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<stringinput model="data.input"></stringinput> |
<textarea>
A multi-line text field. The element is similar to the react component:
Code Block |
---|
language | xml |
---|
title | Example |
---|
linenumbers | true |
---|
|
<textarea model="data.textarea"></textarea> |