logo

Selecting customer accounts from the table

As part of integration with an external system, it is necessary to receive a list of objects in a business process and provide a user with the possibility to select one value. It is important to realize, that these are not entities that you can import once and synchronize changes, but frequently changing objects.

Let us take information on customer accounts in an external system as an example.

In a process, a user has to select a specific customer account and make an account statement. The process logic is following:

1) The user selects a customer in a task.

2) In the custom activity, a request of information to a web-service is implemented, with writing the results to a special object for “temporary” information.

3) The user selects the required report from the table.

4) The process continues – the statement is generated and so on.

To save the search results, create a special object, e.g. SearchResultObject, with the displayed name – “Account”. Object instances can be created as part of a custom activity in a process; it is easy to pass them to sub-processes and save temporary changes that do not require a repeated request of information from an external system.

A service is invoked in the code of the custom activity. Then, the received results are written to the “Account” object (SearchResultObject). The obligatory condition is that the object has to have a field of the Process instance type (object) to show it on the form later on.

 Below is the code of the custom activity:

var ws = new WebService();
var WSAnswer = ws.GetAccountsInfoByClient(parameters.Client.Uid);
foreach (var item in WSAnswer)
{
var resultobject = new SearchResultObject();
resultobject.Number = item.Number;
resultobject.OpenDate = item.OpenDate;
resultobject.CardNumber= item.CardNumber;
resultobject.Cash = item.Cash;
resultobject.WorkFlowInstance= parameters.WorkFlowInstance;
resultobject.Save();
}

Next, the task form of this process instance displays the list of accounts filtered with WorkflowInstance.Id to the context variable and/or to the list of linked objects (standard element of the form builder http://kb.elma-bpm.com/article-1268.html).

Form of the task to select an account looks like that:

The task form includes two important elements: a required field of the SearchResultObject type with the list of linked elements.

Context variables of the Account (Object) type

A regular field in the context. A script that limits the number of values of this variable is applied to the task form. The point is to provide only those entries that were received in the current process instance, i.e. filtered by the WorkflowInstance field. This is an example of the script:

var st = context.GetSettingsFor(x=>x.SearchResultObject) as EntitySettings;
st.FilterQuery = “WorkflowInstance=”+context.WorkflowInstance.Id;
st.Save();

In most cases the solution can be used in a process, however, selecting an account will be inconvenient for a user, since the drop-down list will include only the account numbers.

Accounts table on the form

For convenience, accounts information should be presented as a table. Since accounts are saved in an object, you can use a standard element of the form builder – a list of linked objects.

Select the Account object (SearchResultObject class) and enter the correct string for EQL filtering. Basically, you filter the same way, as in the field for selecting an account, i.e. by WorkflowInstance.

The EQL filter string looks like that:

1	WorkflowInstance = {$WorkflowBookmark.Instance.Id}

If you had to add additional conditions (IsActive=true, Cash>0), remember to specify them here, so that a user could not select misplaced accounts or see accounts that cannot be selected.

To learn more about how to use this element on a process task form, check this article http://kb.elma-bpm.com/article-1268.html.

Remember to add all the necessary columns on the Columns tab. As the result, a user will be able to see the table of found accounts on the task form and select the required one.

The form looks similar to a block; however, it is difficult to implement a selector for a block.

Selecting an account from the table on the form

A user can see all the necessary accounts information, but it is unclear, how to select an account – there is a table with information and a separate selector. It would be more convenient for the user to select right in the table.

Unfortunately, it is possible to identify a mouse click on a table only on the client end, i.e. in the browser, using JavaScript. ELMA provides for some frequently used functions of JavaScript, for example, selecting a value in an Object-type field:

var selector =  elma.EntitySelector.Manager.get(’Entity_Account_Id’);
selector.addItem(’123’);

This script selects a context variable on the form with the Account class name whose ID is 123.

In addition, when users mouse over an account in the table, it can be highlighted, to make the selection more obvious. To do so, define a CSS style for the table row on the form in the HTML markup (<tr>) (tr:hover):

<style type=\"text/css\">";
str += ".resize-mode-web tr:hover{background-color: #CBE2FF;}";
str += "</style>

Thus, you can implement highlighting of table rows before selecting an account in the table.

Since the selection script requires passing the account ID, it is best to output this code right in the table. For that, you can add a field of the HTML type to the Account object (SearchResultObject) and calculate its value with a script.

Since you are going to add a JavaScript code and a CSS style in this field, it will not have a visible content, therefore, the displayed name can be short and meaningless, in this case it is an asterisk (*).

Specify the minimum convenient column width as 20 pixels and add the script text:

new Func<System.Web.HtmlString>(() => {
string str = "";
str += System.String.Format("<div id=\"customDiа if notv{0}\">*</div> {1}", Id.ToString(), System.Environment.NewLine);
str += "<script>" + System.Environment.NewLine;
str += "$(document).ready(" + System.Environment.NewLine; 
str += "function(){" + System.Environment.NewLine;
str += String.Format("$(’#customDiv{0}’).parent().parent().parent().parent().bind(\"click\", function()", Id.ToString());
str += "{" + System.Environment.NewLine;
str += "var selector =  elma.EntitySelector.Manager.get(’Entity_Account_Id’);";
str += String.Format("selector.addItem(’{0}’);", Id.ToString());
str += "return false;" + System.Environment.NewLine;
str += "})" + System.Environment.NewLine;
str += "});";
str += "</script>";
str += System.Environment.NewLine;
str += "<style type=\"text/css\">";
str += ".resize-mode-web tr:hover{background-color: #CBE2FF;}";
str += "</style>";
return new System.Web.HtmlString(str);
})()