Versions Compared

Key

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

When creating a widget, define its form, fields, and their behaviour by behavior using the template elements to specify the widget view and the way it displays is displayed with HTML and and Widget Attributes. The widget template also allows end-users to input enter data and interact with it. Apply You can apply HTML tags and React components to add and control elements such as buttons and various types of fields.   

<activityfeed>

description goes here

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

<authfull> ON HOLD

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

The following attributes are applicable:

Регистрация (булево, ложь)
Переключение языков (булево, верно)
Логотип (указание на изображения из галереи)
Запомнить меня (булево, ложь)
Восстановление пароля (булево, ложь)
Настраиваемая валидация данных в строке с именем пользователя
Настраиваемая валидация данных в строке с пароле
Code Block
languagexml
titleExample
linenumberstrue
there was text here. it's gone now.

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

Code Block
languagexml
titleExample
linenumberstrue
there was text here. it's gone now.

<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}.
Code Block
languagexml
titleExample
linenumberstrue
there was text here. it's gone now.

<card>

* img - Иконка (svg) не ссылка, а код svg
* url - Ссылка на которую перейдем при клике на карточку
* name - Заголовок
* short_description - Описание
* button_name - Текст на кнопке
Code Block
languagexml
titleExample
linenumberstrue
<getlist table_name="sys_service_portal">
<card></card>
</getlist>

<dropdown_widget>

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 -
Code Block
languagexml
titleExample
linenumberstrue
<dropdown_widget model="data.menu"></dropdown_widget>
Code Block
languagexml
titledropdown_widget model example
linenumberstrue
collapsetrue
; (() => {
    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 recieved 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.

    Info

    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.

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

    <getlist>

    Виджет для получения списка из АПИ и прокидывания результатов в дочерний виджет.
    Code Block
    languagexml
    titleExample
    linenumberstrue
    there was text here. it's gone now. 

    <list>

    A field 

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

    <news>

    Displays a newsfeed or an announcement list that is generated by the data object recieved 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.
    Code Block
    languagexml
    titleExample
    linenumberstrue
    <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>

    <search>

    A Search widget component responsible for search functionality.

    The following attributes are applicable:

    • search_url - a URL suffix.
    • 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 - text inside the search field.
    Code Block
    languagexml
    titleExample
    linenumberstrue
    <search search_url=‘/search’ show_title=true size=‘lg’ greeting=‘hello’ placeholder=‘Enter text here’/>

    <sidemenu>

    This element adds a side-menu.

    Code Block
    languagexml
    titleExample
    linenumberstrue
    there was text here. it's gone now. 
    Table of ContentsclassfixedPosition