User Interfaces

Interfaces building

Integrated Development Environment of the Molis software client, which is created using the JavaScript React library, includes an interface editor and a virtual interface designer. Interface pages are the essential part of applications that provides for retrieval and display of data from database tables, creation of forms for receipt of user input data, passing data to contracts, and navigation between application pages. Interface pages, just as contracts, are stored in the blockchain, which ensures their protection from falsification when loading them in the software client.

Interface template engine

Interface elements (pages and menus) are formed on Validating Nodes in a so-called template engine from templates created by programmers in the interface editor of the Molis software client. All interface pages are built using the Protypo functional language developed by platform developers. Interfaces are requested from nodes on the network using the content API command. What the template engine sends as a reply to such request is not an HTML page, but a JSON code comprised of HTML tags that form a tree in accordance with the template structure. For testing purposes, a POST request can be sent to api/v2/content with the template parameter containing the name of a template to process.

Creating interface templates

Interfaces can be created and edited using a specialized editor, available in the Interface section of administrative tools in Molis. The editor provides for:

  • Writing codes of interface pages with highlighting of keywords of the Protypo template language,
  • Selecting a menu, which will be displayed on the page,
  • Editing the page menu,
  • Configuring permission to edit the page (typically, by way of specifying the name of the contract with permissions in the ContractConditions function, or by direct indication of access rights in the Change conditions field),
  • Launching a visual interface designer,
  • Page preview.

Visual interface designer

Visual Interface Designer allows for creating page designs without resorting to the interface source code in Protypo language. The Designer allows for setting the positions of form elements and text on the page using drag-and-drop, as well as configuring sizes and design of page blocks. The Designer provides a set of ready-to-use blocks for displaying typical data models: panels with headers, forms, and information panels. The program logics (receipt of data and conditional constructs) can be added in the page editor after the page design is created. (In the future, we plan to create a full-scale visual interface editor.)

Use of styles

By default, interface pages are displayed using Angular Bootstrap Angle classes. If needed, users can create their own styles. Storage of styles is implemented using a special stylesheet parameter of the ecosystem configuration table.

Page blocks

To use typical code fragments on multiple interface pages there is an option to create page blocks and embed them in the interface code using the Insert command. Such blocks can be created and edited on the Interface page of the administrative section in Molis. For blocks, just as for pages, permissions for editing can be defined.

Language resources editor

The Molis software client includes a mechanism for interface localization using a special function of the Protypo template language – LangRes, which substitutes the language resource labels on the page with corresponding text lines in the language selected by the user in the software client (or browser for the web-version of the client). A shorter syntax $lable$ can be used instead of the LangRes function. Translation of messages in pop-up windows, initiated by contracts, is carried out by the LangRes function of the Simvolio language.

Language resources can be created and edited in the Language resources section of the administrative tools of the Molis software client. A language resource consists of a label (name) and the translations of this name into different languages with the indication of corresponding two-character language identifiers (EN, FR, JP, etc.).

Rights to add and change language resources can be configured using the same way as for any other table in the languages table (Tables section of the Molis administrative tools).

Protypo template language

Protypo functions provide for implementation of the following operations:

  • retrieving values from the database: DBFind,
  • representation of data retrieved from the database as tables and diagrams,
  • assignment and display of values of variables, operations with data: SetVar, GetVar, Data,
  • display and comparison of date/time values: DateTime, Now, CmpTime,
  • building forms with various sets of user data input fields: Form, ImageInput, Input, RadioGroup, Select,
  • validation of data in the form fields by displaying error messages: Validate, InputErr,
  • display of navigation elements: AddToolButton, LinkPage, Button,
  • calling contracts: Button,
  • creation of HTML page layout elements – various containers with an option to specify css classes: Div, P, Span, etc.,
  • embedding images onto a page and uploading of images: Image and ImageInput,
  • conditional display of page layout fragments: If, ElseIf, Else,
  • creation of multi-level menus,
  • interface localization.

Overview of Protypo

Page template language is a functional language that allows for calling functions using FuncName(parameters), and for nesting functions into each other. Parameters can be specified without quote marks. Unnecessary parameters can be dropped.

Text MyFunc(parameter number 1, parameter number 2) another text.
MyFunc(parameter 1,,,parameter 4)

If a parameter contains a comma, it should be enclosed in quotes marks (back quotes or double quotes). If a function can have only one parameter, commas can be used in it without quotes. Also, quotes should be used in case a parameter has an unpaired closing parenthesis.

