logo
ELMA: Внутренний портал › Кастомизация › Кастомные формы задач › Кастомные формы задач

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

Любые задачи в системе 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. Пример кастомной формы задачи

В данном примере реализованы:

  1. Раскрывающийся список.
  2. Разметка полей и названия атрибутов.
  3. Таблица, при заполнений которой, динамически подсчитывается итог.
  • Раскрывающийся список:
    @(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())
}