Template Language </a></li><li><a href="/topics/templates2.html" aria-current="page" class="active sidebar-link">Template Language </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/topics/templates2.html#page-construction" class="sidebar-link">Page construction </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/topics/templates2.html#template-engine" class="sidebar-link">Template engine </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#create-pages" class="sidebar-link">Create pages </a></li></ul></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#logicor-template-language" class="sidebar-link">Logicor template language </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/topics/templates2.html#logicor-overview" class="sidebar-link">Logicor overview </a></li></ul></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#logicor-function-classification" class="sidebar-link">Logicor function classification </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/topics/templates2.html#operations-on-variables" class="sidebar-link">Operations on variables: </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#navigational-operations" class="sidebar-link">Navigational operations: </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#data-manipulation" class="sidebar-link">Data manipulation: </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#data-presentation" class="sidebar-link">Data presentation: </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#accepting-of-data" class="sidebar-link">Accepting of data: </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#data-formatting-elements" class="sidebar-link">Data formatting elements: </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#form-elements" class="sidebar-link">Form elements: </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#operations-on-code-blocks" class="sidebar-link">Operations on code blocks: </a></li></ul></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#logicor-function-references" class="sidebar-link">Logicor function references </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/topics/templates2.html#address" class="sidebar-link">Address </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#addresstoid" class="sidebar-link">AddressToId </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#addtoolbutton" class="sidebar-link">AddToolButton </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#and" class="sidebar-link">And </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#appparam" class="sidebar-link">AppParam </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#arraytosource" class="sidebar-link">ArrayToSource </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#binary" class="sidebar-link">Binary </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#button" class="sidebar-link">Button </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#calculate" class="sidebar-link">Calculate </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#chart" class="sidebar-link">Chart </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#cmptime" class="sidebar-link">CmpTime </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#code" class="sidebar-link">Code </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#codeasis" class="sidebar-link">CodeAsIs </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#data" class="sidebar-link">Data </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#custom" class="sidebar-link">Custom </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#datetime" class="sidebar-link">DateTime </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#dbfind" class="sidebar-link">DBFind </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#div" class="sidebar-link">Div </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#ecosysparam" class="sidebar-link">EcosysParam </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#em" class="sidebar-link">Em </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#forlist" class="sidebar-link">ForList </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#form" class="sidebar-link">Form </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#getcolumntype" class="sidebar-link">GetColumnType </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#gethistory" class="sidebar-link">GetHistory </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#getvar" class="sidebar-link">GetVar </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#hint" class="sidebar-link">Hint </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#if" class="sidebar-link">If </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#image" class="sidebar-link">Image </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#imageinput" class="sidebar-link">ImageInput </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#include" class="sidebar-link">Include </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#input" class="sidebar-link">Input </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#inputerr" class="sidebar-link">InputErr </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#inputmap" class="sidebar-link">InputMap </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#jsontosource" class="sidebar-link">JsonToSource </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#label" class="sidebar-link">Label </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#langres" class="sidebar-link">LangRes </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#linkpage" class="sidebar-link">LinkPage </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#map" class="sidebar-link">Map </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#menugroup" class="sidebar-link">MenuGroup </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#menuitem" class="sidebar-link">MenuItem </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#money" class="sidebar-link">Money </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#or" class="sidebar-link">Or </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#p" class="sidebar-link">P </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#qrcode" class="sidebar-link">QRcode </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#radiogroup" class="sidebar-link">RadioGroup </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#range" class="sidebar-link">Range </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#select" class="sidebar-link">Select </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#settitle" class="sidebar-link">SetTitle </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#setvar" class="sidebar-link">SetVar </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#span" class="sidebar-link">Span </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#strong" class="sidebar-link">Strong </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#sysparam" class="sidebar-link">SysParam </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#table" class="sidebar-link">Table </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#transactioninfo" class="sidebar-link">TransactionInfo </a></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#varasis" class="sidebar-link">VarAsIs </a></li></ul></li><li class="sidebar-sub-header"><a href="/topics/templates2.html#app-styles-for-mobile-devices" class="sidebar-link">App styles for mobile devices </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/topics/templates2.html#layout" class="sidebar-link">Layout </a></li></ul></li></ul></li><li><a href="/topics/vm.html" class="sidebar-link">Compiler and Virtual Machine </a></li><li><a href="/topics/daemons.html" class="sidebar-link">Daemon </a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="template-language"><a href="#template-language" class="header-anchor">#</a> Template Language </h1> <ul><li><a href="#page-construction">Page construction</a> <ul><li><a href="#template-engine">Template engine</a></li> <li><a href="#create-pages">Create pages</a> <ul><li><a href="#visual-page-designer">Visual page designer</a></li> <li><a href="#applicable-styles">Applicable styles</a></li> <li><a href="#page-module">Page module</a></li> <li><a href="#language-resource-editor">Language resource editor</a></li></ul></li></ul></li> <li><a href="#logicor-template-language">Logicor template language</a> <ul><li><a href="#logicor-overview">Logicor overview</a> <ul><li><a href="#use-pageparams-to-pass-parameters-to-pages">Use PageParams to pass parameters to pages</a></li> <li><a href="#calling-contracts">Calling contracts</a></li></ul></li></ul></li> <li><a href="#logicor-function-classification">Logicor function classification</a> <ul><li><a href="#operations-on-variables">Operations on variables:</a></li> <li><a href="#navigational-operations">Navigational operations:</a></li> <li><a href="#data-manipulation">Data manipulation:</a></li> <li><a href="#data-presentation">Data presentation:</a></li> <li><a href="#accepting-of-data">Accepting of data:</a></li> <li><a href="#data-formatting-elements">Data formatting elements:</a></li> <li><a href="#form-elements">Form elements:</a></li> <li><a href="#operations-on-code-blocks">Operations on code blocks:</a></li></ul></li> <li><a href="#logicor-function-references">Logicor function references</a> <ul><li><a href="#address">Address</a></li> <li><a href="#addresstoid">AddressToId</a></li> <li><a href="#addtoolbutton">AddToolButton</a></li> <li><a href="#and">And</a></li> <li><a href="#appparam">AppParam</a></li> <li><a href="#arraytosource">ArrayToSource</a></li> <li><a href="#binary">Binary</a></li> <li><a href="#button">Button</a></li> <li><a href="#calculate">Calculate</a></li> <li><a href="#chart">Chart</a></li> <li><a href="#cmptime">CmpTime</a></li> <li><a href="#code">Code</a></li> <li><a href="#codeasis">CodeAsIs</a></li> <li><a href="#data">Data</a></li> <li><a href="#custom">Custom</a></li> <li><a href="#datetime">DateTime</a></li> <li><a href="#dbfind">DBFind</a></li> <li><a href="#div">Div</a></li> <li><a href="#ecosysparam">EcosysParam</a></li> <li><a href="#em">Em</a></li> <li><a href="#forlist">ForList</a></li> <li><a href="#form">Form</a></li> <li><a href="#getcolumntype">GetColumnType</a></li> <li><a href="#gethistory">GetHistory</a></li> <li><a href="#getvar">GetVar</a></li> <li><a href="#hint">Hint</a></li> <li><a href="#if">If</a></li> <li><a href="#image">Image</a></li> <li><a href="#imageinput">ImageInput</a></li> <li><a href="#include">Include</a></li> <li><a href="#input">Input</a></li> <li><a href="#inputerr">InputErr</a></li> <li><a href="#inputmap">InputMap</a></li> <li><a href="#jsontosource">JsonToSource</a></li> <li><a href="#label">Label</a></li> <li><a href="#langres">LangRes</a></li> <li><a href="#linkpage">LinkPage</a></li> <li><a href="#map">Map</a></li> <li><a href="#menugroup">MenuGroup</a></li> <li><a href="#menuitem">MenuItem</a></li> <li><a href="#money">Money</a></li> <li><a href="#or">Or</a></li> <li><a href="#p">P</a></li> <li><a href="#qrcode">QRcode</a></li> <li><a href="#radiogroup">RadioGroup</a></li> <li><a href="#range">Range</a></li> <li><a href="#select">Select</a></li> <li><a href="#settitle">SetTitle</a></li> <li><a href="#setvar">SetVar</a></li> <li><a href="#span">Span</a></li> <li><a href="#strong">Strong</a></li> <li><a href="#sysparam">SysParam</a></li> <li><a href="#table">Table</a></li> <li><a href="#transactioninfo">TransactionInfo</a></li> <li><a href="#varasis">VarAsIs</a></li></ul></li> <li><a href="#app-styles-for-mobile-devices">App styles for mobile devices</a> <ul><li><a href="#layout">Layout</a> <ul><li><a href="#title">Title</a></li> <li><a href="#strong-class-names">Strong-class names</a></li> <li><a href="#color">Color</a></li> <li><a href="#grid">Grid</a></li> <li><a href="#panel">Panel</a></li> <li><a href="#form-app">Form</a></li> <li><a href="#button-app">Button</a></li> <li><a href="#icon">Icon</a></li></ul></li></ul></li></ul> <h2 id="page-construction"><a href="#page-construction" class="header-anchor">#</a> Page construction </h2> <p>Weaver's Integrated Development Environment (IDE) is created using React, a JavaScript library. It has a page editor and a visual page designer. Pages are basic parts of an application, which are used to retrieve and display data from tables, create forms for receiving user input data, pass data to contracts, and navigate between application pages. Like contracts, pages are stored in the blockchain, which can ensure they are tamper-proof when loaded in the software client.</p> <h3 id="template-engine"><a href="#template-engine" class="header-anchor">#</a> Template engine </h3> <p>Page elements (pages and menus) are formed by developers in the template engine of a verification node using the template language in Weaver's page editor. All pages are constructed using the Logicor language developed by IBAX's development team. Use content/... API commands to request pages from nodes on the network. What the template engine sent as a response to this type of request is not an HTML page, but a JSON code composed of HTML tags that form a tree in accordance with the template structure. If you want to test the template engine, you can refer to the <a href="/reference/api2.html#content">content</a> API command.</p> <h3 id="create-pages"><a href="#create-pages" class="header-anchor">#</a> Create pages </h3> <p>You can use the page editor to create and edit pages, which can be found in the Pages section of Weaver's management tool. The editor can be used to:</p> <ul><li>Write the page code, highlight the keywords of the Logicor template language;</li> <li>Select and display menus on pages;</li> <li>Edit the menu page;</li> <li>Configure the permission to change pages, by specifying the contract name with permission in the ContractConditions function, or by directly specifying the access permission in Change conditions;</li> <li>Start the visual page designer;</li> <li>Preview pages.</li></ul> <h4 id="visual-page-designer"><a href="#visual-page-designer" class="header-anchor">#</a> Visual page designer </h4> <p>The visual page designer can be used to create page layouts without using interface codes in the Logicor language. With it, you can set the position of form elements and text on pages by dragging and dropping such elements, and configure the size of page blocks. It provides a set of ready-to-use blocks for presenting standard data models: with titles, forms and information panels. After creating a page in the visual page designer, you can write program logic for receiving data and conditional structure in the page editor. In the future, we plan to create a visual page designer with additional functions.</p> <h4 id="applicable-styles"><a href="#applicable-styles" class="header-anchor">#</a> Applicable styles </h4> <p>By default, pages are presented with Angular's Bootstrap Angle style. Users can create their own styles according to needs. The style is stored in the style parameter stylesheet in the ecosystem parameter table.</p> <h4 id="page-module"><a href="#page-module" class="header-anchor">#</a> Page module </h4> <p>To use a code block in multiple pages, you can create a page module to hold and embed it into the page code. Page modules can be created and edited in Weaver's Module Blocks. Like pages, editing permissions can be defined.</p> <h4 id="language-resource-editor"><a href="#language-resource-editor" class="header-anchor">#</a> Language resource editor </h4> <p>Weaver includes a mechanism for page localization using a function <strong>LangRes</strong> of the Logicor template language. It could replace language resource tags on the page with text lines corresponding to the language selected by the user in the software client or browser. You can use the short syntax <strong>$lable$</strong> instead of the <strong>LangRes</strong> function. The translation of messages in popups initiated by the contract is performed by Needle's <strong>LangRes</strong> function.</p> <p>You can create and edit language resources in the Language resources section of Weaver. A language resource consists of label names and corresponding translation of such name in different languages, as well as the corresponding two-letter language identifier (EN, ZH, JP, etc.).</p> <p>The permissions for adding and changing language resources can be defined in the same way as other tables.</p> <h2 id="logicor-template-language"><a href="#logicor-template-language" class="header-anchor">#</a> Logicor template language </h2> <p>Logicor functions provide the following operations:</p> <ul><li>Retrieving values from the database: <code>DBFind</code>, showing data retrieved from the database as tables and charts;</li> <li>Data operations for assigning and displaying variable values: <code>SetVar, GetVar, Data</code>;</li> <li>Displaying and comparing date/time values: <code>DateTime, Now, CmpTime</code>;</li> <li>Use various user data input fields to build forms: <code>Form, ImageInput, Input, RadioGroup, Select</code>;</li> <li>Verify the data in the form field by displaying error messages: <code>Validate, InputErr</code>;</li> <li>Displaying the navigation elements: <code>AddToolButton, LinkPage, Button</code>;</li> <li>Calling contracts: <code>Button</code>;</li> <li>Creating HTML page layout elements, including various tags, and choosing specific css classes: <code>Div, P, Span, etc</code>;</li> <li>Embedding and unloading images onto pages: <code>Image, ImageInput</code>;</li> <li>Displaying conditions of page layout fragment: <code>If, ElseIf, Else</code>;</li> <li>Creating multi-level menus;</li> <li>Page localization.</li></ul> <h3 id="logicor-overview"><a href="#logicor-overview" class="header-anchor">#</a> Logicor overview </h3> <p>The Logicor page template language is a functional language that allows a function calling another function <code>FuncName(parameters)</code> and nesting functions into each other. You can specify parameters without quotes, and delete unnecessary parameters.</p> <p>If the parameter contains a comma, it should be enclosed in quotes (backquotes or double quotes). If a function can only have one parameter, you can use a comma without quotes. In addition, if the parameter has an unpaired closing parenthesis, quotes should be used.</p> <p>If you put a parameter in quotes, but the parameter itself contains quotes, you can use different types of quotes or multiple quotes in the text.</p> <p>In the function definition, each parameter has a specific name. You can call the function and specify the parameters in the order of declaration, or any parameter set in any order of name: <code>Parameter_name: Parameter_value</code>. Using this method, you can safely add new function parameters without breaking compatibility with the current template:</p> <p>Functions can return texts, generate HTML elements (e.g. <code>Input</code>), or create HTML elements with nested HTML elements (<code>Div, P, Span</code>). In the latter case, a parameter with the predefined name Body is used to define the nested element. For example, nesting two divs in another div looks like this:</p> <p>To define the nested elements described in the Body parameter, the following notation can be used: <code>FuncName(...){...}</code>. Nested elements should be specified with braces:</p> <p>If you need to specify the same function multiple times in succession, you can use the dot <code>.</code> instead of writing its name every time. For example, the following are the same:</p> <p>With this language, you can assign a variable with the SetVar function and refer its value with <code>#name#</code>.</p> <p>To refer to the language resources of the ecosystem, you can use <code>$langres$</code>, where langres is the language name.</p> <p>The following variables are predefined:</p> <ul><li><code>#key_id#</code> - Account address of the current user;</li> <li><code>#ecosystem_id#</code> - Current ecosystem ID;</li> <li><code>#guest_key#</code> - Address of the guest account;</li> <li><code>#isMobile#</code> - 1, if Weaver runs on a mobile device.</li></ul> <h4 id="use-pageparams-to-pass-parameters-to-pages"><a href="#use-pageparams-to-pass-parameters-to-pages" class="header-anchor">#</a> Use PageParams to pass parameters to pages </h4> <p>Many functions support the PageParams parameter, which is used to pass parameters when redirecting to a new page. For example: PageParams: <code>"param1=value1,param2=value2"</code>. The parameter value can be a simple string or a variable with a reference value. When passing parameters to pages, a variable with the parameter name is created, e.g. <code>#param1#</code> and <code>#param2#</code>.</p> <ul><li><code>PageParams: "hello=world"</code> - The new page receives the hello parameter with world as the value;</li> <li><code>PageParams: "hello=#world#"</code> - The new page receives the hello parameter with the value of the world variable.</li></ul> <p>In addition, the Val function can get data from forms, which is specified in the redirection.</p> <ul><li><code>PageParams: "hello=Val(world)"</code> - The new page receives the hello parameter with the value of the world form element.</li></ul> <h4 id="calling-contracts"><a href="#calling-contracts" class="header-anchor">#</a> Calling contracts </h4> <p>Logicor implements contract calls by clicking the Button function in a form. Once an event is triggered, the data entered by the user in a form field on the page will be passed to the contract. If the form field name corresponds to the variable name in the data section of the contract called, the data will be automatically transferred. The Button function allows to open a modal window for the user to verify the contract execution, and initiate the redirection to the specified page when the contract is successfully executed, and pass certain parameters to the page.</p> <h2 id="logicor-function-classification"><a href="#logicor-function-classification" class="header-anchor">#</a> Logicor function classification </h2> <h3 id="operations-on-variables"><a href="#operations-on-variables" class="header-anchor">#</a> Operations on variables: </h3> <table><thead><tr><th></th> <th></th> <th></th></tr></thead> <tbody><tr><td><a href="#getvar">GetVar</a></td> <td><a href="#setvar">SetVar</a></td> <td><a href="#varasis">VarAsIs</a></td></tr></tbody></table> <h3 id="navigational-operations"><a href="#navigational-operations" class="header-anchor">#</a> Navigational operations: </h3> <table><thead><tr><th></th> <th></th> <th></th></tr></thead> <tbody><tr><td><a href="#addtoolbutton">AddToolButton</a></td> <td><a href="#button">Button</a></td> <td><a href="#linkpage">LinkPage</a></td></tr></tbody></table> <h3 id="data-manipulation"><a href="#data-manipulation" class="header-anchor">#</a> Data manipulation: </h3> <table><thead><tr><th></th> <th></th> <th></th></tr></thead> <tbody><tr><td><a href="#calculate">Calculate</a></td> <td><a href="#datetime">DateTime</a></td> <td><a href="#money">Money</a></td></tr> <tr><td><a href="#cmptime">CmpTime</a></td> <td></td> <td></td></tr></tbody></table> <h3 id="data-presentation"><a href="#data-presentation" class="header-anchor">#</a> Data presentation: </h3> <table><thead><tr><th></th> <th></th> <th></th></tr></thead> <tbody><tr><td><a href="#code">Code</a></td> <td><a href="#hint">Hint</a></td> <td><a href="#menuitem">MenuItem</a></td></tr> <tr><td><a href="#codeasis">CodeAsIs</a></td> <td><a href="#image">Image</a></td> <td><a href="#qrcode">QRcode</a></td></tr> <tr><td><a href="#chart">Chart</a></td> <td><a href="#menugroup">MenuGroup</a></td> <td><a href="#table">Table</a></td></tr> <tr><td><a href="#forlist">ForList</a></td> <td></td> <td></td></tr></tbody></table> <h3 id="accepting-of-data"><a href="#accepting-of-data" class="header-anchor">#</a> Accepting of data: </h3> <table><thead><tr><th></th> <th></th> <th></th></tr></thead> <tbody><tr><td><a href="#address">Address</a></td> <td><a href="#ecosysparam">EcosysParam</a></td> <td><a href="#langres">LangRes</a></td></tr> <tr><td><a href="#addresstoid">AddressToId</a></td> <td><a href="#gethistory">GetHistory</a></td> <td><a href="#range">Range</a></td></tr> <tr><td><a href="#appparam">AppParam</a></td> <td><a href="#getcolumntype">GetColumnType</a></td> <td><a href="#sysparam">SysParam</a></td></tr> <tr><td><a href="#data">Data</a></td> <td><a href="#jsontosource">JsonToSource</a></td> <td><a href="#binary">Binary</a></td></tr> <tr><td><a href="#dbfind">DBFind</a></td> <td><a href="#arraytosource">ArrayToSource</a></td> <td><a href="#transactioninfo">TransactionInfo</a></td></tr></tbody></table> <h3 id="data-formatting-elements"><a href="#data-formatting-elements" class="header-anchor">#</a> Data formatting elements: </h3> <table><thead><tr><th></th> <th></th> <th></th></tr></thead> <tbody><tr><td><a href="#div">Div</a></td> <td><a href="#settitle">SetTitle</a></td> <td><a href="#span">Span</a></td></tr> <tr><td><a href="#em">Em</a></td> <td><a href="#label">Label</a></td> <td><a href="#strong">Strong</a></td></tr> <tr><td><a href="#p">P</a></td> <td></td> <td></td></tr></tbody></table> <h3 id="form-elements"><a href="#form-elements" class="header-anchor">#</a> Form elements: </h3> <table><thead><tr><th></th> <th></th> <th></th></tr></thead> <tbody><tr><td><a href="#form">Form</a></td> <td><a href="#inputerr">InputErr</a></td> <td><a href="#inputmap">InputMap</a></td></tr> <tr><td><a href="#imageinput">ImageInput</a></td> <td><a href="#radiogroup">RadioGroup</a></td> <td><a href="#map">Map</a></td></tr> <tr><td><a href="#input">Input</a></td> <td><a href="#select">Select</a></td> <td></td></tr></tbody></table> <h3 id="operations-on-code-blocks"><a href="#operations-on-code-blocks" class="header-anchor">#</a> Operations on code blocks: </h3> <table><thead><tr><th></th> <th></th> <th></th></tr></thead> <tbody><tr><td><a href="#if">If</a></td> <td><a href="#or">Or</a></td> <td><a href="#include">Include</a></td></tr> <tr><td><a href="#and">And</a></td> <td></td> <td></td></tr></tbody></table> <h2 id="logicor-function-references"><a href="#logicor-function-references" class="header-anchor">#</a> Logicor function references </h2> <h3 id="address"><a href="#address" class="header-anchor">#</a> Address </h3> <p>This function returns the wallet address <code>xxxx-xxxx-...-xxxx</code> of a specific account address; if no address is specified, the account address of the current user will be used as the parameter.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Address(account) </code></pre></div><blockquote><p>Address</p></blockquote> <ul><li><p><code>account</code></p> <p>Account address.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Span(Your wallet: Address(#account#)) </code></pre></div><h3 id="addresstoid"><a href="#addresstoid" class="header-anchor">#</a> AddressToId </h3> <p>It returns the account address of a specific wallet address xxxx-xxxx-...-xxxx.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>AddressToId(Wallet) </code></pre></div><blockquote><p>AddressToId</p></blockquote> <ul><li><p><code>Wallet</code></p> <p>The wallet address in XXXX-...-XXXX format.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>AddressToId(#wallet#) </code></pre></div><h3 id="addtoolbutton"><a href="#addtoolbutton" class="header-anchor">#</a> AddToolButton </h3> <p>Create a button panel with an addtoolbutton element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>AddToolButton(Title, Icon, Page, PageParams) [.Popup(Width, Header)] </code></pre></div><blockquote><p>AddToolButton</p></blockquote> <ul><li><p><code>Title</code></p> <p>Button title.</p></li> <li><p><code>Icon</code></p> <p>Button icon style.</p></li> <li><p><code>Page</code></p> <p>Name of the page redirects to.</p></li> <li><p><code>PageParams</code></p> <p>The parameters passed to the page.</p></li></ul> <blockquote><p>Popup</p></blockquote> <p>The modal window pops up.</p> <ul><li><p><code>Header</code></p> <p>Title of the window.</p></li> <li><p><code>Width</code></p> <p>Percentage of window width. Its range is 1 to 100.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>AddToolButton(Title: $@1broadcast$, Page: @1notifications_broadcast, Icon: icon-plus).Popup(Header: $@1notifications_broadcast$, Width: "50") </code></pre></div><h3 id="and"><a href="#and" class="header-anchor">#</a> And </h3> <p>It returns the result of an and logical operation. All parameters listed in parentheses are separated by commas. If one of the parameters is an empty string, zero or <code>false</code>, the parameter value is <code>false</code>, otherwise the parameter value is <code>true</code>. If the parameter value is <code>true</code>, the function returns <code>1</code>, otherwise it returns <code>0</code>.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>And(parameters) </code></pre></div><p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>If(And(#myval1#,#myval2#), Span(OK)) </code></pre></div><h3 id="appparam"><a href="#appparam" class="header-anchor">#</a> AppParam </h3> <p>Output the application parameter value, which is taken from the app_params table of the current ecosystem. If there is a language resource with the specified name, its value will be automatically replaced.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>AppParam(App, Name, Index, Source) </code></pre></div><blockquote><p>AppParam</p></blockquote> <ul><li><p><code>App</code></p> <p>Application ID.</p></li> <li><p><code>Name</code></p> <p>Parameter name.</p></li> <li><p><code>Index</code></p> <p>It can be used when the parameter value is a comma-separated list.</p> <p>The parameter elements index, starting from 1. For example, if <code>type = full,light</code>, then <code>AppParam(1, type, 2)</code> returns <code>light</code>. It cannot be used in conjunction with the Source parameter.</p></li> <li><p><code>Source</code></p> <p>It can be used when the parameter value is a comma-separated list. Create a data object whose elements are the values of specific parameters. This object can be used as a data source for the <a href="#table">Table</a> and <a href="#select">Select</a> functions. It cannot be used in conjunction with the Index parameter.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>AppParam(1, type, Source: mytype) </code></pre></div><h3 id="arraytosource"><a href="#arraytosource" class="header-anchor">#</a> ArrayToSource </h3> <p>Create an arraytosource element and fill it with the key-value pairs of a JSON array. The data obtained is put into the Source element, which can be used later in the source input function (e.g. Table).</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>ArrayToSource(Source, Data) </code></pre></div><blockquote><p>ArrayToSource</p></blockquote> <ul><li><p><code>Source</code></p> <p>Data source name.</p></li> <li><p><code>Data</code></p> <p>A JSON array or a variable name containing a JSON array (<code>#name#</code>).</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>ArrayToSource(src, #myjsonarr#) ArrayToSource(dat, [1, 2, 3]) </code></pre></div><h3 id="binary"><a href="#binary" class="header-anchor">#</a> Binary </h3> <p>Returns links to static files stored in the binary table binaries.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Binary(Name, AppID, MemberID)[.ById(ID)][.Ecosystem(ecosystem)] </code></pre></div><blockquote><p>Binary</p></blockquote> <ul><li><p><code>Name</code></p> <p>File name.</p></li> <li><p><code>AppID</code></p> <p>Application ID.</p></li> <li><p><code>MemberID</code></p> <p>Account address, 0 by default.</p></li> <li><p><code>ID</code></p> <p>Static file ID.</p></li> <li><p><code>Ecosystem</code></p> <p>Ecosystem ID. If it is not specified, the binary file is requested from the current ecosystem.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Image(Src: Binary("my_image", 1)) Image(Src: Binary().ById(2)) Image(Src: Binary().ById(#id#).Ecosystem(#eco#)) </code></pre></div><h3 id="button"><a href="#button" class="header-anchor">#</a> Button </h3> <p>Create a button HTML element which will create a button to call a contract or open a page.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Button(Body, Page, Class, Contract, Params, PageParams) [.CompositeContract(Contract, Data)] [.Alert(Text, ConfirmButton, CancelButton, Icon)] [.Popup(Width, Header)] [.Style(Style)] [.ErrorRedirect(ErrorID,PageName,PageParams)] </code></pre></div><blockquote><p>Button</p></blockquote> <ul><li><p><code>Body</code></p> <p>Child text or element.</p></li> <li><p><code>Page</code></p> <p>Name of the page redirects to.</p></li> <li><p><code>Class</code></p> <p>Button class.</p></li> <li><p><code>Contract</code></p> <p>Name of the contract called.</p></li> <li><p><code>Params</code></p> <p>The list of values passed to the contract. Normally, the value of the contract parameter (the data section) is obtained from an HTML element (such as an input field) of id with a similar name. If the element id is different from the name of the contract parameter, then the value should be assigned in the format of contractField1=idname1, contractField2=idname2. This parameter is returned to attr as the object {contractField1: idname1, contractField2: idname2}.</p></li> <li><p><code>PageParams</code></p> <p>The format of parameters passed to the redirect page is pageField1=idname1, pageField2=idname2. Variables with target page parameter names #pageField1 and #pageField2 are created on the target page and assigned the specified values.See more parameter passing specifications <a href="#pageparams">passing parameters to the page using PageParams</a></p></li></ul> <blockquote><p>CompositeContract</p></blockquote> <p>Used to add additional contracts to the button. CompositeContract can be used multiple times.</p> <ul><li><p><code>Name</code></p> <p>Name of the contract.</p></li> <li><p><code>Data</code></p> <p>The contract parameters are JSON arrays.</p></li></ul> <blockquote><p>Alert</p></blockquote> <p>Display the message.</p> <ul><li><p><code>Text</code></p> <p>Text of the message.</p></li> <li><p><code>ConfirmButton</code></p> <p>Title of the Confirm button.</p></li> <li><p><code>CancelButton</code></p> <p>Title of the Cancel button.</p></li> <li><p><code>Icon</code></p> <p>Button icon.</p></li></ul> <blockquote><p>Popup</p></blockquote> <p>Output modal window.</p> <ul><li><p><code>Header</code></p> <p>Window title.</p></li> <li><p><code>Width</code></p> <p>Percentage of window width. Its range is 1 to 100.</p></li></ul> <blockquote><p>Style</p></blockquote> <p>The CSS style specified.</p> <ul><li><p><code>Style</code></p> <p>CSS style.</p></li></ul> <blockquote><p>ErrorRedirect</p></blockquote> <p>Specify and redirect to a page when the :ref:contractfundef-Throw function generates an error during contract execution. There can be several ErrorRedirect calls. Therefore, when returning the <em>errredirect</em> attribute, the attribute key is ErrorID and the value is the parameters list.</p> <ul><li><p><code>ErrorID</code></p> <p>Error ID.</p></li> <li><p><code>PageName</code></p> <p>Name of the redirect page.</p></li> <li><p><code>PageParams</code></p> <p>Parameters passed to the page.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Button(Submit, default_page, mybtn_class).Alert(Alert message) Button(Contract: MyContract, Body:My Contract, Class: myclass, Params:"Name=myid,Id=i10,Value") </code></pre></div><h3 id="calculate"><a href="#calculate" class="header-anchor">#</a> Calculate </h3> <p>It returns the result of the arithmetic expression passed in the Exp parameter. The following operations are applicable: +, -, *, / and brackets ().</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Calculate(Exp, Type, Prec) </code></pre></div><blockquote><p>Calculate</p></blockquote> <ul><li><p><code>Exp</code></p> <p>An arithmetic expression, containing numbers and the #name# variable.</p></li> <li><p><code>Type</code></p> <p>Result data type: int, float, money. If not specified, it is float if there is a number with a decimal point, otherwise it is int.</p></li> <li><p><code>Prec</code></p> <p>float and money data, with two significant digits after the decimal point.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Calculate( Exp: (342278783438+5000)\*(#val#-932780000), Type: money, Prec:18 ) Calculate(10000-(34+5)\*#val#) Calculate("((10+#val#-45)\*3.0-10)/4.5 + #val#", Prec: 4) </code></pre></div><h3 id="chart"><a href="#chart" class="header-anchor">#</a> Chart </h3> <p>Create HTML charts.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Chart(Type, Source, FieldLabel, FieldValue, Colors) </code></pre></div><blockquote><p>Chart</p></blockquote> <ul><li><p><code>Type</code></p> <p>Chart type.</p></li> <li><p><code>Source</code></p> <p>Name of the data source, e.g., obtained from the <a href="#dbfind">DBFind</a> function.</p></li> <li><p><code>FieldLabel</code></p> <p>Name of the header field.</p></li> <li><p><code>FieldValue</code></p> <p>Name of the value field.</p></li> <li><p><code>Colors</code></p> <p>List of colors.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Data(mysrc,"name,count"){ John Silver,10 "Mark, Smith",20 "Unknown ""Person""",30 } Chart(Type: "bar", Source: mysrc, FieldLabel: "name", FieldValue: "count", Colors: "red, green") </code></pre></div><h3 id="cmptime"><a href="#cmptime" class="header-anchor">#</a> CmpTime </h3> <p>It compares two time values in the same format. It supports unixtime, <code>YYYY-MM-DD HH:MM:SS</code> and any time format, such as <code>YYYYMMDD</code>.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>CmpTime(Time1, Time2) </code></pre></div><p>Return value</p> <ul><li><code>-1</code> - Time1 <Time2;</li> <li><code>0</code> - Time1 = Time2;</li> <li><code>1</code> - Time1> Time2.</li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>If(CmpTime(#time1#, #time2#)<0){...} </code></pre></div><h3 id="code"><a href="#code" class="header-anchor">#</a> Code </h3> <p>Create a code element to display the specified code.</p> <p>It substitute a variable with the value of the variable (for example, <code>#name#</code>). <strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Code(Text) </code></pre></div><blockquote><p>Code</p></blockquote> <ul><li><p><code>Text</code></p> <p>Source code.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Code( P(This is the first line. Span(This is the second line.)) ) </code></pre></div><h3 id="codeasis"><a href="#codeasis" class="header-anchor">#</a> CodeAsIs </h3> <p>Create a code element to display the specified code. It does not replace a variable with its value. For example, <code>#name#</code> will be displayed as is.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>CodeAsIs(Text) </code></pre></div><blockquote><p>CodeAsIs</p></blockquote> <ul><li><p><code>Text</code></p> <p>Source code.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>CodeAsIs( P(This is the #test1#. Span(This is the #test2#.)) ) </code></pre></div><h3 id="data"><a href="#data" class="header-anchor">#</a> Data </h3> <p>Create a data element, fill it with the specified data and put it in Source. Then, you can receive Source as a data input in <a href="#table">Table</a> and other functions. The sequence of column names corresponds to the sequence of data entry values.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Data(Source,Columns,Data) [.Custom(Column){Body}] </code></pre></div><blockquote><p>Data</p></blockquote> <ul><li><p><code>Source</code></p> <p>Name of the data source. You can specify any name that will be passed to other functions later as a data source.</p></li> <li><p><code>Columns</code></p> <p>A list of column names, separated by commas.</p></li> <li><p><code>Data</code></p> <p>Data set.</p> <p>One record per line. Column values must be separated by commas. Data and Columns should be set in the same order.</p> <p>Values with commas should be enclosed in double quotes (<code>"example1, example2", 1, 2</code>). Quoted values should be put in two double quotes (<code>"""example", "example2""", 1, 2</code>).</p></li></ul> <h3 id="custom"><a href="#custom" class="header-anchor">#</a> Custom </h3> <div class="language- extra-class"><pre><code>You can assign calculated columns to Data. For example, you can specify field templates for buttons and other page layout elements. These field templates are usually assigned to [Table](#table) and other functions to receive data. Use multiple Custom functions if you want to assign multiple calculated columns. </code></pre></div><ul><li><p><code>Column</code></p> <p>Column name, which is unique and compulsory.</p></li> <li><p><code>Body</code></p> <p>Code block. You can use <code>#columnname#</code> to get values from other columns in the entry, and then use those values in code blocks.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Data(mysrc,"id,name"){ "1",John Silver 2,"Mark, Smith" 3,"Unknown ""Person""" }.Custom(link){Button(Body: View, Class: btn btn-link, Page: user, PageParams: "id=#id#"} </code></pre></div><h3 id="datetime"><a href="#datetime" class="header-anchor">#</a> DateTime </h3> <p>Display the time and date in the specified format.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>DateTime(DateTime, Format) </code></pre></div><blockquote><p>DateTime</p></blockquote> <ul><li><p><code>DateTime</code></p> <p>Time and date expressed in unixtime or standard format <code>2006-01-02T15:04:05</code>.</p></li> <li><p><code>Format</code></p> <p>Format template: year in 2-digit format <code>YY</code>, 4-digit format <code>YYYY</code>, month in <code>MM</code>, day in <code>DD</code>, hour in <code>HH</code>, minute in <code>MM</code>, second in <code>SS</code>, e.g.: <code>YY/MM/DD HH:MM</code>. If it is not specified or missing, <code>YYYY-MM-DD HH:MI:SS</code> will be used.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>DateTime(2017-11-07T17:51:08) DateTime(#mytime#,HH:MI DD.MM.YYYY) </code></pre></div><h3 id="dbfind"><a href="#dbfind" class="header-anchor">#</a> DBFind </h3> <p>Create a dbfind element, fill it with the data of the table table and put it in the Source structure, which can later be used for the input data of <a href="#table">Table</a> and other functions Source.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(table, Source) [.Columns(columns)] [.Where(conditions)] [.WhereId(id)] [.Order(name)] [.Limit(limit)] [.Offset(offset)] [.Count(countvar)] [.Ecosystem(id)] [.Cutoff(columns)] [.Custom(Column){Body}] [.Vars(Prefix)] </code></pre></div><blockquote><p>DBFind</p></blockquote> <ul><li><p><code>table</code></p> <p>Table name.</p></li> <li><p><code>Source</code></p> <p>Data source name.</p></li></ul> <blockquote><p>Columns</p></blockquote> <ul><li><p><code>columns</code></p> <p>If not specified, a list of all fields will be returned. If there is a JSON type field, you can use the following syntax to process the record field: <code>columnname->fieldname</code>. In this case, the field name generated is <code>columnname.fieldname</code>.</p></li></ul> <blockquote><p>Where</p></blockquote> <ul><li><code>conditions</code></li></ul> <p>Data query conditions. See DBFind. If there is a JSON type field, you can use the following syntax to process the record field: <code>columnname->fieldname</code>.</p> <blockquote><p>WhereId Query by ID, e.g. <code>.WhereId(1)</code>.</p></blockquote> <ul><li><code>Id</code></li></ul> <p>Entry ID.</p> <blockquote><p>Order Sort by field. For more information about the sorting syntax, see <a href="#dbfind">DBFind</a>.</p></blockquote> <ul><li><code>name</code></li></ul> <p>Field Name</p> <blockquote><p>Limit</p></blockquote> <ul><li><p><code>limit</code></p> <p>The number of entries returned, 25 by default. The maximum number is 10,000.</p></li></ul> <blockquote><p>Offset</p></blockquote> <ul><li><p><code>Offset</code></p> <p>Offset.</p></li></ul> <blockquote><p>Count</p></blockquote> <p>Specify the total number of rows of the Where condition.</p> <p>In addition to storing it in a variable, the total count is returned in the count parameter of the dbfind element.</p> <p>If Where and WhereID are not specified, the total count of rows in the table will be returned.</p> <ul><li><p><code>countvar</code></p> <p>Name of the variable that holds the row count.</p></li></ul> <blockquote><p>Ecosystem</p></blockquote> <ul><li><code>Id</code></li></ul> <p>Ecosystem ID. By default, the data comes from the specified table in the current ecosystem.</p> <blockquote><p>Cutoff</p></blockquote> <p>Used to cut and display large amounts of text data.</p> <ul><li><code>columns</code></li></ul> <p>A comma-separated list of fields that must be processed by the Cutoff function.</p> <p>The field value will be replaced by a JSON object that has two fields: link link and title title. If the field value contains more than 32 characters, link pointing to the first 32 characters of the full text is returned. If the field value contains 32 characters or less, link is set to void and title contains the complete field value.</p> <blockquote><p>Custom</p></blockquote> <p>You can assign calculated columns to Data. For example, you can specify field templates for buttons and other page layout elements. These field templates are usually assigned to <a href="#table">Table</a> and other functions to receive data. If you want to assign multiple calculated columns, use multiple Custom functions.</p> <ul><li><code>Column</code></li></ul> <p>Column name, which is unique and compulsory.</p> <ul><li><code>Body</code></li></ul> <p>Code block. You can use <code>#columnname#</code> to get values from other columns in the entry, and then use those values in code blocks.</p> <blockquote><p>Vars</p></blockquote> <p>The first row obtained by the query will generate a set of variables with values. When it is specified, the Limit parameter automatically becomes 1, and only one (1) record is returned.</p> <ul><li><code>Prefix</code></li></ul> <p>The prefix added to the variable name. Its format is <code>#prefix_columnname#</code>, where the column name immediately follows the underscore symbol. If there is a column containing a JSON field, the variable generated will be in the following format: <code>#prefix_columnname_field#</code>.</p> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(parameters,myparam) DBFind(parameters,myparam).Columns(name,value).Where({name:"money"}) DBFind(parameters,myparam).Custom(myid){Strong(#id#)}.Custom(myname){ Strong(Em(#name#))Div(myclass, #company#) } </code></pre></div><h3 id="div"><a href="#div" class="header-anchor">#</a> Div </h3> <p>Create a div HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Div(Class, Body) [.Style(Style)] [.Show(Condition)] [.Hide(Condition)] </code></pre></div><blockquote><p>Div</p></blockquote> <ul><li><p><code>Class</code></p> <p>Class name of the div.</p></li> <li><p><code>Body</code></p> <p>Child element.</p></li></ul> <blockquote><p>Style</p></blockquote> <p>The CSS style specified.</p> <ul><li><code>Style</code></li></ul> <p>CSS style.</p> <blockquote><p>Show</p></blockquote> <p>Define the conditions for displaying Div.</p> <ul><li><code>Condition</code></li></ul> <p>See Hide below.</p> <blockquote><p>Hide</p></blockquote> <p>Define the conditions for hiding Div.</p> <ul><li><code>Condition</code></li></ul> <p>The expression format is <code>InputName=Value</code>, when all expressions are true, <em>Condition</em> is true, and when the value of <code>InputName</code> is equal to <code>Value</code>, <em>Condition</em> is true. If multiple <em>Show</em> or <em>Hide</em> are called, there must be at least one <em>Condition</em> parameter is true.</p> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Form(){ Div(text-left){ Input(Name: "broadcast", Type: "checkbox", Value: "false") } Div(text-left){ hello }.Show("broadcast=false") Div(text-left){ world }.Hide("broadcast=false") } </code></pre></div><h3 id="ecosysparam"><a href="#ecosysparam" class="header-anchor">#</a> EcosysParam </h3> <p>This function obtains parameter values from the ecosystem parameter table of the current ecosystem. If the returned result name contains the language resources, it will be translated accordingly.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>EcosysParam(Name, Index, Source) </code></pre></div><blockquote><p>EcosysParam</p></blockquote> <ul><li><p><code>Name</code></p> <p>Parameter name.</p></li> <li><p><code>Index</code></p> <p>If the requested parameter is a list of comma-separated elements, you can specify an index starting from 1. For example, if <code>gender = male,female</code>, then <code>gender = male,female</code> returns <code>female</code>.</p> <p>It cannot be used in conjunction with the Source parameter.</p></li> <li><p><code>Source</code></p> <p>It can be used when the parameter value is a comma-separated list. Create a data object whose elements are the values of the specified parameters. This object can be used as a data source for the <a href="#table">Table</a> and <a href="#select">Select</a> functions. It cannot be used in conjunction with the Index parameter.</p></li></ul> <div class="language- extra-class"><pre class="language-text"><code>Address(EcosysParam(founder_account)) EcosysParam(gender, Source: mygender) EcosysParam(Name: gender_list, Source: src_gender) Select(Name: gender, Source: src_gender, NameColumn: name, ValueColumn: id) </code></pre></div><h3 id="em"><a href="#em" class="header-anchor">#</a> Em </h3> <p>Create an em HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Em(Body, Class) </code></pre></div><blockquote><p>Em</p></blockquote> <ul><li><p><code>Body</code></p> <p>Child text or element.</p></li> <li><p><code>Class</code></p> <p>The em class name.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>This is an Em(important news). </code></pre></div><h3 id="forlist"><a href="#forlist" class="header-anchor">#</a> ForList </h3> <p>Display the list of elements in the Source data source in the template format set in Body and create a <strong>forlist</strong> element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>ForList(Source, Index){Body} </code></pre></div><blockquote><p>ForList</p></blockquote> <ul><li><p><code>Source</code></p> <p>Data source obtained from the <a href="#dbfind">DBFind</a> or <a href="#data">Data</a> function.</p></li> <li><p><code>Index</code></p> <p>The variable of the iteration counter, starting from 1. An optional parameter. If not specified, the iteration count value will be written to the [Source] _index variable.</p></li> <li><p><code>Body</code></p> <p>Template for inserting elements.</p></li></ul> <div class="language- extra-class"><pre class="language-text"><code>ForList(mysrc){Span(#mysrc_index#. #name#)} </code></pre></div><h3 id="form"><a href="#form" class="header-anchor">#</a> Form </h3> <p>Create a form HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Form(Class, Body) [.Style(Style)] </code></pre></div><blockquote><p>Form</p></blockquote> <ul><li><p><code>Body</code></p> <p>Child text or element.</p></li> <li><p><code>Class</code></p> <p>Class name of the form.</p></li></ul> <blockquote><p>Style The CSS style specified.</p></blockquote> <ul><li><code>Style</code></li></ul> <p>CSS style.</p> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Form(class1 class2, Input(myid)) </code></pre></div><h3 id="getcolumntype"><a href="#getcolumntype" class="header-anchor">#</a> GetColumnType </h3> <p>Returns the field data type of a specific table.</p> <p>Types returned include: <code>text, varchar, number, money, double, bytes, json, datetime, double</code>. <strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>GetColumnType(Table, Column) </code></pre></div><blockquote><p>GetColumnType</p></blockquote> <ul><li><p><code>Table</code></p> <p>Table name.</p></li> <li><p><code>Column</code></p> <p>Field name.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>SetVar(coltype,GetColumnType(members, member_name))Div(){#coltype#} </code></pre></div><h3 id="gethistory"><a href="#gethistory" class="header-anchor">#</a> GetHistory </h3> <p>Create a gethistory element and fill it with the history change records of the entries in the specified table. The data generated will be placed in the Source element, which can be used later in the source input function (for example, <a href="#table">Table</a>).</p> <p>The array is sorted in order from the last modified. The id field in the array points to the id of the rollback_tx table. block_id represents the block ID, block_time represents the block generation timestamp.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>GetHistory(Source, Name, Id, RollbackId) </code></pre></div><blockquote><p>GetHistory</p></blockquote> <ul><li><p><code>Source</code></p> <p>Data source name.</p></li> <li><p><code>Name</code></p> <p>Table name.</p></li> <li><p><code>Id</code></p> <p>Entry ID.</p></li> <li><p><code>RollbackId</code></p> <p>An optional parameter. If specified, only one record with the specified ID will be returned from the rollback_tx table.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>GetHistory(blocks, BlockHistory, 1) </code></pre></div><h3 id="getvar"><a href="#getvar" class="header-anchor">#</a> GetVar </h3> <p>It returns the value of the specified variable that already exists, or an empty string if it does not exist.</p> <p>The getvar element is only created when an editable tree is requested. The difference between <code>GetVar(varname)</code> and <code>#varname</code> is that if varname does not exist, GetVar will return an empty string, while #varname# will be interpreted as a string value.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>GetVar(Name) </code></pre></div><blockquote><p>GetVar</p></blockquote> <ul><li><p><code>Name</code></p> <p>Variable name.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>If(GetVar(name)){#name#}.Else{Name is unknown} </code></pre></div><h3 id="hint"><a href="#hint" class="header-anchor">#</a> Hint </h3> <p>Create a hint element for hints.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Hint(Icon,Title,Text) </code></pre></div><blockquote><p>Hint</p></blockquote> <ul><li><p><code>Icon</code></p> <p>Icon name.</p></li> <li><p><code>Title</code></p> <p>Hint title.</p></li> <li><p><code>Text</code></p> <p>Hint text.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Hint(Icon: "icon-wrench",Title:$@1pa_settings$,Text: This is a hint text) </code></pre></div><h3 id="if"><a href="#if" class="header-anchor">#</a> If </h3> <p>Condition statement. Returns the first If or ElseIf child element that satisfies Condition. Otherwise, return the Else child element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>If(Condition){ Body} [.ElseIf(Condition){ Body }] [.Else{ Body }] </code></pre></div><blockquote><p>If</p></blockquote> <ul><li><p><code>Condition</code></p> <p>If the condition is equal to an empty string, 0 or false, it is considered that the condition is not met. In all other cases, this condition is considered to be satisfied.</p></li> <li><p><code>Body</code></p> <p>Child element.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>If(#value#){ Span(Value) }.ElseIf(#value2#){Span(Value 2) }.ElseIf(#value3#){Span(Value 3)}.Else{ Span(Nothing) } </code></pre></div><h3 id="image"><a href="#image" class="header-anchor">#</a> Image </h3> <p>Create a image HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Image(Src, Alt, Class) [.Style(Style)] </code></pre></div><blockquote><p>Image</p></blockquote> <ul><li><p><code>Src</code></p> <p>Image source, file or <code>data:...</code></p></li> <li><p><code>Alt</code></p> <p>Alternative text when the image cannot be displayed.</p></li> <li><p><code>Сlass</code></p> <p>Image class name.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Image(Src: Binary().ById(#id#), Class: preview).Style(height: 40px; widht 40px;) </code></pre></div><h3 id="imageinput"><a href="#imageinput" class="header-anchor">#</a> ImageInput </h3> <p>Create an imageinput element to upload an image.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>ImageInput(Name, Width, Ratio, Format) </code></pre></div><blockquote><p>ImageInput</p></blockquote> <ul><li><p><code>Name</code></p> <p>Element name.</p></li> <li><p><code>Width</code></p> <p>Width of the cropped image.</p></li> <li><p><code>Ratio</code></p> <p>Aspect ratio or image height.</p></li> <li><p><code>Format</code></p> <p>The format of the uploaded image.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>ImageInput(avatar, 100, 2/1) </code></pre></div><h3 id="include"><a href="#include" class="header-anchor">#</a> Include </h3> <p>Insert the template with a specified name into the page code.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Include(Name) </code></pre></div><blockquote><p>Include</p></blockquote> <ul><li><p><code>Name</code></p> <p>Template name.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Div(myclass, Include(mywidget)) </code></pre></div><h3 id="input"><a href="#input" class="header-anchor">#</a> Input </h3> <p>Create an input HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Input(Name, Class, Placeholder, Type, Value, Disabled) [.Validate(validation parameters)] [.Style(Style)] </code></pre></div><blockquote><p>Input</p></blockquote> <ul><li><p><code>Name</code></p> <p>Element name.</p></li> <li><p><code>Class</code></p> <p>Class name.</p></li> <li><p><code>Placeholder</code></p> <p>Prompt for the expected value of the input field.</p></li> <li><p><code>Type</code></p> <p>input type.</p></li> <li><p><code>Value</code></p> <p>Element value.</p></li> <li><p><code>Disabled</code></p> <p>Disable the input element.</p></li></ul> <blockquote><p>Validate</p></blockquote> <p>Validate the parameter.</p> <blockquote><p>Style</p></blockquote> <p>The CSS style specified.</p> <ul><li><p><code>Style</code></p> <p>CSS style.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Input(Name: name, Type: text, Placeholder: Enter your name) Input(Name: num, Type: text).Validate(minLength: 6, maxLength: 20) </code></pre></div><h3 id="inputerr"><a href="#inputerr" class="header-anchor">#</a> InputErr </h3> <p>Create an inputerr element to validate the error text.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>InputErr(Name,validation errors)] </code></pre></div><blockquote><p>InputErr</p></blockquote> <ul><li><p><code>Name</code></p> <p>Corresponds to the name of the <a href="#input">Input</a> element.</p></li> <li><p><code>validation errors</code></p> <p>Validation error message for one or more parameters.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>InputErr(Name: name, minLength: Value is too short, maxLength: The length of the value must be less than 20 characters) </code></pre></div><h3 id="inputmap"><a href="#inputmap" class="header-anchor">#</a> InputMap </h3> <p>Create an text input field for address, able to select coordinates on the map.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>InputMap(Name, Type, MapType, Value) </code></pre></div><blockquote><p>InputMap</p></blockquote> <ul><li><p><code>Name</code></p> <p>Element name.</p></li> <li><p><code>Value</code></p> <p>Default value. The value is an object in string format. For example, <code>{"coords":[{"lat":number,"lng":number},]}</code> or <code>{"zoom":int, "center":{"lat":number,"lng": number}}</code>. When the InputMap is created with the predefined Value, the address field can be used to save the address value, so the it is not void.</p></li> <li><p><code>Type</code></p> <p>Type of map spot mapping:</p> <ul><li><code>polygon</code> - indicates the area of a multi-spot closed loop;</li> <li><code>Line</code> - means a polyline with multiple points without closed loop;</li> <li><code>Point</code> - indicates a single point coordinate.</li></ul></li> <li><p><code>MapType</code></p> <p>Map type. It has the following values: <code>hybrid, roadmap, satellite, terrain</code>.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>InputMap(Name: Coords,Type: polygon, MapType: hybrid, Value: `{"zoom":8, "center":{"lat":55.749942860682545,"lng":37.6207172870636}}`) </code></pre></div><h3 id="jsontosource"><a href="#jsontosource" class="header-anchor">#</a> JsonToSource </h3> <p>Create a jsontosource element and fill it with the key-value pairs of a JSON array. The data obtained is put into the Source element, which can be used later in the source input function (e.g. <a href="#table">Table</a>).</p> <p>The records in the result data are sorted alphabetically by JSON key.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>JsonToSource(Source, Data) </code></pre></div><blockquote><p>JsonToSource</p></blockquote> <ul><li><p><code>Source</code></p> <p>Data source name.</p></li> <li><p><code>Data</code></p> <p>A JSON object or a variable name containing a JSON object (<code>#name#</code>).</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>JsonToSource(src, #myjson#) JsonToSource(dat, {"param":"value", "param2": "value 2"}) </code></pre></div><h3 id="label"><a href="#label" class="header-anchor">#</a> Label </h3> <p>Create a label HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Label(Body, Class, For) [.Style(Style)] </code></pre></div><blockquote><p>Label</p></blockquote> <ul><li><p><code>Body</code></p> <p>Child text or element.</p></li> <li><p><code>Class</code></p> <p>Class name.</p></li> <li><p><code>For</code></p> <p>Bind to a form element.</p></li></ul> <blockquote><p><code>StyleThe</code>:CSS style specified.</p></blockquote> <ul><li><p><code>Style</code></p> <p>CSS style.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Label(The first item). </code></pre></div><h3 id="langres"><a href="#langres" class="header-anchor">#</a> LangRes </h3> <p>Returns a specific language resource. If requested to edit the tree, the langres element is returned, and you may use the short format symbol $langres$. <strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>LangRes(Name) </code></pre></div><blockquote><p>LangRes</p></blockquote> <ul><li><p><code>Name</code></p> <p>Name of the language resource.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>LangRes(name) LangRes(myres) </code></pre></div><h3 id="linkpage"><a href="#linkpage" class="header-anchor">#</a> LinkPage </h3> <p>Create a linkpage element, linking to the page. <strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>LinkPage(Body, Page, Class, PageParams) [.Style(Style)] </code></pre></div><blockquote><p>LinkPage</p></blockquote> <ul><li><p><code>Body</code></p> <p>Child text or element.</p></li> <li><p><code>Page</code></p> <p>Name of the redirect page.</p></li> <li><p><code>Class</code></p> <p>Button class name.</p></li> <li><p><code>PageParams</code></p> <p>Redirect page parameters.</p></li></ul> <blockquote><p>Style</p></blockquote> <p>The CSS style specified.</p> <ul><li><code>Style</code></li></ul> <p>CSS styles</p> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>LinkPage(Class: #style_link# h5 text-bold, Page: @1roles_view, PageParams: "v_role_id=#recipient.role_id#") </code></pre></div><h3 id="map"><a href="#map" class="header-anchor">#</a> Map </h3> <p>Create a visual map and display coordinates in any format.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Map(Hmap, MapType, Value) </code></pre></div><blockquote><p>Map</p></blockquote> <ul><li><p><code>Hmap</code></p> <p>Height of an HTML element on the page. The default value is 100.</p></li> <li><p><code>Value</code></p> <p>Map value, an object in string format. For example, <code>{"coords":[{"lat":number,"lng":number},]}</code> or <code>{"zoom":int, "center":{"lat":number,"lng": number}}</code>. If <code>center</code> is not specified, the map window will automatically adjust according to the specified coordinates.</p></li> <li><p><code>MapType</code></p> <p>Map type. It has the following values: <code>hybrid, roadmap, satellite, terrain</code>.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Map(MapType:hybrid, Hmap:400, Value:{"coords":[{"lat":55.58774531752405,"lng":36.97260184619233},{"lat":55.58396161622043,"lng":36.973803475831005},{"lat":55.585222890513975,"lng":36.979811624024364},{"lat":55.58803635636347,"lng":36.978781655762646}],"area":146846.65783403456,"address":"Unnamed Road, Moscow, Russia, 143041"}) </code></pre></div><h3 id="menugroup"><a href="#menugroup" class="header-anchor">#</a> MenuGroup </h3> <p>Create a nested submenu in the menu and return the menugroup element. Before replacing it with the language resource, the name parameter will return the value of Title.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>MenuGroup(Title, Body, Icon) </code></pre></div><blockquote><p>MenuGroup</p></blockquote> <ul><li><p><code>Title</code></p> <p>Name of the menu item.</p></li> <li><p><code>Body</code></p> <p>Child elements in a submenu.</p></li> <li><p><code>Icon</code></p> <p>Icon.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>MenuGroup(My Menu){ MenuItem(Interface, sys-interface) MenuItem(Dahsboard, dashboard_default) } </code></pre></div><h3 id="menuitem"><a href="#menuitem" class="header-anchor">#</a> MenuItem </h3> <p>Create a menu item and return the menuitem element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>MenuItem(Title, Page, Params, Icon) </code></pre></div><blockquote><p>MenuItem</p></blockquote> <ul><li><p><code>Title</code></p> <p>Name of the menu item.</p></li> <li><p><code>Page</code></p> <p>Name of the redirect page.</p></li> <li><p><code>Params</code></p> <p>Redirect page parameters.</p></li> <li><p><code>Icon</code></p> <p>Icon.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>MenuItem(Title:$@1roles$, Page:@1roles_list, Icon:"icon-pie-chart") </code></pre></div><h3 id="money"><a href="#money" class="header-anchor">#</a> Money </h3> <p>Returns the string value of exp / 10 ^ digit.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Money(Exp, Digit) </code></pre></div><blockquote><p>Money</p></blockquote> <ul><li><p><code>Exp</code></p> <p>A number in string format.</p></li> <li><p><code>Digit</code></p> <p>The exponent of 10 in the expression <code>Exp/10^digit</code>. The value can be positive or negative, and a positive value determines the number of digits after the decimal point.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Money(Exp, Digit) </code></pre></div><h3 id="or"><a href="#or" class="header-anchor">#</a> Or </h3> <p>It returns the result of an if logical operation. All parameters listed in parentheses are separated by commas. If having one parameter that is value is not an empty string, zero or <code>false</code>, the parameter value is <code>true</code>, otherwise the parameter value is <code>false</code>. If the parameter value is <code>true</code>, the function returns <code>1</code>, otherwise it returns <code>0</code>.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Or(parameters) </code></pre></div><p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>If(Or(#myval1#,#myval2#), Span(OK)) </code></pre></div><h3 id="p"><a href="#p" class="header-anchor">#</a> P </h3> <p>Create a p HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>P(Body, Class) [.Style(Style)] </code></pre></div><blockquote><p>P</p></blockquote> <ul><li><p><code>Body</code></p> <p>Child text or element.</p></li> <li><p><code>Class</code></p> <p>Class name.</p></li></ul> <blockquote><p>Style</p></blockquote> <p>The CSS style specified.</p> <ul><li><p><code>Style</code></p> <p>CSS style.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>P(This is the first line. This is the second line.) </code></pre></div><h3 id="qrcode"><a href="#qrcode" class="header-anchor">#</a> QRcode </h3> <p>Returns the QR code with the specified text and create a qrcode element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>QRcode(Text) </code></pre></div><blockquote><p>QRcode</p></blockquote> <ul><li><p><code>Text</code></p> <p>QR code text.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>QRcode(#name#) </code></pre></div><h3 id="radiogroup"><a href="#radiogroup" class="header-anchor">#</a> RadioGroup </h3> <p>Create a radiogroup element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>RadioGroup(Name, Source, NameColumn, ValueColumn, Value, Class) [.Validate(validation parameters)] [.Style(Style)] </code></pre></div><blockquote><p>RadioGroup</p></blockquote> <ul><li><p><code>Name</code></p> <p>Element name.</p></li> <li><p><code>Source</code></p> <p>Data source obtained from the DBFind or Data function.</p></li> <li><p><code>NameColumn</code></p> <p>Field name of the data source.</p></li> <li><p><code>ValueColumn</code></p> <p>Value name of the data source. Fields created with Custom cannot be used in this parameter.</p></li> <li><p><code>Value</code></p> <p>Default value.</p></li> <li><p><code>Class</code></p> <p>Class name.</p></li></ul> <blockquote><p>Validate</p></blockquote> <p>Validate the parameter.</p> <blockquote><p>Style</p></blockquote> <p>The CCS style specified.</p> <ul><li><p><code>Style</code></p> <p>CSS style.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>RadioGroup(Name: type_decision, Source: numbers_type_decisions, NameColumn: name, ValueColumn: value) </code></pre></div><h3 id="range"><a href="#range" class="header-anchor">#</a> Range </h3> <p>Create a range element, use step size Step from From to To (not including To) to fill integer elements. The data generated will be put into Source and can be used later in the function of the source input (e.g. <a href="#table">Table</a>). If an invalid parameter is specified, an empty Source is returned.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Range(Source,From,To,Step) </code></pre></div><blockquote><p>Range</p></blockquote> <ul><li><p><code>Source</code></p> <p>Data source name.</p></li> <li><p><code>From</code></p> <p>Starting value (i = From).</p></li> <li><p><code>To</code></p> <p>End value (i <To).</p></li> <li><p><code>Step</code></p> <p>Step of value change. If it is not specified, the default value is 1.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Range(my,0,5) SetVar(from, 5).(to, -4).(step,-2) Range(Source: neg, From: #from#, To: #to#, Step: #step#) </code></pre></div><h3 id="select"><a href="#select" class="header-anchor">#</a> Select </h3> <p>Create a select HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Select(Name, Source, NameColumn, ValueColumn, Value, Class) [.Validate(validation parameters)] [.Style(Style)] </code></pre></div><blockquote><p>Select</p></blockquote> <ul><li><p><code>Name</code></p> <p>Element name.</p></li> <li><p><code>Source</code></p> <p>Data source obtained from the <a href="#dbfind">DBFind</a> or <a href="#data">Data</a> function.</p></li> <li><p><code>NameColumn</code></p> <p>Field name of the data source.</p></li> <li><p><code>ValueColumn</code></p> <p>Value name of the data source. Fields created with <a href="#custom">Custom</a> cannot be used in this parameter.</p></li> <li><p><code>Value</code></p> <p>Default value.</p></li> <li><p><code>Class</code></p> <p>Class name.</p></li></ul> <blockquote><p>Validate</p></blockquote> <p>Validate the parameter.</p> <blockquote><p>Style</p></blockquote> <p>The CCS style specified.</p> <ul><li><p><code>Style</code></p> <p>CSS style.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(mytable, mysrc) Select(mysrc, name) </code></pre></div><h3 id="settitle"><a href="#settitle" class="header-anchor">#</a> SetTitle </h3> <p>To set the page title and create a settitle element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>SetTitle(Title) </code></pre></div><blockquote><p>SetTitle</p></blockquote> <ul><li><p><code>Title</code></p> <p>Page title.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>SetTitle(My page) </code></pre></div><h3 id="setvar"><a href="#setvar" class="header-anchor">#</a> SetVar </h3> <p>Assign the value Value to the specified variable Name.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>SetVar(Name, Value) </code></pre></div><blockquote><p>SetVar</p></blockquote> <ul><li><p><code>Name</code></p> <p>Variable name.</p></li> <li><p><code>Value</code></p> <p>Variable value, may contain a reference to another variable.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>SetVar(name, John Smith).(out, I am #name#) Span(#out#) </code></pre></div><h3 id="span"><a href="#span" class="header-anchor">#</a> Span </h3> <p>Create a span HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Span(Body, Class) [.Style(Style)] </code></pre></div><blockquote><p>Span</p></blockquote> <ul><li><p><code>Body</code></p> <p>Child text or element.</p></li> <li><p><code>Class</code></p> <p>Class name.</p></li></ul> <blockquote><p>Style</p></blockquote> <p>The CCS style specified.</p> <ul><li><p><code>Style</code></p> <p>CSS style.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>This is Span(the first item, myclass1). </code></pre></div><h3 id="strong"><a href="#strong" class="header-anchor">#</a> Strong </h3> <p>Create a strong HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Strong(Body, Class) </code></pre></div><blockquote><p>Strong</p></blockquote> <ul><li><p><code>Body</code></p> <p>Child text or element.</p></li> <li><p><code>Class</code></p> <p>Class name.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>This is Strong(the first item, myclass1). </code></pre></div><h3 id="sysparam"><a href="#sysparam" class="header-anchor">#</a> SysParam </h3> <p>Get the value of a specific parameter in the platform parameter table system_parameters.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>SysParam(Name) </code></pre></div><blockquote><p>SysParam</p></blockquote> <ul><li><p><code>Name</code></p> <p>Name of the platform parameter.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>SysParam(max_columns) </code></pre></div><h3 id="table"><a href="#table" class="header-anchor">#</a> Table </h3> <p>Create a table HTML element.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>Table(Source, Columns) [.Style(Style)] </code></pre></div><blockquote><p>Table</p></blockquote> <ul><li><p><code>Source</code></p> <p>Name of a specific data source.</p></li> <li><p><code>Columns</code></p> <p>Title and corresponding column name, e.g.: Title1=column1,Title2=column2.</p></li></ul> <blockquote><p>Style</p></blockquote> <p>The CSS style specified.</p> <ul><li><p><code>Style</code></p> <p>CSS style.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(mytable, mysrc) Table(mysrc,"ID=id,Name=name") </code></pre></div><h3 id="transactioninfo"><a href="#transactioninfo" class="header-anchor">#</a> TransactionInfo </h3> <p>It queries transactions by specified hash and returns information about the executed contracts and their parameters.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>TransactionInfo(Hash) </code></pre></div><blockquote><p>TransactionInfo</p></blockquote> <ul><li><p><code>Hash</code></p> <p>Transaction hashes in hexadecimal string format.</p></li></ul> <blockquote><p>Return value</p></blockquote> <p>It returns a string in JSON format:</p> <div class="language- extra-class"><pre class="language-text"><code>{"contract":"ContractName", "params":{"key": "val"}, "block": "N"} </code></pre></div><p>Where:</p> <ul><li><code>contract</code> - Contract name;</li> <li><code>params</code> - Data passed to the contract parameters;</li> <li><code>block</code> - ID of the block that processed the transaction.</li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>P(TransactionInfo(#hash#)) </code></pre></div><h3 id="varasis"><a href="#varasis" class="header-anchor">#</a> VarAsIs </h3> <p>Assigns the value Value to a specific variable Name, which is the name of a specific variable instead of its value.</p> <p>For versions with variable substitution, see <a href="#setvar">SetVar</a>.</p> <p><strong>Syntax</strong></p> <div class="language- extra-class"><pre class="language-text"><code>VarAsIs(Name, Value) </code></pre></div><blockquote><p>VarAsIs</p></blockquote> <ul><li><p><code>Name</code></p> <p>Variable name.</p></li> <li><p><code>Value</code></p> <p>A variable value. Variable name in the value will not be substituted. For example, if Value is example #varname#, then the variable value is also example #varname#.</p></li></ul> <p><strong>Example</strong></p> <div class="language- extra-class"><pre class="language-text"><code>SetVar(Name,"John") VarAsIs(name, I am #Name#) Span(#name#) // I am #Name# </code></pre></div><h2 id="app-styles-for-mobile-devices"><a href="#app-styles-for-mobile-devices" class="header-anchor">#</a> App styles for mobile devices </h2> <h3 id="layout"><a href="#layout" class="header-anchor">#</a> Layout </h3> <h4 id="title"><a href="#title" class="header-anchor">#</a> Title </h4> <ul><li><code>h1</code>… <code>h6</code></li></ul> <h4 id="strong-class-names"><a href="#strong-class-names" class="header-anchor">#</a> Strong-class names </h4> <ul><li><code>.text-muted</code></li> <li><code>.text-primary</code></li> <li><code>.text-success</code></li> <li><code>.text-info</code></li> <li><code>.text-warning</code></li> <li><code>.text-danger</code></li></ul> <h4 id="color"><a href="#color" class="header-anchor">#</a> Color </h4> <ul><li><code>.bg-danger-dark</code></li> <li><code>.bg-danger</code></li> <li><code>.bg-danger-light</code></li> <li><code>.bg-info-dark</code></li> <li><code>.bg-info</code></li> <li><code>.bg-info-light</code></li> <li><code>.bg-primary-dark</code></li> <li><code>.bg-primary</code></li> <li><code>.bg-primary-light</code></li> <li><code>.bg-success-dark</code></li> <li><code>.bg-success</code></li> <li><code>.bg-success-light</code></li> <li><code>.bg-warning-dark</code></li> <li><code>.bg-warning</code></li> <li><code>.bg-warning-light</code></li> <li><code>.bg-gray-darker</code></li> <li><code>.bg-gray-dark</code></li> <li><code>.bg-gray</code></li> <li><code>.bg-gray-light</code></li> <li><code>.bg-gray-lighter</code></li></ul> <h4 id="grid"><a href="#grid" class="header-anchor">#</a> Grid </h4> <ul><li><code>.row</code></li> <li><code>.row.row-table</code></li> <li><code>.col-xs-1</code>… <code>.col-xs-12</code>, only used in <code>.row.row-table</code>.</li></ul> <h4 id="panel"><a href="#panel" class="header-anchor">#</a> Panel </h4> <ul><li><code>.panel</code></li> <li><code>.panel.panel-heading</code></li> <li><code>.panel.panel-body</code></li> <li><code>.panel.panel-footer</code></li></ul> <h4 id="form-app"><a href="#form-app" class="header-anchor">#</a> Form </h4> <ul><li><code>.form-control</code></li></ul> <h4 id="button-app"><a href="#button-app" class="header-anchor">#</a> Button </h4> <ul><li><code>.btn.btn-default</code></li> <li><code>.btn.btn-link</code></li> <li><code>.btn.btn-primary</code></li> <li><code>.btn.btn-success</code></li> <li><code>.btn.btn-info</code></li> <li><code>.btn.btn-warning</code></li> <li><code>.btn.btn-danger</code></li></ul> <h4 id="icon"><a href="#icon" class="header-anchor">#</a> Icon </h4> <ul><li>All fa-class icons are from FontAwesome: <code>fa fa-<icon-name></icon-name></code>.</li> <li>All icon-class icons are from SimpleLineIcons: <code>icon-<icon-name></code>.</li></ul></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/IBAX-io/documentation/edit/master/docs/topics/templates2.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">7/6/2023, 6:59:03 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"> ← <a href="/topics/script.html" class="prev"> Smart Contracts {#smart-contracts} </a></span> <span class="next"><a href="/topics/vm.html"> Compiler and Virtual Machine </a> → </span></p></div> </main></div><div class="global-ui"></div></div> <script src="/assets/js/app.d049f7ab.js" defer></script><script src="/assets/js/2.8d94a0db.js" defer></script><script src="/assets/js/129.aa689ad6.js" defer></script> </body> </html>