View Source

When creating a widget, define its form, fields, and their behaviour by using the template elements to specify the widget view and the way it displays with HTML and Widget Attributes. The widget template also allows 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.

<activityfeed>

description goes here

<activityfeed table_name="itsm_incident" 
sys_id="157322330317307618"></activityfeed>

<authfull>

An Authorisation widget component that contains full functionality of the user authorization including form of registration. It also supports configurable validation in strings containing user login and password.

The following attributes are applicable:

Attribute	Type	Default value	Description
isRegistration	Boolean	False	This attribute is responsible for specifying whether this is a new user registration or not. To register a new user, make this attribute equal to "true".
isSwitchLang	Boolean	True	This attribute is responsible for ability of user locale switching on authorization page. If this attribute is equal to 'false', then the user will not be able to change the interface language, and will use the default system language.
isRememberMe	Boolean	False	This attribute is responsible for specifying whether should user credentials be saved on this computer or not. To save the credentials, make this attribute equal to "true".
logo	String	''	Absolute path to the logo displayed on authorization page. For example: https://example.com/logo.png
isResetPassword	Boolean	False	This attribute is responsible for specifying whether this request is to reset user password, To request resetting, make this attribute equal to "true".

<authfull redirectTo="/portal" isRegistration="true" isSwitchLang="true" isRememberMe="false" isResetPassword="true"></authfull>

<authheader>

A part of a header that displays a user's name and avatar, or prompts them to log in if they haven't already. The following attributes are applicable:

profileURL - specify the path to the portal section containing the personal pages.
- If specified, then the Profile item is available in the User Menu at the top right
- If not specified, then this item is not available, and user won't be able to watch his profile.

<authheader profileURL="/portal/cabinet">

<breadcrumbs>

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

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

{sys_id, title, url}.

there was text here. it's gone now.

<card>

* img - Иконка (svg) не ссылка, а код svg
* url - Ссылка на которую перейдем при клике на карточку
* name - Заголовок
* short_description - Описание
* button_name - Текст на кнопке

<getlist table_name="sys_service_portal">
<card></card>
</getlist>

<category>

This widget is a component that displays portal categories and items structure. It interacts with some other widgets, like <breadcrumbs> or <sidemenu> widgets.

The following attributes are applicable:

Attribute	Type	Description
nodeId	Big Integer	Portal node name.
categorySubject	String	Specify a table field containing category titles.
categoryDescription	String	Specify a table field containing category descriptions.
itemSubject	String	Specify a table field containing item titles.
itemDescription	String	Specify a table field containing item descriptions.
categoryIcon	String	Specify a table column containing category icons. This attribute is not mandatory.
itemIcon	String	Specify a table column containing item icons. This attribute is not mandatory.

<Category nodeId="158766114011088368" categorySubject="name" categoryDescription="short_description" itemDescription="vendor" itemSubject="city"></Category>

<dropdownMenu>

Creates a dropdown menu with menu elements on any nesting level.

The following attributes are applicable:

size - (может быть low = __ px ? / medium = __ px ? / large = __ px ?).
event -
event_to_display -
isShow - this attribute of a Boolean type is responsible for menu displaying
doClose - this attribute of a Function type is a method of an additional action when the menu closes.

<dropdownMenu model="data.menu"></dropdownMenu>

; (() => {
    data.menu = {
        "menu": {
    "size": "low",
    "event_to_display": [
        "click"
    ],
    "sections": [
        {
            "order": "1",
            "elements": [
                {
                    "title": "Text",
                    "order": "1",
                    "event_to_display": ["click"],
                    "events": {
                        "click": "runScript()"
                    },
                    "child_elements": [
                        {
                            "title": "Text22",
                            "event_to_display": ["click"],
                            "events": {
                                "click": "runScript()"
                            },
                            "child_elements": [
                            {
                            "title": "Text2",
                            "event_to_display": ["click"],
                            "events": {
                                "click": "runScript()"
                            },
                            "child_elements": []
                        }
                            ]
                        }
                    ]
                },
                {
                    "title": "Title",
                    "order": "2",
                    "event_to_display": ["click"],
                    "events": {
                        "click": "runScript()"
                    },
                    "child_elements": [
                        {
                            "title": "Text2",
                            "event_to_display": ["click"],
                            "events": {
                                "click": "runScript()"
                            },
                            "child_elements": []
                        }
                    ]
                }
            ]
        },
        {
            "order": "2",
            "elements": [
                {
                    "title": "Text",
                    "order": "1",
                    "event_to_display": ["click"],
                    "events": {
                        "click": "runScript()"
                    },
                    "child_elements": []
                }
            ]
        }
    ]
}
    }
})();

