You can easily use the WorkflowGen API with the Kendo UI Core library to create your own user interface. This article provides an example of how to use the Kendo UI Core Library to create a list of WorkflowGen actions to do.
Before you start
-
Create a new ASP.NET web application project in Visual Studio 2013 or 2015. Select an empty template with “Web API” folders and core references.
-
Add a reference to use the WorkflowGen API in your project. To do this:
i. Right-click on the project name in the Visual Studio Solution Explorer, then select Add Service Reference.
ii. In the Add Service Reference dialog box, click Advanced.
iii. In the Service Reference Settings dialog box, click Add Web Reference.
iv. In the Add Web Reference dialog box, enter the URL of the WorkflowGen API service in the URL field (the example below uses the URL
http://wfgdemo.advantys.com/wfgen/ws/processesruntime.asmx). You can use either the default web reference name or enter your own (the example below uses “WorkflowGen API” as the web reference name).For more information on how to invoke and implement a WorkflowGen API using .NET code, see How to invoke a WorkflowGen API using .NET code.
-
Make sure the the
\wfgen\wsfolder is secured using HTTP Basic authentication (SSL is recommended). For more information on this topic, see Web Services API: Http 401 error.
Download Kendo UI Core from https://www.telerik.com/download-trial-file/v2/kendo-ui-core with Apache License version 2.0.
Example
This example is based on an MVC design pattern and is made up of three parts: Model, View, and Controller. For more information on this topic, see the ASP.NET MVC Overview MSDN article.
-
The Web Application project you created earlier will contain Models and Controllers folders, so you have to add the Views folder. In the Visual Studio Solution Explorer, right-click on the project name, select Add New Folder, and name it Views.
-
In the Solution Explorer, create the
\lib,\js,\kendoui, and\srcfolders according to the following folder tree:
-
Copy the Kendo UI Core
\jsand\stylesfolders to theViews\lib\kendoui\src\folder. These folders contain the Kendo UI Core CSS and JavaScript files. -
The sample
WorkflowGenActionsTodoList.ziparchive contains four files: "Actions.cs,ActionController.cs,App.js, andindex.html. Copy these files to their respective folders as shown here:Note: In order to use
index.htmlas a start page in theViewsfolder, right-click on theindex.htmlfile and select Set As Start Page.
The App.js file contains the AJAX call to the controller and the Kendo UI Core functions, which generate the list of WorkflowGen to-do actions, as shown in the example below.
In this example, the Kendo UI DataSource is used to call the to-do list of WorkflowGen actions, and to maintain the structure and type of data. For more information on the Kendo UI DataSource, see http://docs.telerik.com/kendo-ui/framework/datasource/overview.
The Kendo UI ListView is used to bind data using the Kendo UI datasource with an HTML template. In this example, the template is defined in the index.html file. For more information on Kendo UI ListView, see http://docs.telerik.com/kendo-ui/controls/data-management/listview/overview.
/*global $ kendo*/
var app = app || {};
(function ($, kendo) {
'use strict';
// Todo actions data source
var todoDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
// Call to the ActionController
$.ajax({
url: "/api/action/getActionsToDo",
type: "GET",
dataType: "json",
data: options.data,
success: function (result) { options.success(result); },
error: function (result) { options.error(result); }
});
}
},
schema: {
data: "Data",
model: {
id: "ProcessInstanceId",
fields: {
ProcessInstanceId: { type: "number", editable: false },
ActivityInstanceId: { type: "number", editable: false },
ActivityInstanceDescription: { type: "string", editable: false },
ProcessDescription: { type: "string", editable: false },
ProcessInstanceCreatedDate: { type: "string", editable: false },
ProcessInstanceTimeLimitDate: { type: "string", editable: false },
ActivityInstanceFollowUpFormLink: { type: "string", editable: false }
}
}
}
});
// Kendo listview
$("#listview").kendoListView({
dataSource: todoDataSource,
template: kendo.template($("#template").html()),
selectable: "SINGLE"
});
}($, kendo));
The index.html file contains the HTML code and is used to call the App.js file and the JavaScript and CSS Kendo UI Core files. It is also used to define the template for the Kendo UI ListView, as shown in the example below:
My actions to do
Request #ProcessActionCreatedTime limit
<script type="text/x-kendo-template" id="template">
<div class="product">
<span style="width:100px;">#:ProcessInstanceId# </span>
<span style="width:400px;">#:ProcessDescription#</span>
<a href="#=ActivityInstanceFollowUpFormLink#"><span style="width:400px;">#:ActivityInstanceId#-#:ActivityInstanceDescription#</span></a>
<span style="width:150px;">#:ProcessInstanceCreatedDate#</span>
<span style="width:150px;">#:ProcessInstanceTimeLimitDate#</span>
</div>
</script>
<script type="text/javascript" src="lib/kendoui/src/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/kendoui/src/js/kendo.core.min.js"></script>
<script type="text/javascript" src="lib/kendoui/src/js/kendo.ui.core.min.js"></script>
<script type="text/javascript" src="lib/kendoui/src/js/kendo.data.min.js"></script>
<script type="text/javascript" src="lib/kendoui/src/js/kendo.binder.min.js"></script>
<script type="text/javascript" src="lib/kendoui/src/js/kendo.listview.min.js"></script>
<script type="text/javascript" src="lib/kendoui/src/js/kendo.selectable.min.js"></script>
<script type="text/javascript" src="lib/js/App.js"></script>
The ActionController.cs file receives the AJAX request and calls the Model to get the response, as shown here:
public Object getActionsToDo()
{
return Models.Actions.Action.GetActionsTodo(impersonateUsername, networkCredentialUser, networkCredentialPassword, wfgenUrl);
}
The ActionModel.cs file is used to call the WorkflowGen API. It parses the XML RSS response and returns it to the controller.
An authorized user’s network credentials are required in the code of the Model in order to access the WorkflowGen API. This project uses wfgen_admin as the authorized user.
In the Visual Studio project, the ImpersonateUsername parameter designates the user whose actions are to be displayed as a to-do list. This project uses jsmith as the impersonate username. For more information about user impersonation using the ImpersonateUsername parameter, see User Impersonation with ImpersonateUsername parameter.
Note: For security reasons, the impersonation feature is restricted to allowed users as defined in the ProcessesRuntimeWebServiceAllowedUsers entry in the \wfgen\ws\web.config (WorkflowGen version 5.x) or \wfgen\web.config (WorkflowGen version 6.x/7.x) file.
//------------------------------------------------------------------------------------
// Todo list of WorkflowGen actions
//------------------------------------------------------------------------------------
public static Object GetActionsTodo(string impersonateUsername, string networkCredentialUser, string networkCredentialPassword, string wfgenUrl)
{
// Prepare the header of the request
WorkflowGenAPI.ActivityInstanceListHeader myActivityInstanceListHeader = new WorkflowGenAPI.ActivityInstanceListHeader();
myActivityInstanceListHeader.ImpersonateUsername = impersonateUsername;
myActivityInstanceListHeader.Page = 1;
// Prepare WFG API call
WorkflowGenAPI.RuntimeService service = new WorkflowGenAPI.RuntimeService();
service.ActivityInstanceListHeaderValue = myActivityInstanceListHeader;
service.Credentials = new NetworkCredential(networkCredentialUser, networkCredentialPassword, "");
XmlNode nodes;
// Call WFG API
try
{
nodes = service.GetActivityInstanceList("ToDo");
}
catch (Exception e)
{
return -1;
}
return parseActivityInstanceListResults(nodes, wfgenUrl);
}
//------------------------------------------------------------------------------------
// Parse the activity instance list
// Return an object of results
//------------------------------------------------------------------------------------
private static Object parseActivityInstanceListResults(XmlNode nodes, string wfgenUrl)
{
List actions = new List();
foreach (System.Xml.XmlElement item in nodes.SelectNodes("channel/item"))
{
var processInstanceId = Int32.Parse(item["wfg:processInstanceId"].InnerText);
var activityInstanceId = Int32.Parse(item["wfg:activityInstanceId"].InnerText);
var activityInstanceDescription = item["description"].InnerText;
var processDescription = item["wfg:processDescription"].InnerText;
var processInstanceCreatedDate = (item["wfg:processInstanceCreatedDate"].InnerText != "") ? Convert.ToDateTime(item["wfg:processInstanceCreatedDate"].InnerText).ToString("MM/dd/yyyy HH:mm") : "";
var processInstanceTimeLimitDate = (item["wfg:processInstanceTimeLimitDate"].InnerText != "") ? Convert.ToDateTime(item["wfg:processInstanceTimeLimitDate"].InnerText).ToString("MM/dd/yyyy HH:mm") : "";
var activityInstanceFollowUpFormLink = item["link"].InnerText.Replace("http://localhost/wfgen", wfgenUrl);
Action action = new Action(processInstanceId, activityInstanceId, activityInstanceDescription, processDescription, processInstanceCreatedDate, processInstanceTimeLimitDate, activityInstanceFollowUpFormLink);
actions.Add(action);
}
System.Dynamic.ExpandoObject response = new System.Dynamic.ExpandoObject();
IDictionary<string, object> responseProperties = response as IDictionary<string, object>;
responseProperties.Add("Data", actions);
return response;
}
To run the Visual Studio project, follow the instructions in the README.txt file, which will guide you through the required code modifications.
Download WorkflowGenActionsTodoList.zip, unzip it, and follow the instructions in the README.txt instructions to see it in action.