Интерфейсы пользователя

Построение интерфейсов

Программный клиент Molis, реализованый на библиотеке JavaScript React, содержит редактор и визуальный конструктор интерфейсов. Страницы интерфейса являются неотъемлемой частью приложений и обеспечивают получение и отображение данных из таблиц базы данных, создание форм для получения данных от пользователя, передачу данных в контракт, а также навигацию между страницами приложений. Страницы, как и контракты, хранятся в блокчейне, что обеспечивает возможность контроля их нефальсифицированности при загрузке в программный клиент.

Шаблонизатор интерфейсов

Элементы интерфейса (страницы и меню) формируются на валидирующих узлах в так называемом шаблонизаторе из шаблонов, написанных программистами в редакторе интерфейсов программного клиента Molis. Используется специально написанный разработчиками платформы функциональный язык Protypo. Интерфейсы запрашиваются у узлов сети командой content API. Шблонизатор посылает не готовую HTML страницу, а JSON код, который представляет собой HTML тэги, расположенные в виде дерева в соответствии со структурой шаблона. Для тестирования можно отправить POST запрос в api/v2/content c параметром template, который содержит шаблон для обработки.

Создание шаблонов интерфейсов

Интерфейсы создаются и редактируются в специальном редакторе секции Interface административного раздела Molis. Редактор обеспечивает:

  • написание кода интерфейсных страниц с подсветкой ключевых слов языка шаблонизатора Protypo,
  • выбор меню, которое будет отображаться на странице,
  • переход к редактированию привязанного меню,
  • задание прав на редактирование страницы (традиционно через указание имени контракта с определёнными в нем правами в специальной функции ContractConditions или прямым указанием условий доступа в поле Change conditions),
  • вызов визуального редактора,
  • переход к просмотру страницы.

Визуальный конструктор интерфейсов

Визуальный конструктор интерфейсов позволяет создавать дизайн страниц без обращения к коду на языке Protypo. В конструкторе методом drag-and-drop настраиваются положение элементов форм и текста, размеры и стилевое оформление блоков страницы. В конструкторе имеется набор готовых блоков для отображения типовых моделей данных: панели с заголовками, формы, информационные панели. Программная логика (получение данных, условные конструкции) вводится в стандартном редакторе страниц после создания дизайна (в дальнейшем планируется реализовать полнофункциональный визуальный редактор интерфейсов).

Использование стилей

По умолчанию страницы интерфейса отображаются с использование классов Angular Bootstrap Angle. При необходимости можно создавать собственные стили, для хранения которых используется специальный параметр настроечной таблицы экосистемы stylesheet.

Страничные блоки

Для использования на множестве страниц типового фрагмента кода имеется возможность создавать страничные блоки и встраивать их в код интерфейса с помощью команды Insert. Создаются и редактируются блоки на странице Interface административной секции Molis. Для блоков, как и для страниц, задаются права на редактирование.

Редактор языковых ресурсов

Программный клиент Molis содержит механизм локализации интерфейса: специальная функция языка шаблонизатора LangRes подставляет в текст страницы вместо языкового ресурса (лейбла) его перевод на язык установленный в программном клиенте (или в браузере для web-версии клиента). Вместо функции LangRes также возможно использование сокращенного синтаксиса $lable$. Перевод сообщений во всплывающих окнах, инициируемых контрактами, выполняется функцией LangRes, имеющейся в языке Simvolio.

Ввод и редактирование языковых ресурсов осуществляется в специальном разделе Language resources административной секции программного клиента Molis. При создании языкового ресурса задается его лейбл (имя) и необходимое число переводов с указанием двухсимвольного идентификатора языка (en, fr и др.).

Права на добавление и изменение языковых ресурсов настраиваются стандартными для таблиц методами в таблице languages (раздел Tables административной секции Molis).

Язык шаблонизатора Protypo

Функции Protypo обеспечивают выполнение следующих операций:

  • получение значений из базы данных: DBFind;
  • представление данных, полученных и базы данных в виде таблиц и диаграмм;
  • присваивание и вывод значений переменных, оперирование с данными;
  • вывод и сравнение значений времени и даты;
  • построение форм с необходимым набором полей для ввода данных пользователя;
  • валидация данных в полях формы с выводом сообщений об ошибках;
  • вывод элементов навигации;
  • вызов контрактов;
  • создание элементов HTML разметки страницы – различных контейнеров с возможностью указания css классов;
  • встраивание изображения в страницу и загрузку изображения;
  • условный вывод фрагментов шаблонов страниц: If, ElseIf, Else;
  • создание многоуровневого меню;
  • локализация интерфейсов.

