Localizing a Coach View using IBM BPM V8.0

Introduction

Localization, the process of adapting a product or services to a particular language or culture, is available within Business Process Manager. The primary use case for localization is to translate coaches, coach views, and aspects of user interfaces into other languages while still maintaining the original variable structure within the coach view. When we want to display our front end to end users it will be English user interface by default. By using localization concept in IBM BPM V8.0, we can make our user interface effectively to support multiple languages.

Overview

Here By using localization concept in IBM BPM V8.0, we can make our user interface effectively to support multiple languages. The basic idea about the localizing coach views is to make end users comfort with their local language. Here I am going to explain how we can create a Coach view and how we can make localization of the coach view.

In this example, the Coach View has English labels. The default locale in this case is English. However, you want French-speaking users to be able to read these labels by providing translations.

We will take a Bank application where bank is providing online credit card application to apply credit card online for the customers. When the customer from US, they can see English language as default in front end (Online application). When the customer is from France he should see the online application form in French language.  This credit card application form we are going to develop and making localizing using coach views in IBM BPM V8.0.

Implementation

We need to complete the following steps to build our application.

Ø  Create and Implement a Coach View.

Ø  Create a localization Service.

Ø  Configure Localization Service with Coach View.

Ø  Create Human Service and Implement.

Ø  Test the application.

Create a process App in IBM Process Designer and name it as ‘BANK APPLICATION’. Open the BANK APPLICATION in Process designer.

Create and Implement a Coach View:

First, we need to create coach view. Click the + next to User Interface and select Coach View to create a new Coach view.

Name as ‘Credit Card Application’. Drag and drop Vertical Section control into Layout panel rename as ‘Credit Card Application’.

Add the text controls and rename as Applicant Name, Account Number, Pan Card Number, Email ID, Phone Number, Income, and Company, add Date picker control rename as Date Of Birth, and add button Control rename as Submit to the Coach View and build as shown below.

Create a localization Service:

Now we want to create the localization resource for the local. Click on the + sign select Localization Resource and rename as LocalizationResource.

Under localization keys, we need to add the keys. Some preferred suggestions for naming conventions include lower camel case or all caps to represent a constant value. Type a Key name and click on Add.

Add the all keys which are required for your application.

Next, add all of the languages that are desired for the labels to be converted into other languages under Localization section.

Under Localizations click on add and select the France.

Click the value for the default locale and type value. To save this value and move to the French locale, press Ctrl+Enter. Type French Value then press Alt+Enter.

Repeat the previous step and this step for the other keys.

Table 1. Values for the keys
Key	Default value	French value
AccountNo	Account Number	Numéro de compte
ApplicantName	Applicant Name	Nom du demandeur
Company	Company	entreprise
CreditCardApplication	Credit Card Application	Demande de carte de crédit
DateOfBirth	Date Of Birth	Date de naissance
EmailID	Email ID	email ID
Income	Income	Revenu
PanCardNo	Pan Card Number	Pan Numéro de la carte
Phone No	Phone Number	Numéro de téléphone
Submit	Submit	Soumettre

Save the changes to the localization resource. Select the French and add the values to key under localization values.

For Default Locale add the English labels which we want show on coach view.

Configure Localization Service with Coach View:

Next, go to the coach that we would like to use the localization keys on.

First, in the Variables tab, add the Localization Bundle Group as a LocalizationResource.

Under variables section in Coach View, click on + sign beside Localization Resource and select LocalizationResource.

Now it will look like below.

Then, on the Coach View, choose the label variable symbol, hit the Select button, and within LocalizationResource, bind the correct localization key to the label.

Replace the existing labels with the appropriate keys from the localization resource:

Change to the Layout page and select the ApplicationName field. In the General properties, click the   button for the label. In the window that opens, expand the Localization Resources nodes to select the ApplicationNamekey.

Repeat the previous step to assign the appropriate keys to the other fields in the Coach View.  Final coach view will look like below.

Create Human Service and Implement:

Now we need to create and implement Human service to run our application.

Click the + next to User Interface and select Human Service to create a new Human Service and rename as Credit card HS.

Drag and Drop Coach Activity and rename as ‘Credit card Application’.

Select Coaches section in Credit Card HS, drag and drop Credit Card Application Coach View from No Tags Controls.

Come back to Diagram section in Credit Card HS human service select wire control and wire as shown below.

Save the changes.

Test the application:

Now we have completed our application development. We need to test either this application is working as expected or not. First we will test as a default language English is displaying or not.

Open Credit Card HS Human Service and click on Run Service button at right corner.

Now our application will open in a browser, it will be look like below.

The above user interface is understandable for English users; we need to show the user interface in French language for French users. So log into Process Admin Console and change the language.

Click on Preferences at right corner select French language, then logout and login the console.

Now come back to Credit Card HS human service and click on Run Service button. Now in browser our application page will open in French language as shown below.

So the above user interface is clear for French users. This is the way we can implement localization for different language support in Coach View.

Conclusion

Localization, the process of adapting a product or services to a particular language or culture, is available within Business Process Manager. The primary use case for localization is to translate coaches, coach views, and aspects of user interfaces into other languages while still maintaining the original variable structure within the coach view.

Downloads

File Name	Description	Size	Download
BANK_APPLICATON_V1.0.twx	Localization Sample	780 KB	Download
Localizing a Coach View.pdf	Localizing a Coach View Document	760 KB	Download