[ELMA3] Кастомные формы задач
Любые задачи в системе ELMA имеют форму представления по умолчанию - она генерируется автоматически. В большинстве случаев стандартные формы представления бывают удобны, к тому же при внедрении системы не требуется тратить время на их создание, однако иногда требуется отображать задачи иным образом, когда необходима разметка страницы, отличная от стандартной. В этом случае используются кастомные формы задач. Кастомные формы могут быть созданы не только для задач, но и для документов, объектов CRM и других объектов системы.
В данной статье мы подробно остановимся на том, как можно создать свою собственную форму задачи в бизнес-процессе.
Для начала необходимо создать файл *.cshtml в папке ...\ELMA3-Standart(Express)\UserConfig\WebApplication. Более подробно о создании и месторасположении файла описано здесь .
Теперь открываем файл в любом текстовом редакторе.
Так как формы создаются с помощью разметки .Net Razor, мы можем использовать HTML-разметку при создании формы.
Чтобы создать новую форму задачи в процессе необходимо ввести следующее пространство имен:
@using EleWise.ELMA.BPM.Web.Tasks.Models @using (var data = new ObjectViewData(this, Model.Entity)) { }
где:
@using EleWise.ELMA.BPM.Web.Tasks.Models – необходимо для отображения задачи в процессе @using (var data = new ObjectViewData(this, Model.Entity)) – необходимо для правильного отображения переменных и корректной работы скриптов в ELMA
Вся остальная разметка выполнятся между фигурных скобок.
Рассмотрим основные примеры отображения контекстных переменных на форму:
@Html.Caption – название добавляемого поля @Html.EditorOrDisplay – добавление редактируемого поля @Html.Display – добавление нередактируемого поля @Html.EditableProperty – вывод атрибута с названием @Html.Property – вывод переменной в режиме «Только для чтения» @Html.Editor - вывод поля редактирования (без названия). ("Entity.<название атрибута>", a => a.Container("div")) – добавление самого поля
Переменная типа "блок" отображается так же, как и остальные контекстные переменные:
@Html.EditableProperty("Entity.blok")
При этом можно выводить не все свойства блока, а только добавленные в контекст этой задачи, делается это так:
<table> @Html.Property("Entity.blok", a => { a.TablePartParentId = Model.Entity.Id; a.ViewProviderUid = EleWise.ELMA.Workflow.Web.Integration.WorkflowTaskObjectViewItemProvider.UID; a.ViewItemId = Model.Task.Id.ToString(); }) </table>
Ниже приведен пример кастомной формы задачи:
Рис. 1. Пример кастомной формы задачи
В данном примере реализованы:
- Раскрывающийся список.
- Разметка полей и названия атрибутов.
- Таблица, при заполнений которой, динамически подсчитывается итог.
- Раскрывающийся список:
@(Html.CollapsiblePanel() <span style="color: #006400;">// добавляем раскрывающийся список </span>.Id(ViewData.TemplateInfo.GetFullHtmlFieldId("FIO")) <span style="color: #006400;">// присваиваем ей ID ("FIO")</span>.Header(SR.T("ФИО")).SaveState(false) <span style="color: #006400;">//указываем название панели, а так же будет ли сохраняться раскрытие панели или нет </span>.Class("Gray_Input_Seддparator").Expanded(true) <span style="color: #006400;">// указываем цвет панели </span>.Content(@<text><div style="padding: 5px;"> <span style="color: #006400;">// настраиваем отступы </span></div></text>).Render()) <span style="color: #006400;">// закрывающие теги раскрывающегося списка </span>
- Разметка полей и названия атрибутов:
<tr> <td colspan="2" align="center"> <div style="float:left; width: 350px;"> <span style="color: #006400;">// выравниваем по левому краю, и задаем ширину поля </span><b> @Html.Caption("Entity.Familiya", a => a.Container("div")) <span style="color: #006400;">//добавляем поле с названием атрибута, при этом название берётся из Elma </span></b> @Html.EditorOrDisplay("Entity.Familiya", a => a.Container("div")) /<span style="color: #006400;">// добавляем само поле для заполнения. EditorOrDisplay - указывает на то что, поле доступно для редактирования </span> @Html.Caption("Entity.Imya", a => a.Container("div")) @Html.EditorOrDisplay("Entity.Imya", a => a.Container("div")) Отчество <span style="color: #006400;">// еще один вариант названия поля, при этом не важно, как это поле будет называться в системе Elma </span> @Html.EditorOrDisplay("Entity.Otchestvo", a => a.Container("div")) </div> <div style="float:left; width: 700px;"> <span style="color: #006400;">// добавляем следующий столбец, при этом назначаем ширину данного поле в 700px. </span><b> @Html.Caption("Entity.FIO", a => a.Container("div")) </b> @Html.EditorOrDisplay("Entity.FIO", a => a.Container("div")) </div> </td> </tr>
Таблица, при заполнении которой, динамически подсчитывается итог:
<TR> <TD BGCOLOR="#42ec93" STYLE="border: 1px solid #00000a; padding: 0in 0.08in"> <span style="color: #006400;">// Выполняем заливку, настраиваем толщину, отступ, а так же стиль границы </span> </TD> <TD> @Html.EditorOrDisplay("Entity.K1", a => a.Container("div")) <span style="color: #006400;">// Добавление редактируемого поля </span> </TD> </TR>
Внимание!
Для того чтобы автоматически получить Итоги (использовано в нашем примере), достаточно написать сценарий в ELMA.
context.I1 = context.K1*context.S1; context.I2 = context.K2*context.S2; context.Itog= context.I1+context.I2;
То есть те сценарии, которые работают в стандартной форме, будут работать и с разметкой Razor при условии что добавлено:
@using (var data = new ObjectViewData(this, Model.Entity))<span style="font-size: 12px; line-height: 1.4em; color: #333333; font-family: Tahoma;"> </span>
Окончательный вариант выглядит так:
@using EleWise.ELMA.BPM.Web.Tasks.Models @using EleWise.ELMA.Web.Mvc.Html.Forms @using (var data = new ObjectViewData(this, Model.Entity)) { @(Html.CollapsiblePanel() .Id(ViewData.TemplateInfo.GetFullHtmlFieldId("FIO")) .Header(SR.T("ФИО")).SaveState(false) .Class("Gray_Input_Separator").Expanded(true) .Content(@<text> <div style="padding: 5px;"> <table> <tr> <td colspan="2" align="center"> <div style="float:left; width: 350px;"> <b> @Html.Caption("Entity.Familiya", a => a.Container("div")) </b> @Html.EditorOrDisplay("Entity.Familiya", a => a.Container("div")) @Html.Caption("Entity.Imya", a => a.Container("div")) @Html.EditorOrDisplay("Entity.Imya", a => a.Container("div")) Отчество @Html.EditorOrDisplay("Entity.Otchestvo", a => a.Container("div")) </div> <div style="float:left; width: 700px;"> <b> @Html.Caption("Entity.FIO", a => a.Container("div")) </b> @Html.EditorOrDisplay("Entity.FIO", a => a.Container("div")) </div> </td> </table> </div> </text>).Render()) @(Html.CollapsiblePanel() .Id(ViewData.TemplateInfo.GetFullHtmlFieldId("Table")) .Header(SR.T("Таблица")).SaveState(true) .Class("Gray_Input_Separator").Expanded(false) .Content(@<text> <div style="padding: 5px;"> <TABLE> <TR> <TD> </TD> <TD BGCOLOR="#42ec93" STYLE="border: 1px solid #00000a; padding: 0in 0.08in"> <P ALIGN=CENTER><FONT COLOR="#ffffff"><FONT SIZE=3><B>Количество</B></FONT></FONT></P> </TD> <TD BGCOLOR="#42ec93" STYLE="border: 1px solid #00000a; padding: 0in 0.08in"> <P ALIGN=CENTER><FONT COLOR="#ffffff"><FONT SIZE=3><B>Сумма</B></FONT></FONT></P> </TD> <TD BGCOLOR="#42ec93" STYLE="border: 1px solid #00000a; padding: 0in 0.08in"> <P ALIGN=CENTER><FONT COLOR="#ffffff"><FONT SIZE=3><B>Итог</B></FONT></FONT></P> </TD> </TR> <TR VALIGN=TOP> <TD BGCOLOR="#00b0f0" STYLE="border: 1px solid #00000a; padding: 0in 0.08in"> <P><FONT COLOR="#ffffff"><FONT SIZE=3><SPAN LANG="en-US"><B>1</B></SPAN></FONT></FONT></P> </TD> <TD> @Html.EditorOrDisplay("Entity.K1", a => a.Container("div")) </TD> <TD> @Html.EditorOrDisplay("Entity.S1", a => a.Container("div")) </TD> <TD STYLE="border: 1px solid #00000a; padding: 0in 0.08in"> <P ALIGN=CENTER>@Html.Display("Entity.I1", a => a.Container("div")) </p> </TD> </TR> <TR VALIGN=TOP> <TD BGCOLOR="#00b0f0" STYLE="border: 1px solid #00000a; padding: 0in 0.08in"> <P><FONT COLOR="#ffffff"><FONT SIZE=3><SPAN LANG="en-US"><B>2</B></SPAN></FONT></FONT></P> </TD> <TD> @Html.EditorOrDisplay("Entity.K2", a => a.Container("div")) </TD> <TD> @Html.EditorOrDisplay("Entity.S2", a => a.Container("div")) </TD> <TD STYLE="border: 1px solid #00000a; padding: 0in 0.08in"> <P ALIGN=CENTER>@Html.Display("Entity.I2", a => a.Container("div")) </p> </TD> </TR> <TR VALIGN=TOP> <TD> </TD> <TD> </TD> <TD ALIGN=right> <b> Итог: </b> </TD> <TD STYLE="border: 1px solid #00000a; padding: 0in 0.08in"> <P ALIGN=CENTER>@Html.Display("Entity.Itog", a => a.Container("div")) </p> </TD> </TR> </TABLE> </div> </text>).Render()) }