# How to use Kendo UI Core to create a list of WorkflowGen actions to do

**URL:** <https://discuss.workflowgen.com/t/how-to-use-kendo-ui-core-to-create-a-list-of-workflowgen-actions-to-do/610>\
**Category:** Integration\
**Created:** [August 9, 2016, 1:33am UTC](https://discuss.workflowgen.com/t/how-to-use-kendo-ui-core-to-create-a-list-of-workflowgen-actions-to-do/610 "2016-08-09T01:33:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![wfg-admin](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/wfg-admin/32/714_2.png) [@wfg-admin](https://discuss.workflowgen.com/u/wfg-admin)\
**Post date:** [August 9, 2016, 1:33am UTC](https://discuss.workflowgen.com/t/how-to-use-kendo-ui-core-to-create-a-list-of-workflowgen-actions-to-do/610/1 "2016-08-09T01:33:47Z")

</div>

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

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

2. Add a reference to use the WorkflowGen API in your project. To do this:

3. Make sure the the `\wfgen\ws` folder is secured using HTTP Basic authentication (SSL is recommended). For more information on this topic, see [Web Services API: Http 401 error](https://discuss.workflowgen.com/t/web-services-api-http-401-error/323).

Download Kendo UI Core from [https://www.telerik.com/download-trial-file/v2/kendo-ui-core](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](https://msdn.microsoft.com/en-us/library/dd381412(v=vs.108).aspx) MSDN article.

1. 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**.

2. In the Solution Explorer, create the `\lib`, `\js`, `\kendoui`, and `\src` folders according to the following folder tree:

3. Copy the Kendo UI Core `\js` and `\styles` folders to the `Views\lib\kendoui\src\` folder. These folders contain the Kendo UI Core CSS and JavaScript files.

4. The sample `WorkflowGenActionsTodoList.zip` archive contains four files: "`Actions.cs`, `ActionController.cs`, `App.js`, and `index.html`. Copy these files to their respective folders as shown here:

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](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](http://docs.telerik.com/kendo-ui/controls/data-management/listview/overview).

```auto
/*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

&nbsp;

```auto
<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:

```auto
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](https://discuss.workflowgen.com/t/web-services-api-user-impersonation-with-impersonateusername-parameter/319).

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

```auto
//------------------------------------------------------------------------------------
// 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](https://advantys.box.com/s/7czm3yclo4wbapxn52zqi0eeyvdyxza2), unzip it, and follow the instructions in the README.txt instructions to see it in action.

---

<div class="post-metadata">

**Author:** ![hazey](https://avatars.discourse-cdn.com/v4/letter/h/a587f6/32.png) [@hazey](https://discuss.workflowgen.com/u/hazey)\
**Post date:** [July 16, 2018, 2:52pm UTC](https://discuss.workflowgen.com/t/how-to-use-kendo-ui-core-to-create-a-list-of-workflowgen-actions-to-do/610/2 "2018-07-16T14:52:06Z")

</div>

The link with example isn’t working. Could you re-upload it? Thanks

---

<div class="post-metadata">

**Author:** ![pnicoll](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/pnicoll/32/454_2.png) [@pnicoll](https://discuss.workflowgen.com/u/pnicoll)\
**Post date:** [July 16, 2018, 3:46pm UTC](https://discuss.workflowgen.com/t/how-to-use-kendo-ui-core-to-create-a-list-of-workflowgen-actions-to-do/610/3 "2018-07-16T15:46:05Z")

</div>

Hi,

Thanks for letting us know. We’ve reuploaded the sample file.

Regards,

Peter