Tuesday, July 21, 2009

iTechnology Forms Accelerator Tutorial

By Hristo Yankov


Let's talk a little bit about K2 [blackpearl]/[blackpoint]. It is a great workflow solution, but there is a slight inconvenience - it lacks a User Interface! What does this mean? Well, it means that users can use K2 to create a workflow process, but when it comes to user interaction with this process, someone has to develop an ASP.NET page or Windows Forms application, to receive the user input and update the process. Even if you buy the expensive InfoPath, you may still need to do some coding. Wouldn't it be cool if even your business users could create a user interface for K2 workflow, without coding, all in one single environment?

Also, K2 is not too convenient for creating task-level workflows (many sequential tasks for the same user). Sure, you can queue multiple Client Events one after the other, but user has to click on his task items and load a new page for every one of them. It would be awesome if the user could stay on the same page and just complete his tasks, one after the other, with a single click.

In this blog post, I would like to show you how to use our very own tool - the iTechnology Forms Accelerator (iTFA)! It addresses both of the problems described above. I will demonstrate, step by step, how to create a user interface for a task-level workflow, from within the same environment where you create your K2 process - Visual Studio. Basically you create a form definition for the interface, while you create your K2 workflow. Then, when users open their worklist item(s), the definition is rendered as a web page. To see how it works, just follow the tutorial below.

We will create a simple task level workflow, for a fictional company which receives calls and delivers products. The process will go this way:
  • Call center - Receives a new call and logs the client details
  • Call center - Either logs what the client orders, or marks the order as 'canceled' (if user changed mind during the call)
  • Packing Department - They receive the order
  • Shipping department - They receive the order (package ID) and address to ship to
Assuming you have properly installed iTFA, let's fire up Visual Studio 2005 and create a new K2 Process.

We start with a fresh new (and empty) process. Let's rename the process file to 'iTFATest1Process.kprx'.

First, let's integrate the K2 process with iTFA. In your toolbox, there should be an 'iTechnology Forms Accelerator Process' under the 'Process Wizards'.

Drag&drop it on the canvas. It will start a wizard. The first page is just a welcome.

Click Next and you will see:

The misc K2 field 'Form Engine URL' was created during the installation. It is supposed to store the URL to the forms rendering page. Basically, this is the page your users will be opening later (to work on their tasks), after you deploy your process. Here you have the chance to override the value, if you need to. You can just press 'Next'.

Here, you can setup the layout of the page the users will be presented with, when they open their task. It contains three different sections:
  • History - in this section of the page, the user will see who and when finished what task in the current workflow
  • Summary - Visible in all activities (tasks) of the workflow. You can use to show the same fields to all users of the workflow.
  • Task - The area of the page which shows the current task details
So, you can arrange those parts as you like and you can make some of the parts start minimized (by clicking the icon on the left of the 'x' in the part). Note that you can select a different layout from the left side of this window (above the Set Layout button). For the purposes of this demo, i will change the layout to three horizontal parts, one under the other.

After doing it, note that the layout is empty. We need to drag and drop the web parts (located on the lower left) into the different sections of the layout. Let's put the History on top, Summary in the middle and Task (current) in the bottom one. Just drag&drop them in the appropriate sections.

Once we are satisfied with the layout our users will see, click Next.

This is where you can setup the Summary section. I would suggest to leave it empty for now. Later, when we know exactly what K2 fields we need, we will come back to this screen and set it up. Just click Next and then Finish to finalize this integration wizard.

After this is done, you should see the iTechnology Forms Accelerator Process integration icon, in the upper right corner of Visual Studio. We will click it later, to get back to this Process wizard and setup the Summary web part.

Note: The process we just finished, could have been started also by drag&dropping your first iTFA Client Event activity on the canvas. To avoid confusion, we did it the 'normal' way. Ok, now we can create our first user task (receive a call) in the workflow, which will be powered by iTFA user interface. There is an 'iTechnology Forms Accelerator Event' in the 'Event Wizards' section of Toolbox toobard.

