Adobe LiveCycle ES4 HTML Workspace provides out of the box support for English, French, German, and Japanese languages. It also provides capability to localize HTML Workspace user interface to any other language.
To localize HTML Workspace user interface to language of your choice:
- Localize text of the HTML Workspace.
- Localize collapsed categories, queues, and processes.
- Localize Date Picker
Before performing above steps, ensure that you follow the steps listed at Generic steps for HTML Workspace customization.
Note:
To change the language of the login screen of HTML Workspace, see Creating a new login screen.
HTML Workspace uses images to display headers of categories, queues, and processes. You require development package to localize these headers. For detailed information about creating development package, see Building HTML Workspace code.
In the following steps, it is assumed that the new localized image files are Categories_nw.png, Queue_nw.png, and Processes_nw.png. The recommended width of the images is 19px.
Note:
To find the browser language locale code of your browser. Open http://[server]:[port]/lc/libs/ws/Locale.html.
-
#categoryListBar .content.nw { background: #3e3e3e url(../images/Categories_nw.png) no-repeat 10px 10px; } #filterListBar .content.nw { background: #3e3e3e url(../images/Queues_nw.png) no-repeat 10px 10px; } #processNameListBar .content.nw { background: #3e3e3e url(../images/Processes_nw.png) no-repeat 10px 10px; }
-
Perform all the semantic changes listed in the Workspace Customization article.
-
// Orignal code setLocale = function () { var lang = $.trim(i18n.lng()); if (lang === null || lang === '' || (lang !== 'fr-FR' && lang !== 'de-DE' && lang !== 'ja-JP')) { window.lcWorkspace.locale = 'en-US'; } else { window.lcWorkspace.locale = lang; } }
//new code setLocale = function () { var lang = $.trim(i18n.lng()); if (lang === null || lang === '' || (lang !== 'fr-FR' && lang !== 'de-DE' && lang !== 'ja-JP' && lang !== 'nw')) { window.lcWorkspace.locale = 'en-US'; } else { window.lcWorkspace.locale = lang; } }
You require development package to localize the datepicker API. For detailed information about creating development package, see Building HTML Workspace code.
-
Download and extract the jQuery UI Package, navigate to <extracted jquery UI package>\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n.
-
Use alias jqueryuidatepickernw to include the jquery.ui.datepicker-nw.js file in all the files that use datepicker. The datepicker is used in the following files:
- js/runtime/views/outofoffice.js
- js/runtime/views/searchtemplatedetails.js
The sample code below shows how to add the entry of jquery.ui.datepicker-nw.js:
//Original Code define([ 'jquery', 'underscore', 'backbone', 'jqueryui', 'jqueryuidatepickerja', 'jqueryuidatepickerde', 'jqueryuidatepickerfr', 'slimscroll', 'usersearchview', 'logmanagerutil', 'loggerutil' ], function ($, _, Backbone, jQueryUI, jQueryUIDatePickerJA, jQueryUIDatePickerDE, jQueryUIDatePickerFR, slimScroll, UserSearch, LogManager, Logger) {
// Code with Date Picker alias for new language define([ 'jquery', 'underscore', 'backbone', 'jqueryui', 'jqueryuidatepickerja', 'jqueryuidatepickerde', 'jqueryuidatepickerfr', 'jqueryuidatepickernw', // Date Picker alias 'slimscroll', 'usersearchview', 'logmanagerutil', 'loggerutil' ], function ($, _, Backbone, jQueryUI, jQueryUIDatePickerJA, jQueryUIDatePickerDE, jQueryUIDatePickerFR, jQueryUIDatePickerNW, slimScroll, UserSearch, LogManager, Logger) {
-
In all the files that use the datepicker API, change the default datepicker API settings. The datepicker API is used in the following files:
- apps\ws\js\runtime\views\searchtemplatedetails.js
- apps\ws\js\runtime\views\outofoffice.js
Change the following code to add the new locale:if (locale === 'ja-JP') { $.datepicker.setDefaults($.datepicker.regional.ja); } else if (locale === 'de-DE') { $.datepicker.setDefaults($.datepicker.regional.de); } else if (locale === 'fr-FR') { $.datepicker.setDefaults($.datepicker.regional.fr); } else { $.datepicker.setDefaults($.datepicker.regional['']); }
if (locale === 'ja-JP') { $.datepicker.setDefaults($.datepicker.regional.ja); } else if (locale === 'de-DE') { $.datepicker.setDefaults($.datepicker.regional.de); } else if (locale === 'fr-FR') { $.datepicker.setDefaults($.datepicker.regional.fr); } else if (locale === 'nw') { $.datepicker.setDefaults($.datepicker.regional.nw); } else { $.datepicker.setDefaults($.datepicker.regional['']); }