<form>

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

table - specifies a name of the table, e.g. "sys_cmdb_ci".
view - defines a name of the table template view, e.g. "record", "list", etc.
(optional) sys_id - an ID of the form.

(optional) buttons - form UI actions including buttons and other graphical elements.

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

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

Specify these options separating them with the coma.

<form table="name_table" view="name_view" 
sys_id="sys_number" buttons="header, bottom, link">
</form>

<getlist>

Виджет для получения списка из АПИ и прокидывания результатов в дочерний виджет.

there was text here. it's gone now.

<listitems>

This widget allows displaying table items as a list view. The following attributes are applicable:

tableName- specify a table containing output elements to display. This attribute is mandatory.
listView - specify a list view to use (this view need to be created first in the UI list (sys_ui_list) dictionary). This attribute is mandatory.
view - this attribute allows us to specify the view adjustability. Available attribute options:
- adjustable - in this case, you can adjust the widget size to be able to use more than one widget on the page.
- full - when this option is specified, the widget uses all the valuable page space.
condition - specify a condition applied to the list. This attribute should contain data of the Conditions type.
choiceConditionName - this attribute is to specify columns containing data of the Choice type if you need to specify choice options in your condition.
dateConditionName - this attribute is to specify columns containing data of the Date or Date/Time type if you need to specify date ranges in your condition.
perPage - specify the number of page items. If not specified, then equal to '5'by default.
displayColumnNumber - specify a column number to open a record by clicking on it. If not specified, then equal to '1' by default.

<listitems tableName="itsm_incident" condition="" listView="Widget" choiceConditionName="state" dateConditionName="sys_created_at" perPage="25" displayColumnNumber="2"></listitems>

<news>

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

The following attributes are applicable:

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

<news model="[{ "sys_id": "159038766612804355", "subject": "test subject", "announcement_type": "1", "sys_created_at": "2020-03-04 00:00:00" },
{ "sys_id": "148038977612804360", "subject": "test subject 2", "announcement_type": "2", "sys_created_at": "2020-01-20 00:00:00" }]"></news>

<previewList>

This list view widget allows displaying table items as a customizable list.

The following attributes are applicable:

Attribute	Type	Description
tableName	String	Specify a table containing items to display on the list view.
view	String	Specify a list view name used.
elementCount	String	Specify the number of page items. If not specified, then equal to '5'by default.
subjectColumn	String	Specify a table column containing list item subjects.
dateColumn	String	Specify a table column containing dates related to list items.
stateColumn	String	Specify a table column containing list item states.
transparent	Boolean	Set this attribute to "true" to set up the full view.
wrap	Boolean	Set this attribute to "true" to set up the quick view.

<PreviewList tableName="itsm_incident" view="Widget" elementCount="2" subjectColumn="subject" dateColumn="sys_created_at" stateColumn="state" wrap="true"><ListHeader><div>Hello</div></ListHeader></PreviewList>

<search>

A Search widget component responsible for search functionality.

The following attributes are applicable:

Attribute	Type	Description
Search attributes
itemPage	String	Define a page for transition
itemView	String	Specify a page view name used to design the search page.
onChange	String	Specify a function called when clicking the Search button.
placeholder	String	A text inside the search field.
searchUrl	String	An URL suffix defining a page to redirect to after the search is completed.
searchQuery	String	Search bar initial value.
showTitle	Boolean	A boolean-type attribute with possible true or false values. It is responsible for title displaying.
size	String	Specifies the search bar size. Available values: lg (large) or sm (small).
title	String	(non-mandatory attribute) Define a custom title instead of a default one. To use a custom title, please set a showTitle attribute equal to true first.
top	Integer	How many matches should be shown.
tsGroupId	Big Integer	Enter an ID of the table group to specify the search area. You can find the necessary information in the Text Search Group (ts_group) table.
Search results attributes
itemPage	String
itemView	String	Specify a page view name used to design the search results page.
quantity	String	Specify the maximum search results amount per page.
searchQuery	String	Search bar initial value.
tsGroupId	Big Integer	Enter an ID of the table group to specify the search area.

<search search_url='search' showTitle=true size='lg' title='A custom title' placeholder='Your search request'/>

<sidemenu>

This element adds a side-menu.

<SideMenu
    parents_depth="..."
    children_depth="..."
    include_categories="..."
    include_items="..." />