Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

When a creating widget, define its form, fields, and their behavior using the Template elements . Apply to specify the widget view and the way it displays with HTML and Widget Attributes. The widget template also allows end-users to input and to interact with the data. Apply html tags and react components to place areas, control elements such as buttons and fields of the various types. 

<stringinput>

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

Code Block
languagexmltitleTemplate
<stringinput model="data.input" label="Поле для ввода значения"></stringinput>

<reference>

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

Code Block
languagexmltitleTemplate
<reference model="data.reference" data-table="itsm_incident"></reference>
SimpleTagDescription

<stringinput>

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

Code BlocklanguagexmltitleExample
<stringinput model="data.input" label="Поле для ввода значения">
</stringinput>

<reference>

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

Code Block
languagexml
titleEx.
<reference model="data.reference" data-table="itsm_incident">
</reference>

<textarea>

A multi-line text field. The element is similar to the react component:

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

<button>

Use this attribute to add a button to your widget form. The element is similar to the react component:

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


<select>

Adds a field for items selecting.

Code Block
languagexml
title
Ex.
linenumberstrue
<select model="data.select" 
options='[{ "database_value": "1", "display_value": "Test" },
 { "database_value": "2", "display_value": "Test 2" }]'>
</select>


<checkbox>

This element allows adding and configuring the checkbox field.

<conditions>

A condition field

Code Block
languagexml
titleEx.
linenumberstrue
<conditions model="data.conditions" 
data-table="itsm_incident" 
data-table_id="155964310500000569">
</conditions>

<template>

поле Template

Code Block
languagexml
titleEx.
linenumberstrue
<template model="data.template" 
data-table="itsm_incident" 
data-table_id="155964310500000569"></template>


<list>

A field 

Code Block
languagexml
titleEx.
linenumberstrue
<list model="data.list" data-table="itsm_incident" 
data-table_id="155964310500000569">
</list>


<getlist>

<datetimeinput>

The element provides a data input of the datetime format. 

<htmlinput>

Text input field in html format along with text formatting options.

<modal>

модальное окно

<authfull>

An Authorisation widget component that contains full functionality of the user authorization including form of registration.

<authheader>

<attachment>

dscr

Code Block
languagexml
titleEx.
<attachment model="data.attachments"></attachment>

<activityfeed>

dscr

Code Block
languagexml
titleEx.
linenumberstrue
<activityfeed table_name="itsm_incident" 
sys_id="157322330317307618"></activityfeed>


<search>

A Search widget component responsible for search functionality. Configure this SimpleTag with the attributes below:

  • search_url - Ссылка на которую перейдем при поиске
  • show_title - a boolean-type attribute with possible true or false values. It is responsible for title displaying.
  • size - specifies the title size with the lg (large) or sm (small) values.
  • greeting - a message shown to a user.
  • placeholder - a text inside the search field.

<dropdown_widget_items>

dscr

Code Block
languagexml
titleEx.
linenumberstrue
<dropdown_widget_items> 
	<span event-click="window.s_widget_custom.alert()">
	Test 1
	</span> 
	<span>
	<a href="/test" target="_blank">Test 2</a>
	</span> 
</dropdown_widget_items>


<dropdown_widget>

dsxr 

Code Block
languagexml
titleEx.
linenumberstrue
<dropdown_widget id="some_dd_id"> 
	<button event-click="window.s_widget_custom.showDropdown()">
	Toggle dropdown
	</button> 
	<dropdown_widget_items> 
		<span event-click="window.s_widget_custom.alert()">
		Test 1
		</span> 
		<span>
		<a href="/test" target="_blank">Test 2</a>
		</span> 
	</dropdown_widget_items> 
</dropdown_widget>

<getlist>


<colorinput>

Add an input color field using the tag. This field allows selecting a particular color from the list of colors predefined.

<coloredtext>

<sidemenu>

This element adds a side-menu.

<codemirror>

The element adds a text field with the code formatting.

Code Block
languagexml
titleEx.
<codemirror model="data.mirror"></codemirror>

<daysofweek>

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

Code Block
languagexml
titleEx.
<daysofweek model="data.daysofweek"></daysofweek>

<duration>

The tag adds a field counting the time duration.

Code Block
languagexml
titleEx.
<duration model="data.duration"></duration>

<chart>

This tag allows adding the chart component.

<report>

Add this SimpleTag to display a particular report.

Specify the reportID attribute of this element to display the report with the appropriate ID.

<news>

Displays a newsfeed or announcement list that is generated by the data object recieved from the server script.

The tag requires the following object format:

{sys_id, subject, announcement_type, sys_created_at},

with the attributes below:

  • subject - an announcement message text.
  • announcement_type - a category of an announcement.
  • sys_created_at  - a date of the announcement was created.

<form>

The dynamic form creating component. It requires the following arguments recieved from the server script:

  1. table - specifies a name of the table, e.g. "sys_cmdb_ci".
  2. view - defines a name of the table template view, e.g. "record", "list", etc.
  3. (optional) sys_id - an ID of the form.
  4. (optional) buttons - form UI actions including buttons and other graphical elements.

    Info

    Specify the way UI actions displayed on the form with the attributes below:

    • header - on the top of the form;
    • bottom -;
    • link - as a link.

    Use the coma to separate 


Code Block
languagexml
titleEx.
linenumberstrue
<form table="name_table" view="name_view" 
sys_id="sys_number" buttons="header, bottom, link">
</form>


<breadcrumbs>

A Breadcrumbs widget component that displays a navigation chain trailing user activity.

This widget uses the object recieved from the server script to build the breadcrumbs chain with the format below:

{sys_id, title, url}.

<card>

dscr

rscr

Code Block
languagexml
titleEx.
linenumberstrue
<getlist table_name="sys_service_portal">
<card></card>
</getlist>

Table of Contents
classfixedPosition