Общее описание языка Protypo

Язык построения шаблонов страниц является функциональным языком, в котором вызываются функции вида FuncName(parameters). Функции могут вкладываться друг в друга. Параметры можно не заключать в кавычки. Если параметр не передаётся при текущем вызове функции, его можно опустить.

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

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

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

Если вы заключили в кавычки параметр, в содержимом которого также используются кавычки, можно использовать разные кавычки или дублировать их в тексте.

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

При описании функций каждый параметр имеет определенное имя. Вы можете вызывать функции и указывать параметры в том порядке, в котором они описаны, а можете явно указывать только нужные параметры по их именам в любом порядке как Имя_параметра: Значение_параметра. Такой подход позволяет безболезненно добавлять новые параметры в функции без нарушения совместимости с текущими шаблонами. Например, если у вас есть функция, описанная как 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)

Некоторые функции возвращают просто текст, некоторые создают HTML элемент (например, Input), а некоторые функцию создают HTML элемент с вложенными HTML элементами (Div, P, Span). В последнем случае для определения вложенных элементов используется параметр с предопределённым именем Body. Например, два элемента div, вложенные в другой div, могут выглядеть так

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

Для указания вложенных элементов, которые описываются в параметре Body, можно использовать слежующее представление: FuncName(...){...}, где в фигурных скобках указываются вложенные элементы.

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

Если подряд используется несколько одинаковых функций, то вместо имён второй и последующих можно ставить только точку. Например, следующие две строчки эквивалентны

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

В языке можно присваивать переменные с помощью функции SetVar. Для подстановки значений переменных используется запись #varname#.

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

Для подстановки языковых ресурсов экосистемы можно использовать запись $langres$, где langres имя языкового ресурса.

