API for displaying standard widgets (used for the "Code" widget)

Let’s see how to use this method in the Code. Here is an example of how to calculate a sum total based on the price and the amount and to display it only if the needed field doesn’t remain empty:

<%
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: 'TOTAL', 
    tooltip: 'The total is calculated  automatically', 
    readonly: true, 
    onRender: Scripts.onTotalRender,  
}) %> 

Example of using the method in the Code widget:

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

Example of using the method in the Code widget:

<%= UI.widget. groupbox({title: 'Header'}, panelContent) %>
<% $template panelContent %>  
    <div> Content of the panel will be displayed here </div> 
<% $ endtemplate %> 

A pop-up with custom content that opens when someone clicks on the trigger element. Example of using the method in the Code widget:

<% $ template panelContent %>
    <p> The pop-up’s content will be displayed  here </p> 
    <%= UI.widget.contextRow('__name', { name: 'Name' }) %> 
<% $ endtemplate %> 
<% $template popoverOpener %> 
    <button  type='button'>Open</button> 
<% $endtemplate %> 
<%= UI.widget.popover( 
     popoverOpener, 
    { 
         type: 'widgets', 
         size: 'md',  
         position: 'bottom', 
    }, 
    panelContent 
) %> 

The widget is a multi-level drop-down menu that opens after a user clicks on the trigger element. The menu items are described as an arrays in the items property of the display parameters. Example of using in the Code widget:

<% $template popoverMenuOpener %>
    <button  type='button'>Open menu</button> 
<% $endtemplate %> 
<%= UI.widget.popover(  
    popoverMenuOpener, 
    { 
         position: 'right', 
         items:  [ 
             { 
                 label: 'Menu 1', 
                 click:  function () { 
                     Scripts.onClickMenuItem('Menu 1');  
                 }, 
             }, 
             { 
                  label: 'Menu 2', 
                 click: function () {  
                     Scripts.onClickMenuItem('Menu 2'); 
                 } , 
             }, 
             { 
                 label: 'Section 1',  
                 getItems: function () { 
                     return [  
                         { 
                             label: 'Second- level menu', 
                             click: function () {  
                                 ViewContext.data.test = 'Child element 1';  
                             } 
                         },  
                     ] 
                 }, 
             }, 
         ],  
    } 
) %> 

Example of using the method in the Code widget:

<%= UI.widget. render('@custom_widget_1', {comment: 'Comment text'}) %>

Example of using the method in the Code widget:

<%= UI.widget. tabset({}, [{title: 'Tab 1', content: firstTabContent}, {title: 'Tab 2',  content: secondTabContent}]) %>
<% $template firstTabContent %> 
    <div>  The content of the first tab will be displayed here </div> 
<% $endtemplate  %> 
<% $template secondTabContent %> 
    <div> The content of the second  tab will be displayed here </div> 
<% $endtemplate %> 

Let’s see how to use this method in the Code. Here is an example of how to calculate a sum total based on the price and the amount and to display it only if the needed field doesn’t remain empty:

<%
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: 'TOTAL', 
    tooltip:  'The total is calculated automatically', 
    readonly: true, 
    readonly:  true, 
    onRender: Scripts.onTotalRender, 
}) %> 

Example of using the method in the Code widget:

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