Changing layout of transition buttons on a business process task form with a Razor markup

Transition buttons can be displayed on a task form in the standard way:

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

Sometimes, if there are many transition buttons, you may need to group or reposition them on the form. For example, you might need to arrange transition buttons according to their names. Suppose, a task has three outgoing transitions (as shown in fig. 1), and you need to change the order of the buttons: move the End Process button below the others and separate it with a line. To do so, change the abovementioned method of displaying buttons: select, My_Buttons file, instead of the Buttons file and write your own view in it:

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

Now create a file and name it My_Buttons.cshtml in the folder ELMA3-'Edition'\Web\Modules\EleWise.ELMA.Workflow.Web\Views\Shared\WorkflowTask and copy/paste this code to it:

@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, "Completed", executeUserFunc, prefix, doSubmit)
    @RenderConnectorByName(Model, "Send", 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, "End Process", 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>

In the example, the RenderConnectorByName function was used. This function displays a button with a specified name on the form. It allows displaying transition buttons in the necessary order and using HTML to divide them visually (specify paddings and lines, as shown in fig. 2)

Standard layout of transition buttons:

Fig. 1

Custom layout of transition buttons:

Fig. 2