[ELMA3] Изменение расположения кнопок перехода на форме задач БП с использованием разметки Razor

Внимание!

Представленная в этой статье информация актуальна для версий системы ниже 3.5.

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

На пользовательской форме задачи вывести кнопки перехода стандартным образом можно так:

@if (Model.Task.IsActive())
{
    @Html.Partial("WorkflowTask/Buttons", Model)
}

Но в некоторых случаях, например при наличии большого количества кнопок перехода, требуется их группировать или менять порядок, в котором они отображаются на форме. Одним из методов решения задачи является позиционирование кнопок перехода в зависимости от их наименования. Например, пусть задача имеет три исходящих перехода (как показано на рис. "Стандартное отображение кнопок перехода задачи БП"), необходимо изменить порядок расположения кнопок: кнопку "Конец" переместим ниже всех остальных и отчертим ее линией, чтобы визуально она отделялась от других. Для этого на форме задачи необходимо изменить приведенный выше способ отображения кнопок: в нем укажем не файл Buttons, а например, My_Buttons (где позже напишем собственное представление):

@if (Model.Task.IsActive())
{
    @Html.Partial("WorkflowTask/My_Buttons", Model)
}

Теперь необходимо создать файл с именем My_Buttons.cshtml в папке ELMA3-Standart(Express)\Web\Modules\EleWise.ELMA.Workflow.Web\Views\Shared\WorkflowTask и скопировать в него приведенный ниже код:

@using EleWise.ELMA.Workflow.BPMN.Diagrams.Elements
@using EleWise.ELMA.Workflow.BPMN.Diagrams.Elements.Connectors
@using EleWise.ELMA.Workflow.Diagrams.Elements
@model EleWise.ELMA.Workflow.Web.Models.WorkflowTaskInfo
 
@{
    var executeUserFunc = (string)(ViewData["ExecuteUserFunc"] ?? "");
    var prefix = (string)(ViewData["Prefix"] ?? "");
    var doSubmit = (bool)(ViewData["DoSubmit"] ?? true);
}
 
<div style="padding:10px;">
<table>
    @RenderConnectorByName(Model, "Еще задачка", executeUserFunc, prefix, doSubmit)
    @RenderConnectorByName(Model, "Снова задачка", executeUserFunc, prefix, doSubmit)   
    <tr><td colspan="2" style="padding-top:16px; padding-bottom:16px;"><hr width = "99%" color = "red" noshade size = "3"></td></tr>
    @RenderConnectorByName(Model, "Конец", executeUserFunc, prefix, doSubmit)
</table>
</div>
 
@helper RenderConnectorByName(EleWise.ELMA.Workflow.Web.Models.WorkflowTaskInfo model, string name, string executeUserFunc, string prefix, bool doSubmit)
{
    var connector = ((BPMNFlowElement)model.Element).StandardOutputFlows.FirstOrDefault(c => c.Name == name);
    if (connector != null)
    {
    @:@RenderConnector(connector, executeUserFunc, prefix, doSubmit)
    }
}
 
@helper RenderConnector(FlowConnectorElement connector, string executeUserFunc, string prefix, bool doSubmit)
{
        var name =
            !string.IsNullOrEmpty(connector.Name)
            ? connector.Name
            : "-> " + (connector.EndElement != null ? connector.EndElement.Name : "");
        var connectorId = "con" + @connector.Uid.ToString("n");
    <tr>
        <td style="padding-bottom: 5px;">
            <input type="button" id="@connectorId" name="@connectorId" value="@name"            
                onclick="@(!string.IsNullOrEmpty(executeUserFunc) ? string.Format("{0}(’{1}’);", executeUserFunc, connector.Uid) : "")$(’#@(!string.IsNullOrEmpty(prefix) ? string.Format("{0}_", prefix) : "")SelectedConnectorUid’).val(’@connector.Uid’); @(doSubmit ? MvcHtmlString.Create("$(’form:first’).submit();") : MvcHtmlString.Empty)" />
        </td>
        <td style="vertical-align:middle;"><span class="comment">@connector.Description</span></td>
    </tr>
}

В примере используется функция RenderConnectorByName, которая выводит на форму кнопку с заданным именем. С ее помощью можно выводить кнопки перехода в нужном порядке, а с помощью средств HTML их можно визуально отделять друг от друга (указывая отступы и линии, как показано на рис. "Заданное пользователем отображение кнопок перехода задачи БП")

Стандартное расположение кнопок:

Рис.1. Стандартное расположение кнопок перехода на форме задачи

Измененное расположение кнопок перехода:

Рис. 2. Кастомное расположение кнопок перехода на форме задачи

Внимание!

Начиная с версии 3.5 расположение кнопок на форме задачи бизнес-процесса задается при помощи конструктора форм. Вы можете размещать кнопки на форме, перетаскивая их в нужную область. Подробнее см. в справках по ELMA3 или ELMA4.