Использование переменных и событий псевдо-html верстки в Mobile SMARTS

В последних версиях клиента Mobile SMARTS были сильно расширены возможности псевдо-html верстки, например, появилась возможность добавлять произвольное количество тегов input на форму и обрабатывать пользовательские действия с ними с помощью события onblur/ onselected.

Рассмотрим на примере окна первичной настройки приходной накладной из продукта Frontol Simple Mobile.

Код первого поля для ввода ИНН:

HTML
<div style="padding:1dp 16dp 0dp 13dp;"> <input value="{INN}" tabindex="1" datatype="Decimal" onblur="ПроверкаИНН"   title="ИНН от 10 до 12 символов" style="border-color:#C8D6DE;" /> </div>

В данном случае INN - переменная в сессии, которой присваивается результат ввода пользователем. Событие onblur определяет, на действие с каким именем перейдет алгоритм после нажатия на кнопку Еnter). В данном случае алгоритм переходит на действие ПроверкаИНН.

Еще один пример - поле с выпадающим списком контрагентов.

Предварительно в конфигурации отберем коллекцию строк СтрокиПоказа

Код выпадающего списка (switch):

HTML
div style="padding:1dp 0dp 10dp 17dp;border:0px solid black;margin:13dp 0dp 20dp 0dp;"><switch source="СтрокиПоказа" value="{INN_Text}" tabindex="2" listItemDisplayTemplate="{Item.ShortName==null:{Item.Имя};{Item.ShortName}}" placeholder="Или выберите из списка" onselected="ВыборИзСписка"/> </div>

Source - источник элементов для показа (в данном примере - предварительно отобранная коллекция строк СтрокиПоказа).

Value - переменная в сессии, в которую заносится результат выбора (строка из коллекции СтрокиПоказа).

Tabindex - определяет порядок перехода фокуса на форме.

listItemDisplayTemplate - шаблон отображения элемента в выпадающем списке. В данном случае, если строка имеет поле ShortName, то будет отображаться оно, если нет - поле Имя.

Placeholder - текст внутри поля формы, который исчезает при получении фокуса.

Onselected - событие, которое произойдет после выбора элемента из выпадающего списка. В качестве значения - имя действия в конфигурации, в нашем примере ВыборИзСписка.

Поле ввода даты демонстрирует новые возможности:

HTML
 <div style="padding:1dp 16dp 20dp 0dp;">
<div style="padding:1dp 16dp 0dp 13dp;"> <input type="text" value="{OrderDate}"  pattern="dd.MM.yy"  placeholder="ДД.ММ.ГГ"  datatype="datetime" tabindex="4" onblur="1725 1" onselected=""/>
</div>

Здесь все аналогично предыдущим пунктам, кроме:

Pattern - указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы

Datatype - если предыдущие примеры были в случае с ИНН - формата Decimal, в случае с INN - Text, то в данном примере OrderDate имеет формат DateTime со всеми вытекающими проверками.

Если появляется необходимость отформатировать список вывода, например, элементов номенклатуры в действии выбор номенклатуры, то ниже приведен пример кода, как это можно сделать:

HTML
<div  class="div_warelist" >
<div style="margin-bottom:10dp;" >
<table border="0"  width="100%">
<tr>
<td width="95%">
<span class="list_name"  >{Item.Product.Name}</span>
</td>
<td width="5%" align="right">
<img  size="stretch" >simple.ChevronRigth</img>
</td>
</tr>
</table >
</div>
<div >
<table border="0"  >
<tr>
<td width="50%" >
<span class="tb_header">Цена: {Item.Packing.Цена:0.00}  ₽</span>
</td>
<td width="50%"  align="right" >
<span class="tb_quantity"  >{Item.Packing.Остаток} {Item.Packing.Name}.</span>
</td>
</tr>
</table>
</div>
</div>