[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. Кастомное расположение кнопок перехода на форме задачи