Drag&drop it on the canvas. It will start another wizard. The first page you will see is the overview/welcome page.

Click Next. On this page, you give a name of your activity. Let's name it 'Receive a call'.

Click Next. Here, you can set summary and details of the task. They will be displayed to the user who is performing it, so you can use it to provide instructions.

Click Next. On this page of the wizard, you have to make a choice regarding the user interface of this particular task.

It can either:
No layout - no user input specific for this task, just Actions the user can take and Summary of the page.
New layout - we will specify new layout (fields) for the task
Copy layout - to copy the layout of another task. It is not available to us, as of right now, because we don't have other iTFA tasks in the workflow, this is the first one.

Let's go with 'New layout'. Here is the default new layout, which you should modify according to the needs of the current task (log a call).

As yo can see, the user input fields can be grouped in different 'sections'. Let's rename our default section to 'Client Information', by clicking the 'Edit' button of this section. We will also change the number of columns within the section to one (one field per row in this section).

And here is how it looks like after the change:

Ok, now let's think what K2 fields we need, to store the client information. Let's say:
  • Client Names - Names of the person who called us
  • Company Name - Name of the company this person works for
  • Company Address - Address of the company
  • Phone Number - Phone number we can use to reach the person/company
Using the K2 Object Browser, you can create those fields, as strings, on Process level.

We will add all of them as strings. Here is a screenshot after adding the K2 fields to the Process.

Now we can drag&drop any of those fields to our canvas on the left. Let's add all of them in the first (and only, for now) section. Drag&drop a field we created on the orange are of the section.

Let's add a new section to this task, of 2 columns. Click on the 'Add New Section' black button. Name it 'Other'.

We will add two more fields to it:
  • Special Notes - where user can input any special notes about the client
  • Referred By - specify how client found us

First, create the fields as we did before, then drag&drop them on this section.

Couple more things and we are done with this page. Let's make the fields in the first section required. Click on their 'Edit' buttons and mark them as required.

We also want to render the Company Address and Special Notes as multiline.

Let's render the 'Referred by' field as a dropdown with three different values to choose from:

And we are done, click Next. You are brought to the Actions screen. It initially has no actions. If you click Next, it will ask you to create the default 'Task Completed' action. Let's create two actions. One of them will be 'Take order' and another one 'User canceled'.

Click Next. You have to specify a 'destination' of the task. In other words - who will be performing it? Let's set it to the process originator, because it is the call center who will be starting a new instance of the process every time a client calls.

Then click Next. On the following page you can indicate that the user should receive an email notification when the task is available to him. In this case, it is not necessary so we don't check it.

Click Next and then finish. Now link the 'Start' process activity to the activity we just created. Create an empty server event activity and name it 'End'. Link the user canceled action to it. You should see something similar to:

Now, let's create our second iTFA activity in the workflow, which is the 'Take order'. Again, drag&drop the 'iTFA Event' on the canvas and follow the wizard. Let's create the following UI for this task:

Note that the K2 field behind Quantity is integer. Ok, let's adjust those values. We will make all of the fields required, Products and Shipping method will be dropdowns and we will display the 'Products' K2 field as 'Selected Product'.

Shipping method:

And we are done with the UI for this task. For actions - add 'User canceled' and 'Send to packing'. Destination should be the same - process originator. The workflow now looks like:

We need to create a task for the Packing department. Do the same drag&drop, this time, let's copy the layout from the 'Take order' activity.

We will see the same layout as the Take order activity. Delete the Shipping section, as it is not relevant in this case. In the Products section, make the fields 'read-only'.

(Quantity readonly)

Then create a new section called 'Packaging' and add a new field in it - Package ID, which will be required to be populated by the user executing this task. In our fictional company, it will indicate some inventory or storage number.

The end result should look like:

We need only one action for this task - Send to Shipping. Destination should be some guy in the Packaging department, but for our convenience, let's set the Originator again. Now your workflow looks like:

Create a task for shipping, where they see the Client Info, Shipping preference and Package ID. Let's copy from 'Client Information' again. Make all fields readonly. User interface should look lie:

Make Destination be the Originator again and Actions should be 'Shipped', linked to the end of the workflow.

And here is our workflow finalized:

Let's return back to the 'Summary' section and edit it. Click the iTFA integration icon and go to the last page of the wizard. Add any fields you would like all users to see, to the Summary canvas. Rename the section to 'Info'.

Now we just need to deploy it. Click the 'deploy' button which starts the wizard and just click Next and Finish.

If there were other users (other from Originator) in the process, make sure you give them rights to the process in the K2 Workspace.

You can now start a new instance of your process from the Workspace or you can open our page (same one as the value of Form Engine URL):
You can use that capability to incorporate it into an existing site or another software. For instance, your call center employees could start a new call log by clicking a link in their portal.

So, let's review what the users will see. Here is the first screen, where the user logs the call:

As soon as the user populates the information and clicks on the Take order action (link on the bottom of the page), he sees the following screen:

Here the call center logs the product the user is interested it and quantity. We then send it to Packing. Here the Packing guys see what they need to pack and then assign an ID to the package, which will be used by the Shipping department.

They send it to Shipping. Here, the Shippers see the Package ID (so they can find it in the warehouse), see the address to ship to, special notes and shipping method.

And that's it! Shipper finishes the task, workflow is complete.

  • We built user interface for three different departments of the company without even writing a single line of code.
  • We did it without leaving the Visual Studio environment.
  • We did it while we were building the workflow itself.
  • This whole tutorial can be complete for less than 10 minutes. How many days/weeks would your IT department need to do it the 'regular' way?
  • Many other...
This was a really short look at some of the capabilities our product offers. Interested? Contact us at our web site to get your copy now! We can also do an online demo for you.

You can also check out our videos on YouTube.

Hristo Yankov
Bookmark and Share


Unknown said...

Nice blog.
However, my question is how many customers out there will have the exact requirement that you fulfil with this component? Again, it seems like it works well if you are creating a quick proof-of-principle Workflow and you need a few UI pages. My experience with customers is that that their UI needs demands a far more sophisticated implementation which can only be met by writing bespoke code...

Dima Ivahno said...

Arno, you are correct that our clients usually want very complex UI for their forms. Creating custom ASPX pages is an ultimate choice and we have done so in fair amount of projects. Later in this comment, I will be referring to iTFA version 2, while this article refers to iTFA version 1. I recommend you to take a look at our blog from November November 2, 2009 about iTFA version 2.

Ok. We are back to ASPX pages… Yes, creating ASPX page is an ultimate choice to create a custom user experience. However, by creating custom pages in ASPX or InfoPath, we "force" business users to depend on us (IT/developers) to make future UI modifications. In many cases, our client's IT department either overloaded already or business does not have budget big enough to support new project with the contractor.

In our opinion, you can create many large forms by consolidating hundreds of fields in sections or even multiple pages (iTFA's perspectives). You can use Wizard type of approach when one perspective leads to another perspective by using Dynamic Perspective Routing.

One of the examples I like to give our clients is SalesForce.com. It has a very limiting interface: one column sections, two column sections, few grids, etc. However, they serve hundreds of thousands users a day.

Of course, there are cases when custom UI is absolutely critical and necessary. Therefore iTFA v2 offers several integration capabilities. One of them is the fact that iTFA runtime control is a WebControl, which you can integrate in any custom ASPX page (inside SharePoint context); For example, you can create a mix of iTFA driven form (where business users still in control) and add other custom controls to make form more complex per your requirements. In this case, you can create custom page while preserve business user’s ability to change form later without calling you ;-)

I recommend you to review iTFA version 2 and try to create processes with K2 or Nintex. We love to hear your feedback as it is what drives iTFA roadmap for future versions.

Unknown said...
This comment has been removed by a blog administrator.