MyFunc("parameter number 1, the second part of first paremeter")
MyFunc(`parameter number 1, the second part of first paremeter`)

If you put a parameter in quotes, but a parameter itself includes quotes, then you can use different type of quotes or double them in the text.

MyFunc("parameter number 1, ""the second part of first"" paremeter")
MyFunc(`parameter number 1, "the second part of first" paremeter`)

In description of functions, every parameter has a specific name. You can call functions and specify parameters in the order they were declared, or specify any set of parameters in any order by their names: ‘’Parameter_name: Parameter_value’‘. This approach allows to safely add new function parameters without breaking the compatibility with current templates. For example, all of these calls are correct in terms of language use for a function described as ‘’MyFunc(Class,Value,Body)’‘:

MyFunc(myclass, This is value, Div(divclass, This is paragraph.))
MyFunc(Body: Div(divclass, This is paragraph.))
MyFunc(myclass, Body: Div(divclass, This is paragraph.))
MyFunc(Value: This is value, Body:
     Div(divclass, This is paragraph.)
)
MyFunc(myclass, Value without Body)

Functions can return text, generate HTML elements (for instance, ‘’Input’‘), or create HTML elements with nested HTML elements (‘’Div, P, Span’‘). In the latter case a parameter with a pre-defined name Body should be used to define nested elements. For example, two div, nested in another div, can look like this:

Div(Body:
   Div(class1, This is the first div.)
   Div(class2, This is the second div.)
)

To define nested elements, which are described in the Body parameter, the following representation can be used: MyFunc(...){...}. Nested elements should be specified in curly braces.

Div(){
   Div(class1){
      P(This is the first div.)
      Div(class2){
          Span(This is the second div.)
      }
   }
}

If you need to specify the same function a number of times in a row, you can use points instead of writing the function name every time. For example, the following lines are equal:

Span(Item 1)Span(Item 2)Span(Item 3)
Span(Item 1).(Item 2).(Item 3)

The language allows for assigning variables using the SetVar function. To substitute values of variables use #varname#.

