How to do Multilingual Support of a Process Data Item Name in the Input Screen?

Realize the language switching of Process Data Item name in input screen (task execution screen) by using JavaScript.

Hi, there.

Nowadays users who use English or other languages have been increasing.
Accordingly, we have received requests such as

“I want to change the language on the input screen (task execution screen) too!”

Basically, as for changing language, you can configure the language used for notifications from Questetra BPM Suite and for its display.

Change Notification Setting and Language Setting
In addition, in [Account Settings], it is possible to configure your personal settings such as changing password or language setting.

1. Display Language
It is possible to change the display language of the operation screen such as menu notation or Email alert.

https://www.questetra.com/tour/m1/m108/

However, it seems there is another reason for this request.

== Inquiry Background ==

When having changed the language, the parts Questetra BPM Suite displays as static will be displayed in the translated language.

<Language setting: Example of Display in English>
%e7%94%bb%e5%83%8f%ef%bc%91

However, in cases when Users use multiple languages, we have the recommendation below:

(In the case of Japanese and English, mixed)
The setting of Process Data Item should be written in both Japanese and English.

<Example: Simultaneous Display in Japanese/English >
%e7%94%bb%e5%83%8f%ef%bc%92

Depending on the language, for instance in English, you must use more characters than in Japanese, so the display of the Data Item name may become cramped or too long.

Also, for some people, when a language not used as the main display language is shown (in the example above, those who use English as a main language), they may find it difficult to read at first.

== Solution ==

Therefore, we propose a (last resort) solution.
That is,

to switch content written in both languages being used.

<Example: Switching Languages>
%e7%94%bb%e5%83%8f%ef%bc%93

We deviced the switching method shown above by using JavaScript.

<Language Switching : JavaScript>

<script type="text/javascript">
jQuery(document).ready(function(){
  var sep = "/";
  var itemLabels;
  var buttonLabels;
  var lang = "ja";
  if (jQuery('label[class="item-label"]:first').text().replace(/^\s+|\s+$/g, "") == "Title"){
    lang = "ja";
  }else{
    lang = "en";
  }
  jQuery('label[class="item-label"]').each(function(){
    itemLabels = jQuery(this).text().replace(/^\s+|\s+$/g, "").split(sep);
    if (lang == "ja"){
      jQuery(this).text(itemLabels[0]);
    }else{
      jQuery(this).text(itemLabels[1]);
    }
  });
  jQuery('input[type="submit"][id^="taskForm_"]').each(function(){
    buttonLabels = jQuery(this).val().split(sep);
    if (lang == "ja"){
      jQuery(this).val(buttonLabels[0]);
    }else{
      jQuery(this).val(buttonLabels[1]);
    }
  });
  jQuery('input[type="submit"][id="submitButton"]').each(function(){
    var str = jQuery(this).val();
    if (lang == "ja"){
      buttonLabels = str.slice(str.indexOf("「")+1,str.lastIndexOf("」")).split(sep);
      jQuery(this).val("「"+buttonLabels[0]+"」finish processing");
    }else{
      buttonLabels = str.slice(str.indexOf("\"")+1,str.lastIndexOf("\"")).split(sep);
      jQuery(this).val("Finish \""+buttonLabels[1]+"\"");
    }
  });
});
</script>

♦Use “/” as the separator of use language listed in parallel.
♦The parallel display pattern is supposed to be “{Japanese String}/{English String}”.
♦It also supports buttons for the splitting buttons

== Afterword ==

Since this method changes the display dynamically by using jQuery, some risk is involved.
For example, as shown in

jQuery(‘label[class=”item-label”]’).each(function(){

, the selector depends on the design of the screen.
There is a possibility that the method will not work properly if the name of the stylesheet has been changed.
(You will be asked to perform a pre-confirmation at the time of update)

It would be good to write the Process Data Item name in both languages leaving enough display width.

Please feel free to contact us should you have any concerns.

2016-09-27

About Masato Furukubo

Questetra, Inc. Sales Department
View all posts by Masato Furukubo

Recommendations
Prev article - 50. Questetra Tips Easy Issue Data Search with a Right-click (Chrome extension)
Next article - 50. Questetra Tips A Sample for Developers: Add-on for API Connection with kintone
Another article - Masato Furukubo To Control Inputting for Multiple Select Type Data Items (Radio Button / Checkbox ed.)

Archive

 RSS