logo

[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.