Кастомные формы задач

Любые задачи в системе 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"))
– добавление самого поля

Переменная типа "блок" отображается так же, как и остальные контекстные переменные:

1	`@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())
}