SetVar(name, My Name)
Span(Your name: #name#)

To substitute the language resources of the ecosystem, you can use the $langres$, where langres is the name of the language source.

Span($yourname$: #name#)

The following variables are predefined

  • #key_id# - current user account identifier,
  • #ecosystem_id# - current ecosystem identifier.
  • #guest_key# - guest wallet identifier.

Passing parameters to a page using PageParams

There is a number of functions that support the PageParams parameter, which serves for passing parameters when redirecting to a new page. For example, PageParams: "param1=value1,param2=value2". Parameter values can be both simple strings or rows with value substitution. When parameters are passed to a page, variables with parameter names are created; for example, #param1# and #param2#.

  • PageParams: "hello=world" - the page will receive the hello parameter with world as value,
  • PageParams: "hello=#world#" - the page will receive the hello parameter with the value of the world variable.

Additionally, the Val function allows for obtaining data from forms, which were specified in redirect. In this case,

  • PageParams: "hello=Val(world)" - the page will receive the hello parameter with the value of the world form element.

Calling contracts

Protypo implements contract calling by clicking on a button in a form (Button function). Once this event is initiated, the data entered by the user in the fields of the interface forms is passed to the contract (if the names of form fields correspond to the names of variables in the data section of the called contract, data is transferred automatically). The Button function allows for opening a modal window for user verification of the contract execution (Alert), and initiation of redirect to a specified page after the successful execution of the contract, and passing certain parameters to this page.

Predefined variables

  • isMobile - is 1 if the client is running on a mobile device.

Protypo functions reference

Address

This function returns the account address in the 1234-5678-...-7990 format given the numerical value of the address; if the address is not specified, the address of the current user will be taken as the argument.

Syntax

Address (account)
Address
account

Account identifier.

Example

Span(Your wallet: Address(#account#))

AddressToId

Returns the account identifier for the specified account address in the 1234-5678-...-7990 format.

Syntax

AddressToId(Wallet)
AddressToId
Wallet

Account address in the XXXX-...-XXXX format or as a number.

Example

AddressToId(#wallet#)

AddToolButton

Adds a button to the buttons panel. Creates addtoolbutton element.

Syntax

AddToolButton(Title, Icon, Page, PageParams)
    [.Popup(Width, Header)]
AddToolButton
Title

Button title.

Icon

Icon for the button.

Page

Page name for the jump.

PageParams

Parmeters that are passed to the page.

Popup

Outputs a modal window.

Header

Window header.

Width

Window width in percent.

Range of values for this parameter is from 1 to 100.

Example

AddToolButton(Help, help, help_page)

And

This function returns the result of execution of the and logical operation with all parameters listed in parentheses and separated by commas. The parameter value will be false if it equals an empty string (""), zero or false. In all other cases the parameter value is true. The function returns 1 if true or 0 in all other cases. The element named and is created only when a tree for editing is requested.

Syntax

And(parameters)

Example

If(And(#myval1#,#myval2#), Span(OK))

AppParam

Outputs the value of an app parameter. The value is taken from the app_param table of the current ecosystem. If there is a language resource with the given name, then its value will be substituted automatically.

Syntax

AppParam(App, Name, Index, Source)
AppParam
App

Application identifier.

Name

Parameter name.

Index

This parameter can be used when the parameter value is a list of items separated by commas.

Index of a parameter element, starting from 1. For example if type = full,light then AppParam(1, type, 2) returns light.

This parameter cannot be used with Source parameter.

Source

This parameter can be used when the parameter value is a list of items separated by commas.

Creates a data object. Elements of this object are values of the specified parameter. The object can be used as a data source in Table and Select functions.

This parameter cannot be used with Index parameter.

Example

AppParam(1, type, Source: mytype)

ArrayToSource

Creates an arraytosource element and populates it with key - value pairs that were passed in a JSON array. The resulting data is put into the Source element, which can later be used in functions that use source inputs (such as Table).

Syntax

ArrayToSource(Source, Data)
ArrayToSource
Source

Data source name.

Data

A JSON array or a name of a variable (#name#) that holds a JSON array.

Example

ArrayToSource(src, #myjsonarr#)
ArrayToSource(dat, [1, 2, 3])

Binary

Returns a link to a static file that is stored in the binaries table.

Syntax

Binary(Name, AppID, MemberID)[.ById(ID)][.Ecosystem(ecosystem)]
Binary
Name

File name.

AppID

Application identifier.

MemberID

Account identifier. The default value is 0.

ID

Static file identifier.

ecosystem

Ecosystem identifier. If this parameter is not specified, binary file is requested from the current ecosystem.

Example

Image(Src: Binary("my_image", 1))
Image(Src: Binary().ById(2))
Image(Src: Binary().ById(#id#).Ecosystem(#eco#))

Button

Creates a button HTML element. This element creates a button, which executes a contract or opens a page.

Syntax

Button(Body, Page, Class, Contract, Params, PageParams)
    [.CompositeContract(Contract, Data)]
    [.Alert(Text, ConfirmButton, CancelButton, Icon)]
    [.Popup(Width, Header)]
    [.Style(Style)]
    [.ErrorRedirect((ErrorID,PageName,PageParams)]
Button
Body

Child text or elements.

Page

Name of the page to redirect to.

Class

Classes for the button.

Contract

Name of the contract to execute.

Params

List of values to pass to the contract. By default, values of contract parameters (data section) are obtained from HTML elements (for example, input fields) with similarly-named identifiers (id). If the element identifiers differ from the names of contract parameters, then the assignment in the contractField1=idname1, contractField2=idname2 format should be used. This parameter is returned to attr as an object {field1: idname1, field2: idname2}.

PageParams

Parameters for redirection to a page in the following format: contractField1=idname1, contractField2=idname2. In this case, variables with parameter names #contractField1# and #contractField2 are created on the target page, and are assigned the specified values (see the parameter passing specifications in the “Passing Parameters to a Page Using PageParams” section above).

CompositeContract

Used for adding extra contracts for a button. CompositeContract can be used several times.

Name

Contract name.

Data

Contract parameters as a JSON array.

Alert

Displays a message.

Text

Message text.

ConfirmButton

Confirm button caption.

CancelButton

Cancel button caption.

Icon

Icon.

Popup

Outputs a modal window.

Header

Window header.

Width

Window width in percent.

Range of values for this parameter is from 1 to 100.

Style

Specifies CSS styles.

Style

CSS styles.

ErrorRedirect

Specifies a redirect page. This redirect page is used when the Throw function generates an error during the contract execution. There may be several ErrorRedirect calls. As a result, an errredir attribute is returnes with ErrorID list of keys and parameters as values.

ErrorID

Error identifier.

PageName

Name of the redirect page.

PageParams

Parameters passed to this page.

Example

Button(Submit, default_page, mybtn_class).Alert(Alert message)
Button(Contract: MyContract, Body:My Contract, Class: myclass, Params:"Name=myid,Id=i10,Value")

Calculate

This function returns the result of an arithmetic expression passed in the Exp parameter. The following operations can be used: +, -, *, /, and parenthesis ().

Syntax

Calculate(Exp, Type, Prec)
Calculate
Exp

Arithmetic expression. Can contain numbers and #name# variables.

Type

Result data type: int, float, money. If not specified, then the result type will be float in case there are numbers with a decimal point, or int in all other cases.

Prec

The number of significant digits after the point can be specified for float and money types.

Example

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)

Chart

Creates an HTML diagram.

Syntax

Chart(Type, Source, FieldLabel, FieldValue, Colors)
Chart
Type

Diagram type.

Source

Name of the data source, for example, a source taken from the DBFind command.

FieldLabel

Name of a field that will be used for headers.

FieldValue

Name of a field that will be used for values.

Colors

List of used colors.

Example

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")

CmpTime

This function compares two time values in the same format.

Supports unixtime, YYYY-MM-DD HH:MM:SS, and any arbitrary format, if the sequence is followed from years to seconds, for example YYYYMMDD).

Syntax

CmpTime(Time1, Time2)

Return values

  • -1 - Time1 < Time2,
  • 0 - Time1 = Time2,
  • 1 - Time1 > Time2.

Example

If(CmpTime(#time1#, #time2#)<0){...}

Code

Creates a code element for displaying the specified code.

This function replaces variables (e.g. #name#) with their values.

Syntax

Code(Text)
Code
Text

Source code.

Example

Code( P(This is the first line.
    Span(This is the second line.))
)

CodeAsIs

Creates a code element for displaying the specified code.

This function does not replace variables with their values. For example, #name# will be displayed as is.

Syntax

CodeAsIs(Text)
CodeAsIs
Text

Source code.

Example

CodeAsIs( P(This is the #test1#.
    Span(This is the #test2#.))
)

Data

Creates a data element and fills it with specified data and put into the Source, that then should be specified in Table and other commands resivieng Source as the input data. The sequence of column names corresponds to that of data entry values.

Syntax

Data(Source,Columns,Data)
    [.Custom(Column){Body}]
Data
Source

Data source name. You can specify any name, which can be included in other commands later as a data source (e.g. Table).

Columns

List of columns, separated by commas.

Data

Data.

One record per line. Column values must be separated by commas. Data should be in the same order as set in Columns.

For values with commas, put the value in double quotes ("example1, example2", 1, 2). For values with quotes, put the value in double double quotes ("""example", "example2""", 1, 2).

Custom

Allows for assigning calculated columns for data. For example, you can specify a template for buttons and additional page layout elements. These fields are usually assigned for output to Table and other commands that use received data.

If you want to assign several calculated columns, use multiple Custom tail functions.

Column

Column name. A unique name must be assigned.

Body

A code fragment. You can obtain values from other columns in this entry using #columnname#, and then use these values in the code fragment.

Example

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#"}

DateTime

Displays time and date in the specified format.

Syntax

DateTime(DateTime, Format)
DateTime
DateTime

Time and date in unix time or in a standard format 2006-01-02T15:04:05.

Format

Format template: YY 2-digit year format, YYYY 4-digit year format, MM - month, DD - day, HH - hours, MM - minutes, SS – seconds. Example: YY/MM/DD HH:MM.

If the format is not specified, the timeformat parameter value set in the languages table will be used. If this parameter is absent, the YYYY-MM-DD HH:MI:SS format will be used instead.

Example

DateTime(2017-11-07T17:51:08)
DateTime(#mytime#,HH:MI DD.MM.YYYY)

DBFind

Creates a dbfind element, fills it with data from the table table, and puts it to the Source structure. The Source structure can be then used in Table and other commands that receive Source as input data. The sequence of records in data must correspond to the sequence of column names.

Syntax

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)]
DBFind
table

Table name.

Source

Data source name.

Columns
columns

List of columns to be returned. If not specified, all columns will be returned. If there are columns of JSON type, you can address the record fields using the following syntax: columnname->fieldname. In this case, the resulting column name will be columnname.fieldname.

Where
conditions

Data search conditions. For example, .Where(name = '#myval#').

If there are columns of JSON type, you can address record fields using the following syntax: columnname->fieldname.

WhereId

Search by ID. For example, .WhereId(1).

id

Record identifier.

Order

Sorting by field.

For more information about sorting syntax, see DBFind.

name

Field name.

Limit
limit

Number of returned rows. Default value is 25, maximum value is 250.

Offset
offset

Offset for returned rows.

Count

Total number of rows for the specified Where condition.

In addition to being stored in a variable, the total count is also returned in the count parameter of the dbfind element.

If Where and WhereID were not specified, then the total number of rows in a table will be returned.

countvar

Name of a variable that will hold the row count.

Ecosystem
id

Ecosystem ID. By default, data is taken from the specified table in the current ecosystem.

Cutoff

Is used for trimming and displaying a large volume of text data.

columns

List of columns separated by commas that must be processed by the Cutoff tail function.

As a result, column value is replaced by a JSON obkect with two fields: link and title. If the value in a column is longer than 32 symbols, then a link to a full text and first 32 symbols are returned. If the value is 32 symbols and shorter, then the link is empty, and the title holds the full column value.

Custom

Allows for assigning calculated columns for data. For example, you can specify a template for buttons and additional page layout elements. These fields are usually assigned for output to Table and other commands that use received data.

If you want to assign several calculated columns, use multiple Custom tail functions.

Column

Column name. A unique name must be assigned.

Body

A code fragment. You can obtain values from other columns in this entry using #columnname#, and then use these values in the code fragment.

Vars

Generates a set of variables with values from the first row obtained by the query. When specifying this function, the Limit parameter automatically becomes equal to 1 and only one record is returned.

Prefix

Prefix that is added to variable names. The format is #prefix_columnname#, where the column name follows the underscore sign. If there are columns containing JSON fields, then the resulting variable will be in the following format #prefix_columnname_field#.

Example

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#)
}

Div

Creates a div HTML element.

Syntax

Div(Class, Body)
    [.Style(Style)]
    [.Show(Condition)]
    [.Hide(Condition)]
Div
Class

Classes for this div.

Body

Child elements.

Style

Specifies CSS styles.

Style

CSS styles.

Show
Defines conditions to show this block.
Condition

See Hide below.

Hide

Defines conditions to hide this block.

Condition

Sequence of InputName=Value expressions. Condition is true when all expressions that it contains are true. An expression is true when InputName input has the Value text. If several Show or Hide calls are specified, then at least one of the Condition parameters must be true.

Example

Div(class1 class2, This is a paragraph.).Show(inp1=test,inp2=none)

EcosysParam

This function gets a parameter value from the parameters table of the current ecosystem. If there is a language resource for the resulting name, it will be translated accordingly.

Syntax

EcosysParam(Name, Index, Source)
EcosysParam
Name

Parameter name.

Index

In cases where the requested parameter is a list of elements separated by commas, you can specify an index starting from 1. For example, if gender = male,female, then EcosysParam(gender, 2) will return female.

This parameter cannot be used with Source parameter.

Source

This parameter can be used when the parameter value is a list of items separated by commas.

Creates a data object. Elements of this object are values of the specified parameter. The object can be used as a data source in Table and Select functions.

This parameter cannot be used with Index parameter.

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)

Em

Creates an em HTML element.

Syntax

Em(Body, Class)
Em
Body

Сhild text or elements.

Class

Classes for this em.

Example

This is an Em(important news).

ForList

Displays a list of elements from the Source data source in the template format set out in Body, and creates the forlist element.

Syntax

ForList(Source, Index){Body}
ForList
Source

Data source from DBFind or Data functions.

Index

Variable for the iteration counter. Count starts from 1.

This parameter is optional. If it is not specified, the iteration count value is written to the [Source]_index variable.

Body

A template to insert the elements in.

ForList(mysrc){Span(#mysrc_index#. #name#)}

Form

Creates a form HTML element.

Syntax

Form(Class, Body) [.Style(Style)]
Form
Body

Child class or elements.

Class

Classes for this form.

Style

Specifies CSS styles.

Style

CSS styles.

Example

Form(class1 class2, Input(myid))

GetColumnType

Returns the type of a column in a specified table.

Following column types can be returned: text, varchar, number, money, double, bytes, json, datetime, double.

Syntax

GetColumnType(Table, Column)
GetColumnType
Table

Table name.

Column

Column name.

Example

SetVar(coltype,GetColumnType(members, member_name))Div(){#coltype#}

GetHistory

Creates a gethistory element and popuates it with the history of changes of a record from the specified table. The resulting data is put into the Source element, which can later be used in functions that use source inputs (such as Table).

The resulting list is sorted in the order from recent changes to earlier ones.

The id field in the resulting table points to the id in the rollback_tx table. The block_id field contains the block number. The block_time field contains the block timestamp.

Syntax

GetHistory(Source, Name, Id, RollbackId)
GetHistory
Source

Name for the data source.

Name

Table name.

Id

Identifier of a record.

RollbackId

Optional parameter. If specified, only one record with the specified identifier will be returned from the rollback_tx table.

Example

GetHistory(blocks, BlockHistory, 1)

GetVar

This function returns the value of the current variable if it exists, or returns an empty string if a variable with this name is not defined. An element with getvar name is created only when a tree for editing is requested. The difference between GetVar(varname) and #varname# is that in case varname does not exist, GetVar will return an empty string, whereas #varname# will be interpreted as a string value.

Syntax

GetVar(Name)
GetVar
Name

Variable name.

Example

If(GetVar(name)){#name#}.Else{Name is unknown}

Hint

Creates a hint element to display hints.

Syntax

Hint(Icon,Title,Text)
Hint
Icon

Icon name.

Title

Hint title.

Text

Hint text.

Example

Hint(myicon, My Header, This is a hint text)

If

Conditional statement.

Child elements of the first If or ElseIf with fulfilled Condition are returned. Otherwise, child elements of Else are returned.

Syntax

If(Condition){ Body }
    [.ElseIf(Condition){ Body }]
    [.Else{ Body }]
If
Condition

A condition is considered to be not fulfilled if it equals an empty string, 0 or false. In all other cases the condition is considered fulfilled.

Body

Child elements.

Example

If(#value#){
   Span(Value)
}.ElseIf(#value2#){Span(Value 2)
}.ElseIf(#value3#){Span(Value 3)}.Else{
   Span(Nothing)
}

Image

Creates an image HTML element.

Syntax

Image(Src, Alt, Class)
    [.Style(Style)]
Image
Src

Image source, file or data:....

Alt

Alternative text for the image.

Сlass

List of classes.

Example

Image(\images\myphoto.jpg)

ImageInput

Creates an imageinput element for image upload. In the third parameter you can specify either image height or aspect ratio to apply: 1/2, 2/1, 3/4, etc. The default width is 100 pixels with 1/1 aspect ratio.

Syntax

ImageInput(Name, Width, Ratio, Format)
ImageInput
Name

Element name.

Width

Width of the cropped image.

Ratio

Aspect ratio (width to height) or height of the image.

Format

Format of the uploaded image.

Example

ImageInput(avatar, 100, 2/1)

Include

Inserts a template with a specified name to the page code.

Syntax

Include(Name)
Include
Name

Template name.

Example

Div(myclass, Include(mywidget))

Input

Creates an input HTML element.

Syntax

Input(Name, Class, Placeholder, Type, Value, Disabled)
    [.Validate(validation parameters)]
    [.Style(Style)]
Input
Name

Element name.

Class

Classes for this input.

Placeholder

The placeholder element for this input.

Type

Type of the input.

Value

Element value.

Disabled

If the input is disabled or not.

Validate

Validation parameters.

Style

Specifies CSS styles.

Style

CSS styles.

Example

Input(Name: name, Type: text, Placeholder: Enter your name)
Input(Name: num, Type: text).Validate(minLength: 6, maxLength: 20)

InputErr

Creates an inputerr element with validation error texts.

Syntax

InputErr(Name,validation errors)]
InputErr
Name

Name of the corresponding Input element.

validation errors

One or more parameters for validation error messages.

Example

InputErr(Name: name,
    minLength: Value is too short,
    maxLength: The length of the value must be less than 20 characters)

InputMap

Creates a text input field for an address. Provides an ability to select coordinates on a map.

Syntax

InputMap(Name, Type, MapType, Value)
InputMap
Name

Element name.

Value

Default value.

This value is an object in the string format. For example, {"coords":[{"lat":number,"lng":number},]} or {"zoom":int, "center":{"lat":number,"lng":number}}. The address field can be used to save the address value for cases when InputMap is created with a predefined Value, so that address field is not empty.

Type

Use polygon value for this parameter.

MapType

Map type.

This parameter can have the following values: hybrid, roadmap, satellite, terrain.

Example

InputMap(Name: Coords,Type: polygon, MapType: hybrid, Value: `{"zoom":8, "center":{"lat":55.749942860682545,"lng":37.6207172870636}}`)

JsonToSource

Creates a jsontosource element and populates it with key - value pairs that were passed in a JSON oblect. The resulting data is put into the Source element, which can later be used in functions that use source inputs (such as Table).

The records in the resulting data is sorted by JSON keys, in alphabetical order.

Syntax

JsonToSource(Source, Data)
JsonToSource
Source

Data source name.

Data

A JSON oblect or a name of a variable (#name#)that holds a JSON array.

Example

JsonToSource(src, #myjson#)
JsonToSource(dat, {"param":"value", "param2": "value 2"})

Label

Creates a label HTML element.

Syntax

Label(Body, Class, For)
    [.Style(Style)]
Label
Body

Child text or elements.

Class

Classes for this label.

For

This label’s for value.

Style

Specifies CSS styles.

Style

CSS styles.

Example

Label(The first item).

LangRes

Returns a specified language resource. In case of request to a tree for editing it returns the langres element. A short notation in the $langres$ format can be used.

Syntax

LangRes(Name, Lang)
LangRes
Name

Name of language resource.

Lang

Two-character language identifier.

By default, the language defined in the Accept-Language request is returned.

Lcid identifiers can be specified, for example, en-US,en-GB. In this case, if the requested values will not be found, for example, for en-US, then the language resource will be looked for in en.

Example

LangRes(name)
LangRes(myres, fr)

LinkPage

Creates a linkpage element – a link to a page.

Syntax

LinkPage(Body, Page, Class, PageParams)
    [.Style(Style)]
LinkPage
Body

Child elements or text.

Page

Page to redirect to.

Class

Classes for this button.

PageParams

Redirection parameters.

Style

Specifies CSS styles.

Style

CSS styles

Example

LinkPage(My Page, default_page, mybtn_class)

Map

Creates a visual representation of a map and displays coordinates in an arbitrary format.

Syntax

Map(Hmap, MapType, Value)
Map
Hmap

HTML element height on a page.

The default value is 100.

Value

Map value, an object in the string format.

For example: {"coords":[{"lat":number,"lng":number},]} or {"zoom":int, "center":{"lat":number,"lng":number}}. If center is not specified, then map window will be automatically adjusted for the specified coordinates.

MapType

Map type.

This parameter can have the following values: hybrid, roadmap, satellite, terrain.

Example

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"})

Money

Returns a string value of exp/10^digit. If Digit parameter is not specified, it is taken from the money_digit ecosystem parameter.

Syntax

Money(Exp, Digit)
Money
Exp

Numeric value as a string.

Digit

Exponent of the base 10 in the exp/10^digit expression. This value can be positive or negative. Positive value determines the number of digits after the comma.

Example

Money(Exp, Digit)

Now

This function returns the current time in the specified format, which by default is the UNIX format (number of seconds elapsed since January 1, 1970). If the requested time format is datetime, then date and time are shown as YYYY-MM-DD HH:MI:SS. An interval can be specified in the second parameter (for instance, +5 days).

Syntax

Now(Format, Interval)
Now
Format

Output format with a desired combination of YYYY, MM, DD, HH, MI, SS or datetime.

Interval

Time offset, backward or forward in time.

Example: +5 days.

Example

Now()
Now(DD.MM.YYYY HH:MM)
Now(datetime,-3 hours)

Or

Returns a result of the IF logical operation with all parameters specified in parentheses and separated by commas. The parameter value is considered false if it equals an empty string (""), 0 or false. In all other cases the parameter value is considered true. The function returns 1 for true or 0 in all other cases. Element named or is created only when the tree for editing is requested.

Syntax

Or(parameters)

Example

If(Or(#myval1#,#myval2#), Span(OK))

P

Creates a p HTML element.

Syntax

P(Body, Class)
    [.Style(Style)]
P
Body

сhild text or elements.

Class

classes for this p.

Style

Specifies CSS styles.

Style

CSS styles.

Example

P(This is the first line.
  This is the second line.)

QRcode

Returns a qrcode element with a QR code for the specified text.

Syntax

QRcode(Text)
QRcode
Text

Text for the QR code.

Example

QRcode(#name#)

RadioGroup

Creates a radiogroup element.

Syntax

RadioGroup(Name, Source, NameColumn, ValueColumn, Value, Class)
    [.Validate(validation parameters)]
    [.Style(Style)]
RadioGroup
Name

Element name.

Source

Data source name from DBFind or Data functions.

NameColumn

Column name to use as a source of element names.

ValueColumn

Column name to use as a source of element values.

Columns created using Custom must not be used in this parameter.

Value

Default value.

Class

Classes for the element.

Validate

Validation parameters.

Style

Specifies CSS styles.

Style

CSS styles.

Example

DBFind(mytable, mysrc)
RadioGroup(mysrc, name)

Range

Creates a range element and fills it with integer values from From to To (To is not included) with a Step step. The resulting data is put into the Source element, which can later be used in functions that use source inputs (such as Table). Values are written to the id column. If invalid parameters are specified, an empty Source is returned.

Syntax

Range(Source,From,To,Step)
Range
Source

Data source name.

From

Starting value (i = From).

To

End value (i < To).

Step

Value change step. If this parameter is not specified a value of 1 is used.

Example

Range(my,0,5)
SetVar(from, 5).(to, -4).(step,-2)
Range(Source: neg, From: #from#, To: #to#, Step: #step#)

Select

Creates a select HTML element.

Syntax

Select(Name, Source, NameColumn, ValueColumn, Value, Class)
    [.Validate(validation parameters)]
    [.Style(Style)]
Select
Name

Element name.

Source

Data source name from DBFind or Data functions.

NameColumn

Column name to use as a source of element names.

ValueColumn

Column name to use as a source of element values.

Columns created using Custom must not be used in this parameter.

Value

Default value.

Class

Classes for the element.

Validate

Validation parameters.

Style

Specifies CSS styles.

Style

CSS styles.

Example

DBFind(mytable, mysrc)
Select(mysrc, name)

SetTitle

Sets the page title. The element settitle IS be created.

Syntax

SetTitle(Title)
SetTitle
Title

Page title.

Example

SetTitle(My page)

SetVar

Assigns a Value to a Name variable.

Syntax

SetVar(Name, Value)
SetVar
Name

Variable name.

Value

Value of the variable, which can contain a reference to another variable.

Example

SetVar(name, John Smith).(out, I am #name#)
Span(#out#)

Span

Creates a span HTML element.

Syntax

Span(Body, Class)
    [.Style(Style)]
Span
Body

Child class or elements.

Class

Classes for this span.

Style

Specifies CSS styles.

Style

CSS styles.

Example

This is Span(the first item, myclass1).

Strong

Creates a strong HTML element.

Syntax

Strong(Body, Class)
Strong
Body

Child class or elements.

Class

Classes for this strong.

Example

This is Strong(the first item, myclass1).

SysParam

Displays the value of a system parameter from the system_parameters table.

Syntax

SysParam(Name)
SysParam
Name

Parameter name.

Example

Address(SysParam(founder_account))

Table

Creates a table HTML element.

Syntax

Table(Source, Columns)
    [.Style(Style)]
Table
Source

Data source name as specified, for example, in the DBFind command.

Columns

Headers and corresponding column names, as follows: Title1=column1,Title2=column2.

Style

Specifies CSS styles.

Style

CSS styles.

Example

DBFind(mytable, mysrc)
Table(mysrc,"ID=id,Name=name")

TransactionInfo

The function searches a transaction by the specified hash and returns information about the executed contract and its parameters.

Syntax

TransactionInfo(Hash)
TransactionInfo
Hash

Transaction hash in a hex string format.

Return value

The function returns a string in the json format:

{"contract":"ContractName", "params":{"key": "val"}, "block": "N"}

Above,

  • contract - contract name
  • params - parameters passed to the contract
  • block - block ID where this transaction was processed.

Example

P(TransactionInfo(#hash#))

Styles for mobile app

Typography

Headings

  • h1h6

Emphasis Classes

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger

Colors

  • .bg-danger-dark
  • .bg-danger
  • .bg-danger-light
  • .bg-info-dark
  • .bg-info
  • .bg-info-light
  • .bg-primary-dark
  • .bg-primary
  • .bg-primary-light
  • .bg-success-dark
  • .bg-success
  • .bg-success-light
  • .bg-warning-dark
  • .bg-warning
  • .bg-warning-light
  • .bg-gray-darker
  • .bg-gray-dark
  • .bg-gray
  • .bg-gray-light
  • .bg-gray-lighter

Grid

  • .row
  • .row.row-table
  • .col-xs-1.col-xs-12 works only when the parent has .row.row-table class

Panel

  • .panel
  • .panel.panel-heading
  • .panel.panel-body
  • .panel.panel-footer

Form

  • .form-control

Button

  • .btn.btn-default
  • .btn.btn-link
  • .btn.btn-primary
  • .btn.btn-success
  • .btn.btn-info
  • .btn.btn-warning
  • .btn.btn-danger

Icons

  • All icons from FontAwesome: fa fa-<icon-name></icon-name>.
  • All icons from SimpleLineIcons: icon-<icon-name>.