Using Razor markup for creating interface of a user task in a business process

To enable Razor markup, open the user task settings > the form settings tab > check the box "Use Razor template" and set the path to this template in the format: ~/Modules/EleWise.ELMA.Workflow.Web/Views/Custom Forms/Task.cshtml. Prior to that, you need to create the Task.cshtml file in the directory ELMA3-'Edition'\Web\Modules\EleWise.ELMA.Workflow.Web\Views\Custom Forms.

The context variables of the process can be displayed as follows (using the properties style = "margin-top: 10px" you can adjust the width of the field):

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

where value1 is the name of the property of the context variable.

To display the "Read-only" variables, you must use the Property method instead of EditableProperty:

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

You should remember that the @Html.EditableProperty inserts a table row with the name of the variable and the input field. If it´s necessary to display two context variables on a single line, you can use the Caption method (to display the name of the variable) and the Editor method (to display the input field for this variable) in separate columns of the table:

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

If you want to display multiple context variables of the "read-only" type in a single line on the task form, you can use the same code, but instead of the Editor method, you must use the Display method.

In order to display two context variables of an object type in one line, you can use the following statement:

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

Each variable is displayed in a separate table in the column of the common table: this helps to avoid the impact of the built-in properties of EditableProperty method (as well as the Property method), which always form a separate row of the table for the output value.

To apply multiple CSS properties, the syntax is as follows:

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

The "block" type variable is displayed as well as the rest of context variables:

@Html.EditableProperty("Entity.blok")

It is possible to display only those block properties that were added to the context of the task. It is done as follows:

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

The ‘Required’ property of the displayed field can be specified as follows:

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

The task execution buttons are displayed as follows:

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

If it´s necessary to display the name of the variable on the task form and its value using different formatting styles, apply the following statements (you can specify any desired formatting parameters in tags):

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

Below is an example of the Razor template file, which creates two tabs on the task form ("Common Fields" and "Advanced"). The "Common Fields" tab shows those variables that are selected in the task settings on the "Context" tab. The "Advanced" tab displays the context variable value1 mentioned in the above examples. The first two rows allow display information about the task.

@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("Common fields"),
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("Advanced")
}).Content(@<table style="margin-top:10px">@Html.EditableProperty("Entity.value1")</table>);

}).Render())

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