[ELMA3] Использование разметки Razor для создания интерфейса пользовательской задачи в бизнес-процессе

Внимание!

Компания не несет ответственности за изменения, внесенные Вами в системные формы. После обновления системы на новую версию некоторые измененные Вами представления могут работать некорректно.

Чтобы использовать разметку Razor, необходимо в настройках пользовательской задачи на вкладке Настройки формы установить флаг Использовать шаблон Razor и прописать путь до этого шаблона в формате: Forms/Workflow/{Имя класса вашего процесса}/{Название файла вашей формы без расширения}.При этом файл TaskForm.cshtml необходимо предварительно создать в каталоге .../<Общая папка с файлами системы ELMA>/UserConfig/WebApplication/Views/Shared/Forms/Workflow/{Имя класса вашего процесса}.

Для отображения значений блока требуется нажать на значок и отредактировать шаблон:
1. В область директив добавить @using EleWise.ELMA.Services. Требуется для доступа к ObjectViewData и ContextVars.
2. Для вывода переменных добавить @using (var data = new ObjectViewData(Html, Html.ViewData, @ContextVars.GetOrDefault<object>("ContextPropertyViewItemModel"), true)).

Пример отображения шаблона:

@using EleWise.ELMA.BPM.Web.Tasks.Models
@using EleWise.ELMA.Web.Mvc.Html.Forms
@using EleWise.ELMA.Services

@using (var data = new ObjectViewData(Html, Html.ViewData, @ContextVars.GetOrDefault<object>("ContextPropertyViewItemModel"), true))
{
	@Html.EditableProperty("Entity.ContextPropertyBlok");
	@Html.EditableProperty("Entity.ContextPropertyStroka");
}

Контекстные переменные процесса можно вывести так (с помощью свойства style="margin-top:10px" можно регулировать ширину поля):

<table style="margin-top:10px">
@Html.EditableProperty("Entity.value1")
</table>

где value1 - это имя свойства контекстной переменной процесса.

Для вывода переменных в режиме Только для чтения вместо EditableProperty необходимо использовать метод Property:

<table style="margin-top:10px">
@Html.Property("Entity.value1")
</table>

При этом следует помнить, что @Html.EditableProperty вставляет строку таблицы с названием переменной и полем ввода. Если возникает необходимость вывести две контекстные переменные в одну строку, можно использовать методы Caption (выводит название переменной) и Editor (выводить поле ввода для этой переменной) в отдельных столбцах таблицы:

<table>
<tr>
<td>@Html.Caption("Entity.value1")</td>
<td>@Html.Editor("Entity.value1")</td>
<td>@Html.Caption("Entity.value2")</td>
<td>@Html.Editor("Entity.value2")</td>
</tr>
</table>

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

Для того чтобы вывести две контекстные переменные типа какого-либо объекта в одну строку, можно использовать следующую конструкцию:

<table style="margin-top:10px; width:75%">
   <tr>
      <td style="width:50%">
        <table>
        @Html.EditableProperty("Entity.Klient", a=>a.Required=true)
        </table>
      </td>
      <td>
      <div style="width:10px;" />
      </td>
      <td style="width:50%">
        <table>
        @Html.EditableProperty("Entity.Usluga")
        </table>
      <td>
   </tr>
</table>

Каждая переменная выводится в отдельной таблице в колонке общей таблицы: это позволяет избежать влияния встроенных свойств метода EditableProperty (как и метода Property), которые всегда формируют отдельную строку таблицы для выводимого значения.

Для применения нескольких CSS свойств синтаксис следующий:

@Html.EditableProperty("Entity.value1", a => {a.Html.style["width"]="250px"; a.Html.style["height"]="250px";})

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

@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>

Признак обязательности заполнения выводимого поля (Required) указывается следующим образом:

@Html.EditableProperty("Entity.value1", a=>a.Required=true)

Кнопки исполнения задачи выводятся так:

@Html.Partial("WorkflowTask/Buttons", Model)

Если необходимо, чтобы название переменной на форме задачи и ее значение отображались с разными стилями форматирования, можно использовать следующую конструкцию (в тегах можно задать любые нужные параметры форматирования):

<td style="color:red">
@Html.Caption("Entity.value1")
</td>
<td style="color:blue">
@Html.Display("Entity.value1", a => {})
</td>

Ниже приведен пример содержимого файла шаблона Razor, в котором создается 2 вкладки на форме задачи (Общие поля и Дополнительно). На вкладке Общие поля отображаются те переменные, которые выбраны в настройках задачи на вкладке Контекст. На вкладке Дополнительно отображается контекстная переменная value1 как в приведенных выше примерах. С помощью первых двух строк выводится информация о задаче.

@using (var data = new ObjectViewData(this))
@inherits EleWise.ELMA.Web.Mvc.DynamicViewControl<EleWise.ELMA.Workflow.Web.Models.WorkflowTaskInfo>

@Html.Partial("WorkflowTask/ExecutedInfo", Model.ExecutedInfo)

@(TabPanel("WorkflowTask1").Items(tabs =>
{

    tabs.Add(
        new EleWise.ELMA.Web.Mvc.Models.Selectors.TabPanelItem()
        {
            Text = SR.T("Общие поля"),
            Selected = Model.SelectedTab == 0
        }).Content(@<text> @Html.Partial("~/Modules/EleWise.ELMA.Workflow.Web/Views/WorkflowTask/DefaultFieldsView.cshtml") </text>);    

    tabs.Add(
        new EleWise.ELMA.Web.Mvc.Models.Selectors.TabPanelItem()
        {
            Text = SR.T("Дополнительно")
        }).Content(@<table style="margin-top:10px">@Html.EditableProperty("Entity.value1")</table>);

}).Render())

@Html.Partial("WorkflowTask/Buttons", Model)