API для отображения стандартных виджетов (применяется для виджета «Код»)

Рассмотрим, как можно применить это в виджете Код. Пример подсчёта суммы на основании цены и количества и её отображения только в том случае, если нужное поле не остаётся пустым:

<%
Scripts.calcTotal = function () {
    Context.data.total = Context.data.price && Context.data.count ? Context.data.price.multiply(Context.data.count) : undefined;
    Scripts.totalNode.style.display = Context.data.total ? '' : 'none';
}
Scripts.onTotalRender = function (node) {
    Scripts.totalNode = node;
    node.style.display = 'none';
}
%>
<%= UI.widget.contextRow('__name', { required: true }) %>
<%= UI.widget.contextRow('price', { required: true, onChange: Scripts.calcTotal }) %>
<%= UI.widget.contextRow('count', { required: true, onChange: Scripts.calcTotal }) %>
<%= UI.widget.contextRow('total', {
    name: 'ИТОГО',
    tooltip: 'Сумма подсчитана автоматически',
    readonly: true,
    onRender: Scripts.onTotalRender,
}) %>

Пример использования в виджете Код:

<%= UI.widget.contextValue('__name', {required: true}) %>

Пример использования в виджете Код:

<%= UI.widget.groupbox({title: 'Заголовок'}, panelContent) %>

<% $template panelContent %>
    <div> Здесь отобразим содержимое панели </div>
<% $endtemplate %>

Представляет собой выпадающее окно с произвольным содержимым, открывающееся после клика по элементу для открывания.

Пример использования в виджете Код:

<% $template panelContent %>
    <p> Здесь отобразим содержимое выпадающего окна </p>
    <%= UI.widget.contextRow('__name', { name: 'Название' }) %>
<% $endtemplate %>

<% $template popoverOpener %>
    <button type="button">Открыть</button>
<% $endtemplate %>

<%= UI.widget.popover(
    popoverOpener,
    {
         type: 'widgets',
         size: 'md',
         position: 'bottom',
    },
    panelContent
) %>

Представляет собой выпадающее многоуровневое меню, открывающееся после клика по элементу для открывания. Пункты меню описываются массивом в свойстве items параметров отображения.

Пример использования в виджете Код:

<% $template popoverMenuOpener %>
    <button type="button">Открыть меню</button>
<% $endtemplate %>

<%= UI.widget.popoverMenu(
    popoverMenuOpener,
    {
         position: 'right',
         items: [
             {
                 label: "Меню 1",
                 click: function () {
                     Scripts.onClickMenuItem('Меню 1');
                 },
             },
             {
                 label: "Меню 2",
                 click: function () {
                     Scripts.onClickMenuItem('Меню 2');
                 },
             },
             {
                 label: "Раздел 1",
                 getItems: function () {
                     return [
                         {
                             label: "Меню второго уровня",
                             click: function () {
                                 ViewContext.data.test = 'Дочерний элемент 1';
                             }
                         },
                     ]
                 },
             },
         ],
    }
) %>

Пример использования в виджете Код:

<%= UI.widget.render('@custom_widget_1', {comment: "Некоторый текст комментария"}) %>

Пример использования в виджете Код:

<%= UI.widget.tabset({}, [{title: 'Вкладка 1', content: firstTabContent}, {title: 'Вкладка 2', content: secondTabContent}]) %>

<% $template firstTabContent %>
    <div> Здесь отобразим содержимое первой вкладки </div>
<% $endtemplate %>

<% $template secondTabContent %>
    <div> Здесь отобразим содержимое второй вкладки </div>
<% $endtemplate %>

Рассмотрим, как можно применить это в виджете Код. Пример подсчёта суммы на основании цены и количества и её отображения только в том случае, если нужное поле не остаётся пустым.

<%
Scripts.calcTotal = function () {
    ViewContext.data.total = ViewContext.data.price && ViewContext.data.count
    ? ViewContext.data.price.multiply(ViewContext.data.count)
    : undefined;
    Scripts.totalNode.style.display = Context.data.total ? '' : 'none';
}
Scripts.onTotalRender = function (node) {
    Scripts.totalNode = node;
    node.style.display = 'none';
}
%>
<%= UI.widget.viewContextRow('__name', { required: true }) %>
<%= UI.widget.viewContextRow('price', { required: true, onChange: Scripts.calcTotal }) %>
<%= UI.widget.viewContextRow('count', { required: true, onChange: Scripts.calcTotal }) %>
<%= UI.widget.viewContextRow('total', {
    name: 'ИТОГО',
    tooltip: 'Сумма подсчитана автоматически',
    readonly: true,
    onRender: Scripts.onTotalRender,
}) %>

Пример использования в виджете Код:

<%= UI.widget.viewContextValue('__name', {required: true}) %>