User Interfaces¶
- Interfaces building
- Protypo template language
- Protypo functions by purpose
- Protypo functions reference
- Address
- AddressToId
- AddToolButton
- And
- AppParam
- ArrayToSource
- Binary
- Button
- Calculate
- Chart
- CmpTime
- Code
- CodeAsIs
- Data
- DateTime
- DBFind
- Example
- Div
- EcosysParam
- Em
- ForList
- Form
- GetColumnType
- GetHistory
- GetVar
- Hint
- If
- Image
- ImageInput
- Include
- Input
- InputErr
- InputMap
- JsonToSource
- Label
- LangRes
- LinkPage
- Map
- MenuGroup
- MenuItem
- Money
- Or
- P
- QRcode
- RadioGroup
- Range
- Select
- SetTitle
- SetVar
- Span
- Strong
- SysParam
- Table
- TransactionInfo
- VarAsIs
- Styles for mobile app
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 FuncName(parameter number 1, parameter number 2) another text.
FuncName(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.
FuncName("parameter number 1, the second part of first paremeter")
FuncName(`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.
FuncName("parameter number 1, ""the second part of first"" paremeter")
FuncName(`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 ‘’FuncName(Class,Value,Body)’‘:
FuncName(myclass, This is value, Div(divclass, This is paragraph.))
FuncName(Body: Div(divclass, This is paragraph.))
FuncName(myclass, Body: Div(divclass, This is paragraph.))
FuncName(Value: This is value, Body:
Div(divclass, This is paragraph.)
)
FuncName(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: FuncName(...){...}
. 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.#isMobile#
- is 1 if the client is running on a mobile device.
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.
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.
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
thenAppParam(1, type, 2)
returnslight
.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 thecontractField1=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.
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.
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 whenInputName
input has theValue
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
, thenEcosysParam(gender, 2)
will returnfemale
.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)
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.
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.
Example¶
If(GetVar(name)){#name#}.Else{Name is unknown}
Hint¶
Creates a hint element to display hints.
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.
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}}
. Ifcenter
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)
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.)
RadioGroup¶
Creates a radiogroup element.
Syntax¶
RadioGroup(Name, Source, NameColumn, ValueColumn, Value, Class)
[.Validate(validation parameters)]
[.Style(Style)]
-
RadioGroup
-
Name
Element name.
-
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.
-
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)
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).
SysParam¶
Displays the value of a system parameter from the system_parameters table.
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.
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#))
VarAsIs¶
Assigns a value to a variable. The specified value is assigned as is, encountered variable names are not replaced with their values.
For a version with variables substitution, see SetVar.
Syntax¶
VarAsIs(Name, Value)
-
VarAsIs
-
Name
Variable name.
-
Value
Value. Variable names in value are not replaced.
For example, if Value is
example #varname#
, then the value of the variable will also beexample #varname#
.
-
Example¶
VarAsIs(name, I am #name#)
Styles for mobile app¶
Typography¶
Headings¶
h1
…h6
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