Span($yourname$: #name#)

Существуют следующие предопределенные переменные:

  • #key_id# - идентификатор-аккаунта текущего пользователя.
  • #ecosystem_id# - идентификатор текущей экосистемы.
  • #guest_key# - идентификатор гостевого кошелька.
  • #isMobile - переменная равна 1, если клиент запущен на мобильном устройстве.

Передача параметров странице через PageParams

Есть ряд функций, которые принимают параметр PageParams. Он служит для передачи параметров при переходе на новую страницу. Например, PageParams: "param1=value1,param2=value2". Параметры могут содержать как обычные строки так и строки с подстановкой значений переменных. При передаче странице параметров создаются переменные с именем параметра, например, #param1# и #param2#.

  • PageParams: "hello=world" - страница получит параметр hello со значением world
  • PageParams: "hello=#world#" - страница получит параметр hello со значением переменной world

Кроме этого, существует функция Val, которая позволяет получать данные из форм, в которые были внесены данные на момент перехода. В этом случае,

  • PageParams: "hello=Val(world)" - страница получит параметр hello с содержимым элемента формы с именем world

Вызов контрактов

Вызов контрактов Protypo происходит при клике на кнопке формы (функция Button). При этом производится передача в контракт данных, введённых пользователем в поля формы (если имена полей формы и имена переменных в секции data вызываемого контракта совпадают, то данные передаются автоматически). В функции Button возможен вызов модального окна для подтверждения пользователем запуска контракта (Alert), а также инициация перехода на указанную страницу после успешного выполнения контракта с передачей странице перечисленных параметров.

Функции Protypo

Операции с переменными

GetVar(Name)

Функция возвращает значение указанной переменной, если она существует, и возвращает пустую строку, если переменная с данным именем не определена. Элемент с именем getvar создается только при запросе дерева для редактирования. Отличие GetVar(varname) от использования #varname# состоит в том, что если varname не существует, то GetVar возвратит пустую строку, а #varname# выведется как текст.

  • Name - имя переменной.
If(GetVar(name)){#name#}.Else{Name is unknown}

SetVar(Name, Value)

Присваивает переменной с именем Name значение Value.

  • Name - имя переменной,
  • Value - значение переменной, может содержать ссылку на другие переменные.
SetVar(name, John Smith).(out, I am #name#)
Span(#out#)

VarAsIs(Name, Value)

Присваивает переменной с именем Name значение Value, но, в отличии от функции SetVar, не происходит подстановка переменных в значении Value.

  • Name - имя переменной,
  • Value - значение переменной, может содержать ссылку на другие переменные, но они не подставляются.
VarAsIs(name, I am #name#)

Навигация

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

Добавляет кнопку в панель инструментов. Создает элемент addtoolbutton.

  • Title - заголовок кнопки,
  • Icon - иконка для кнопки,
  • Page - имя страницы для перехода,
  • PageParams - параметры, передаваемые странице.

Popup - используется для вывода модального окна.

  • Header - заголовок окна,
  • Width - ширина окна в процентах, принимает значения от 1 до 100.
AddToolButton(Help, help, help_page)

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

Создает элемент HTML-формы button, по клику на котором инициируется выполнение контракта или переход на другую страницу.

  • Body - дочерний текст или элементы, используется для ввода имени кнопки,
  • Page - имя страницы для перехода,
  • Class - классы для данной кнопки,
  • Contract - имя вызываемого контракта,
  • Params - список передаваемых контракту значений; по умолчанию, значения параметров контракта (секция data) берутся из HTML элементов (например, полей формы) с одноименными идентификаторами (id); если имена идентификаторов элементов, значения которых требуется передать в контракт, отличаются от имен параметров контракта, то используется присваивание парамтеров в формате contractField1=idname1, contractField2=idname2,
  • PageParams - параметры для перехода на страницу в формате contractField1=idname1, contractField2=idname2, при этом на странице перехода создаются переменные с именами параметров #contractField1# и #contractField2# с присвоением им указанных значений (особенности передачи параметров см. в разделе выше «Передача параметров странице через PageParams»).

CompositeContract - используется для навешивании на кнопку дополнительных контрактов. Можно для одной кнопки указывать несколько CompositeContract.

  • Name - имя контракта,
  • Data - параметры для контракта в виде JSON массива с параметрами.

Alert - используется для вывода сообщений.

  • Text - текст сообщения,
  • ConfirmButton - текст кнопки подтверждения,
  • CancelButton - текст кнопки отмены,
  • Icon - иконка.

Popup - используется для вывода модального окна.

  • Header - заголовок окна,
  • Width - ширина окна в процентах, принимает значения от 1 до 100.

Style - служит для указания css стилей

  • Style - css стили.

ErrorRedirect - служит для указания редиректа в случае получения ошибки, сгенерированной функцией Throw во время выполнения контракта. Может быть несколько вызовов ErrorRedirect. В результате возвращается атрибут errredir со списком ключей ErrorID и параметрами в качестве значения.

  • ErrorID - идентификатор ошибки,
  • PageName - имя страницы,
  • PageParams - передаваемые параметры.
Button(Submit, default_page).CompisiteContract(NewPage, [{"Name":"Name of Page"},{"Value":"Span(Test)"}])
Button(Submit, default_page, mybtn_class).Alert(Alert message)
Button(Submit, default_page, mybtn_class).Popup(Header: message, Width: 50)
Button(Contract: MyContract, Body:My Contract, Class: myclass, Params:"Name=myid,Id=i10,Value")

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

Создает элемент linkpage для ссылки на страницу.

  • Body - дочерние текст или элементы,
  • Page - имя страницы перехода,
  • Class - классы элемента,
  • PageParams - параметры для перехода на страницу в формате contractField1=idname1, contractField2=idname2 (особенности передачи параметров см. в разделе выше «Передача параметров странице через PageParams»),

Style - служит для указания css стилей,

  • Style - css стили.
LinkPage(My Page, default_page, mybtn_class)

Операции с данными

And(parameters)

Функция возвращает результат выполнения логической операции И со всеми перечисленными в скобках через запятую параметрами. Значение параметра принимается как false, если он равен пустой строке (""), 0 или false. Во всех остальных случаях значение параметра считается true. Соответственно функция возвращает 1 в случае истины и в противном случае 0. Элемент с именем and создается только при запросе дерева для редактирования.

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

Calculate(Exp, Type, Prec)

Функция возвращает результат арифметического выражения, переданного в параметре Exp. Можно использовать операции +, -, *, / и круглые скобки ().

  • Exp - арифметическое выражение. Может содержать числа и переменные #name#.
  • Type - тип результата: int, float, money. Если не указан, то если есть числа с десятичной точкой, то берется тип float, в противном случае int.
  • Prec - для типа float и money можно указать количество значащих цифр после точки.
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)

CmpTime(Time1, Time2)

Функция сравнивает два значения времени в одинаковом формате (поддерживается формат unixtime, строковый - YYYY-MM-DD HH:MM:SS, а также можно и в произвольном при условии соблюдения последовательности от годов к секундам, например, YYYYMMDD). Возвращает:

  • -1 - Time1 < Time2,
  • 0 - Time1 = Time2,
  • 1 - Time1 > Time2.
If(CmpTime(#time1#, #time2#)<0){...}

DateTime(DateTime, Format, Location)

Функция выводит на экран значение даты и времени в заданном формате.

  • DateTime - время в unixtime или стандартном формате 2006-01-02T15:04:05.
  • Format - шаблон формата : YY короткий год, YYYY полный год, MM - месяц, DD - день, HH - часы, MM - минуты, SS – секунды, например, YY/MM/DD HH:MM. Если формат не указан, то будет использовано значение параметра timeformat определенное в таблице languages, если его нет, то YYYY-MM-DD HH:MI:SS.
  • Location - временная зона, список поддерживаемых временных зон содержится в системной таблице @1time_zones.
DateTime(2017-11-07T17:51:08)
DateTime(#mytime#,HH:MI DD.MM.YYYY)
DateTime(DateTime: 1560938400, Location: "Europe/Moscow")

Money(Exp, Digit)

Функция возвращает значение Exp/10^Digit. Если параметр Digit не указан, то он будет браться из параметра money_digit экосистемы.

  • Exp - Числововое значение,
  • Digit - степень 10 в выражении Exp/10^Digit. Может быть как положительным, так и отрицательным. В случае положительного значения определяет количество цифр после запятой.
Money(#val#, #digit#)
Money(123456723722323332)

Or(parameters)

Функция возвращает результат выполнения логической операции ИЛИ со всеми перечисленными в скобках через запятую параметрами. Значение параметра принимается как false, если он равен пустой строке (""), 0 или false. Во всех остальных случаях значение параметра считается true. Соответственно функция возвращает 1 в случае истины и в противном случае 0. Элемент с именем or создается только при запросе дерева для редактирования.

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

Отображение данных

Code(Text)

Создает элемент code для вывода указанного кода. При этом переменные #name# будут заменены на их значения.

  • Text - исходный код, который необходимо вывести.
Code( P(This is the first line.
    Span(This is the second line.))
)

CodeAsIs(Text)

Создает элемент code для вывода указанного кода, но при этом, в отличии от функции Code, не происходит замена переменных вида #name#.

  • Text - исходный код, который необходимо вывести.
CodeAsIs( P(This is the #test1#.
    Span(This is the #test2#.))
)

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

Создает HTML диаграмму.

  • Type - тип диаграммы,
  • Source - имя источника данных, например, из команды DBFind,
  • FieldLabel - название поля, используемого для заголовков,
  • FieldValue - название поля, используемого для значений,
  • Colors - список используемых цветов
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")

ForList(Source, Index){Body}

Выводит список элементов из источника данных Source в формате шаблона, заданного в Body. Создает элемент forlist.

  • Source - источник данных из функций DBFind или Data,
  • Index - можно указать имя переменной для счетчика итераций, счет ведется с 1. Если параметр Index не указан, то счетчик будет записываться в переменную [Source]_index,
  • Body - шаблон, задающий формат вывода элементов списка.
ForList(mysrc){Span(#mysrc_index#. #name#)}

Hint(Icon,Title,Text)

Создает элемент hint для вывода подсказки.

  • Icon - имя иконки,
  • Title - заголовок подсказки,
  • Text - текст подсказки.
Hint(myicon, My Header, This is a hint text)

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

Создает HTML элемент image.

  • Src - источник изображения, файл или data:...,
  • Alt - альтернативный текст для изображения,
  • Сlass - список классов.
Image(\images\myphoto.jpg)

QRcode(Text)

Возвращает элемент qrcode c указанным текстом для генерации QR кода.

  • Text - текст для генерации QR кода.
QRcode(#name#)

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

Создает HTML элемент table.

  • Source - имя источника данных, например, из команды DBFind,
  • Columns - заголовки и соответствующие имена колонок в виде Title1=column1,Title2=column2.

Style - служит для указания css стилей,

  • Style - css стили.
DBFind(mytable, mysrc)
Table(mysrc,"ID=id,Name=name")

Получение данных

Address(account)

Функция возвращает адрес аккаунта в формате 1234-5678-...-7990 по числовому значению адреса; если адрес не указан, то в качестве аргумента принимается значение адреса текущего владельца аккаунта.

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

AddressToId(Wallet)

Функция возвращает числовой идентификатор владельца аккаунта по строковому значению адреса аккаунта.

  • Wallet - адрес аккаунта в формате XXXX-…-XXXX или в виде числа.
AddressToId(#wallet#)

AppParam(App, Name, Index, Source)

Функция выводит на экран значение параметра приложения из таблицы app_param текущей экосистемы. Если есть языковый ресурс c полученным именем, то автоматически подставится его значение.

  • App - идентификатор приложения,
  • Name - имя параметра,
  • Index - порядковый номер элемента параметра (начиная c 1) в случае, если значение параметра представлено списоком через запятую, например, type = full,light, тогда AppParam(1, type, 2) возвратит light. Этот параметр не совместим с параметром Source,
  • Source - создается объекта data со элементами значения параметра, представленого списоком через запятую; объект указывается как источник данных в функциях Table и Select (в этом случае функция не будет возвращать значение). Этот параметр не совместим с парарметром Index.
AppParam(1, type, Source: mytype)

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

Создает элемент data, заполняет его перечисленными в параметрах данными и помещает в конструкцию Source, которая потом указывается в Table и других командах, получающих Source в качестве входных данных. Последовательность записей в data соотвествует последовательности имен колонок.

  • Source - произвольное имя источника данных,
  • Columns - список имен колонок через запятую,
  • Data - данные по одной записи на строку с разделением на колонки через запятую; при наличии запятых, значение заключается в двойные кавычки, при наличии кавычек в значении, оно заключается в удвоеные двойные кавычки,
  • Custom - создает в источнике дополнительные колонки, для вывода данных, вычисляемых из значений основных колонок, например, кнопки, ссылки; допускается определять несколько столбцов Custom; используется для вывода в Table и других командах, получающих Source в качестве входных данных
    • Column - произвольное имя колонки,
    • Body - шаблон, можно использовать значения из других колонок текущей записи с помощью переменных #columnname#.
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#"}

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, и помещает его в конструкцию Source, которая потом указывается в Table и других командах, получающих Source в качестве входных данных. Последовательность записей в data должна соотвествовать последовательности имен колонок.

  • table - имя таблицы,
  • Source - произвольное имя источника данных,
  • Columns - список возвращаемых колонок; если не указано, то возвратятся все колонки. Если имеются колонки типа JSON, то вы можете использовать обращение к полям записи с помощью записи вида имяколонки->имяполя. В этом случае, имя результирующей колонки будет имяколонки.имяполя. Также, формат запросов для поля Columns описан в разделе Смарт-контракты - Язык написания контрактов Symvolio - Получение значений из таблиц базы данных - DBFind.
  • Where - условие поиска данных. Формат запросов описан в разделе Смарт-контракты - Язык написания контрактов Symvolio - Получение значений из таблиц базы данных - DBFind. Если имеются колонки типа JSON, то вы можете использовать обращение к полям записи с помощью записи вида имяколонки->имяполя.
  • WhereId - условие поиска по идентификатору, например, .WhereId(1),
  • Order - поле, по которому происходит отсортировать. Формат запросов для поля Order описан в разделе Смарт-контракты - Язык написания контрактов Symvolio - Получение значений из таблиц базы данных - DBFind,
  • Limit - количество возвращаемых записей - по умолчанию - 25, максимально возможное - 250,
  • Offset - смещение первой возвращаемой записи,
  • Count - имеется возможность вместе с данными получить общее кол-во записей для данного условия where. Для этого следует добавить этот вызов и в параметре указать имя переменной, куда будет записано общее количество записей по указанной выборке. Также, это значение возвратится в параметре count у элемента dbfind. Если не были определены Where и WhereId, то будет возвращаться общее кол-во записей в таблице,
  • Ecosystem - идентификатор экосистемы; по умолчанию, берутся данные из таблицы в текущей экосистеме,
  • Cutoff - служит для обрезания и представления в виде ссылок больших текстовых данных; в параметре необходимо в виде строки через запятую указать список колонок, которые будут обрабатываться таким образом. В значении колонки возвращается json объект в двумя полями - link и title. Если значение колонки больше 32 символов, то возвращается ссылка на полный текст и первые 32 символа. В противном случае, ссылка пустая и возвращается всё значение.
  • Custom - определяет дополнительные колонки, для вывода данных, вычисляемых их значений основных колонок, например, кнопки, ссылки; допускается определять несколько столбцов Custom; используется для вывода в Table и других командах, получающих Source в качестве входных данных
    • Column - произвольное имя колонки.
    • Body - шаблон, можно использовать значения из других колонок текущей записи с помощью переменных #columnname#.
  • Vars - функция формирует множество переменных со значениями из первой записи, полученной по данному запросу (параметр Limit автоматически становится равным 1),
    • Prefix - префикс имен формируемых переменных, то есть переменные имеют вид #prefix_id#, #prefix_name#, где после знака подчеркивания указывается имя колонки таблицы. Если есть колонки из JSON полей, то тогда результирующая переменная будет иметь вид #prefix_columnname_field#.
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#)
}

EcosysParam(Name, Index, Source)

Функция выводит на экран значение параметра из таблицы parameters текущей экосистемы. Если есть языковый ресурс c полученным именем, то автоматически подставится его значение.

  • Name - имя параметра,
  • Index - порядковый номер элемента параметра (начиная c 1) в случае, если значение параметра представлено списоком через запятую, например, gender = male,female, тогда EcosysParam(gender, 2) возвратит female. Этот параметр не совместим с парарметром Source,
  • Source - создается объекта data со элементами значения параметра, представленого списоком через запятую; объект указывается как источник данных в функциях Table и Select (в этом случае функция не будет возвращать значение). Этот параметр не совместим с парарметром Index.
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)

GetHistory(Source, Name, Id, RollbackId)

Создает элемент gethistory, заполняет его данными c историей изменений указанной записи в таблице с именем Name, и помещает его в конструкцию Source, которая потом указывается в Table и других командах, получающих Source в качестве входных данных. Результирующий список отсортирован от последних изменений к более ранним. В результирующей таблице поле id указывает на id в таблице rollback_tx. Также возвращаются поля block_id - номер блока, block_time - время блока.

  • Source - произвольное имя источника данных,
  • Name - имя таблицы,
  • Id - идентификатор записи.
  • RollbackId - необязательный параметр. Если указан, то возвратится только одна запись с данным id в таблице rollback_tx.
GetHistory(blocks, BlockHistory, 1)

GetColumnType(Table, Column)

Функция возвращает тип указанной колонки в указанной таблице. Возвращается наименование внутреннего типа -например, text,varchar,number,money,double,bytea,json,datetime,double.

  • Table - имя таблицы,
  • Column - имя колонки.
SetVar(coltype,GetColumnType(members, member_name))Div(){#coltype#}

JsonToSource(Source, Data)

Создает элемент jsontosource, заполняет его парами key и value, которые переданы в json объекте в Data и помещает в конструкцию Source, которая потом указывается в Table и других командах, получающих Source в качестве входных данных. Записи в результирующих данных отсортированы в алфавитном порядке по ключам JSON объекта.

  • Source - произвольное имя источника данных,
  • Data - может указываться как JSON объект так и переменная #name#, которпая содержит JSON объект.
JsonToSource(src, #myjson#)
JsonToSource(dat, {"param":"value", "param2": "value 2"})

ArrayToSource(Source, Data)

Создает элемент arraytosource, заполняет его парами key и value, которые переданы в json массиве в Data и помещает в конструкцию Source, которая потом указывается в Table и других командах, получающих Source в качестве входных данных.

  • Source - произвольное имя источника данных,
  • Data - может указываться как JSON массив так и переменная #name#, которпая содержит JSON массив.
ArrayToSource(src, #myjsonarr#)
ArrayToSource(dat, [1, 2, 3])

LangRes(Name, Lang)

Возвращает указанный языковой ресурс. В случае запроса дерева для редактирования возвращается элемент langres. Возможно использование сокращенной записи вида $langres$.

  • Name - имя языкового ресурса,
  • Lang - двухсивольный идентификатор языка; по умолчанию, возвращается язык который определен в запросе в Accept-Language. Также можно указывать lcid идентификаторы, например, en-US,en-GB. В этом случае, если не будет найдено соответствие, например, для en-US, то ресурс будет искаться для en.
LangRes(name)
LangRes(myres, fr)

Range(Source,From,To,Step)

Создает элемент range, заполняет его целочисленными значениями от From до To (не включая To) c шагом Step и помещает в конструкцию Source, которая потом указывается в Table и других командах, получающих Source в качестве входных данных. Значения записываются в колонку с именем id. Если будут указаны неверные параметры, то будет возвращен пустой источник.

  • Source - произвольное имя источника данных,
  • From - начальное значение (i = From),
  • To - конечное значение (i < To),
  • Step - шаг изменения значения. Если не указан, то берется 1.
Range(my,0,5)
SetVar(from, 5).(to, -4).(step,-2)
Range(Source: neg, From: #from#, To: #to#, Step: #step#)

SysParam(Name)

Функция выводит значение системного параметра из таблицы system_parameters.

  • Name - имя значения.
Address(SysParam(founder_account))

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

Функция возвращает ссылку на статичный файл, который хранится в таблице binaries.

  • Name - имя файла,
  • AppID - идентификатор приложения,
  • MemberID - идентификатор пользователя, по умолчанию 0,
  • ID - идентификатор статичного файла.
  • ecosystem - идентификатор экосистемы, с которой запрашиваеются двоичные данные. Если не указан, то запрашиваются из текущей экосистемы.
Image(Src: Binary("my_image", 1))
Image(Src: Binary().ById(2))
Image(Src: Binary().ById(#id#).Ecosystem(#eco#))

TransactionInfo(Hash)

Функция ищет транзакцию по указанному хэшу и возвращает информацию о вызванном контракте и его параметрах. Функция возвращает строку в формате json {«contract»:»ContractName», «params»:{«key»: «val»}, «block»: «N»}, где в поле contract возвращается имя контракта, params - переданные параметры, block - номер блока в котором была обработана данная транзакция.

  • hash - хэш транзакции в виде шестндцатеричной строки.
P(TransactionInfo(#hash#))

Элементы форматирования данных

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

Создает HTML элемент div.

  • Class - классы для данного div,
  • Body - дочерние элементы.

Style - служит для указания css стилей

  • Style - css стили.

Show - Определяет условия, при каких следует показывать данный блок. Hide - Определяет условия, при каких следует скрывать данный блок.

  • Condition - можно через запятую перечислить условия в виде пар InputName=Value. Условие будет выполнено, когда для каждой из пар текст соответствующего input равен указанному значению. Если указано несколько вызовов Show или Hide, то в этом случае действие будет применимо, если выполнено условие хотя бы одного вызова.
Div(class1 class2, This is a paragraph.).Show(inp1=test,inp2=none)

Em(Body, Class)

Создает HTML элемент em.

  • Body - дочерний текст или элементы,
  • Class - классы для элемента.
This is an Em(important news).

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

Создает HTML элемент p.

  • Body - дочерние текст или элементы,
  • Class - классы для элемента,

Style - служит для указания css стиле,

  • Style - css стили.
P(This is the first line.
  This is the second line.)

SetTitle(Title)

Устанавливает заголовок страницы. Создается элемент с именем settitle.

  • Title - заголовок страницы.
SetTitle(My page)

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

Создает HTML элемент label.

  • Body - дочернииу текст или элементы,
  • Class - классы элемента,
  • For - значение for для данного label,

Style - служит для указания css стилей,

  • Style - css стили.
Label(The first item).

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

Создает HTML элемент span.

  • Body - дочерние текст или элементы,
  • Class - классы для элемента,

Style - служит для указания css стилей,

  • Style - css стили.
This is Span(the first item, myclass1).

Strong(Body, Class)

Создает HTML элемент strong.

  • Body - дочерние текст или элементы,
  • Class - классы для элемента.
This is Strong(the first item, myclass1).

Элементы форм

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

Создает HTML элемент form.

  • Class - классы для данного form,
  • Body - дочерние элементы.

Style - служит для указания css стилей

  • Style - css стили.
Form(class1 class2, Input(myid))

ImageInput(Name, Width, Ratio, Format)

Создает элемент imageinput для загрузки картинок. По желанию в третьем параметре можно указать либо высоту картинки, либо отношение сторон в виде 1/2, 2/1, 3/4 и т.п. По умолчанию берется ширина в 100 пикселей и отношение сторон 1/1.

  • Name - имя элемента,
  • Width - ширина вырезаемого изображения,
  • Ratio - отношение сторон (ширины к высоте) или высота картинки,
  • Format - формат загружаемой картинки.
ImageInput(avatar, 100, 2/1)

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

Создает HTML элемент input.

  • Name - имя элемента,
  • Class - классы элемента,
  • Placeholder - placeholder для элемента,
  • Type - типа элемента,
  • Value - значение элемента.
  • Disabled - задизейблен ли элемент.

Validate - параметры валидации.

Style - служит для указания css стилей

  • Style - css стили.
Input(Name: name, Type: text, Placeholder: Enter your name)
Input(Name: num, Type: text).Validate(minLength: 6, maxLength: 20)

InputErr(Name,validation errors)]

Создает элемент inputerr c текстами для ошибок валидации.

  • Name - имя соответствующего элемента Input.
InputErr(Name: name,
    minLength: Value is too short,
    maxLength: The length of the value must be less than 20 characters)

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

Создает элемент radiogroup.

  • Name - имя элемента,
  • Source - имя источника данных из функций DBFind или Data,
  • NameColumn - имя колонки, из которой получаются имена элементов,
  • ValueColumn - имя колонки, из которой получаются значения элементов; в этом параметре нельзя указывать имена колонок созданных через Custom,
  • Value - значение по умолчанию,
  • Class - классы для элемента.

Validate - параметры валидации.

Style - служит для указания css стилей

  • Style - css стили.
DBFind(mytable, mysrc)
RadioGroup(mysrc, name)

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

Создает HTML элемент select.

  • Name - имя элемента,
  • Source - имя источника данных, например, из команды DBFind или Data,
  • NameColumn - имя колонки, из которой будeт браться текст для элементов,
  • ValueColumn - имя колонки, из которой будут браться значения для элементов; в этом параметре нельзя указывать имена колонок созданных через Custom,
  • Value - значение по умолчанию,
  • Class - классы для элемента,

Validate - параметры валидации,

Style - служит для указания css стилей,

  • Style - css стили.
DBFind(mytable, mysrc)
Select(mysrc, name)

InputMap(Name, Type, MapType, Value)

Создаёт текстовое поле ввода адреса с возможностью визуального выбора координат на карте.

  • Name - имя элемента
  • Value - значение по умолчанию, объект в виде строки, например ( {«coords»:[{«lat»:number,»lng»:number},]} или {«zoom»:int, «center»:{«lat»:number,»lng»:number}}. Также поддерживается поле address для сохранения значения адреса(поскольку при отрисовке InputMap с предустановленным Value - поле для ввода адреса не должно быть пустым)
  • Type - «polygon»
  • MapType - тип карты. Одно из значений: hybrid, roadmap, satellite, terrain
InputMap(Name: Coords,Type: polygon, MapType: hybrid, Value: `{"zoom":8, "center":{"lat":55.749942860682545,"lng":37.6207172870636}}`)

Map(Hmap, MapType, Value)

Создаёт визуальное отображение карты для отображения координат в произвольном формате.

  • Hmap - высота HTML-элемента на странице, по умолчанию 100.
  • Value - значение, объект в виде строки, например ( {«coords»:[{«lat»:number,»lng»:number},]} или {«zoom»:int, «center»:{«lat»:number,»lng»:number}}. Если center не указан явно, то окно отображения карты будет автоматически подстроено для того, чтобы выбранные координаты «вписались» в него.
  • MapType - тип карты. Одно из значений: hybrid, roadmap, satellite, terrain
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, Московская обл., Россия, 143041"})

Операции с кодом

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

Условный оператор. Возвращаются дочерние элементы первого If или ElseIf у которого выполнено условие Condition. В противном случае, возвращаются дочерние элементы Else, если он присутствует.

  • Condition - условие; считается не выполненным если равно пустой строке (""), 0 или false, в остальных случаях считается истинным,
  • Body - дочерние элементы.
If(#value#){
   Span(Value)
}.ElseIf(#value2#){Span(Value 2)
}.ElseIf(#value3#){Span(Value 3)}.Else{
   Span(Nothing)
}

Include(Name)

Команда вставляет в код страницы шаблон блока с именем Name.

  • Name - имя блока.
Div(myclass, Include(mywidget))

Стили для мобильного приложения

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>