Show Menu
THEMEN×

Ändern des Gebietsschemas der AEM Forms Workspace-Benutzeroberfläche

AEM Forms Workspace bietet standardmäßig Unterstützung für Englisch, Französisch, Deutsch und Japanisch. Es bietet außerdem die Möglichkeit, die Benutzeroberfläche von AEM Forms Workspace in jeder anderen Sprache zu lokalisieren.
So lokalisieren Sie die Benutzeroberfläche von AEM Forms Workspace in die gewünschte Sprache:
  • Lokalisieren des Texts von AEM Forms Workspace
  • Lokalisieren von ausgeblendeten Kategorien, Warteschlangen und Prozessen
  • Lokalisieren der Datumsauswahl
Before performing above steps, ensure that you follow the steps listed at Generic steps for AEM Forms workspace customization .
Informationen zum Ändern der Sprache des Anmeldebildschirms von AEM Forms Workspace finden Sie unter Erstellen eines neuen Anmeldebildschirms .

Text lokalisieren

Perform the following steps to add support for a language New and the browser locale code nw .
  1. Melden Sie sich bei CRXDE Lite an. The default URL of CRXDE Lite is https://'[server]:[port]'/lc/crx/de/index.jsp .
  2. Navigate to the location apps/ws/locales and create a new folder nw.
  3. Kopieren Sie die Datei translation.json vom Speicherort /apps/ws/locales/en-US zum Speicherort /apps/ws/locales/nw .
  4. Navigate to /apps/ws/locales/nw and open translation.json for editing. Nehmen Sie gebietsschemaspezifische Änderungen an der Datei „translation.json“ vor.
    Die folgenden Beispiele enthalten die Datei „translation.json“ für die englischen und französischen Gebietsschemata von AEM Forms Workspace.

Lokalisieren von ausgeblendeten Kategorien, Warteschlangen und Prozessen

AEM Forms Workspace verwendet Bilder, um Kopfzeilen von Kategorien, Warteschlangen und Prozessen anzuzeigen. Sie benötigen das Entwicklungspaket um diese Kopfzeilen zu lokalisieren. For detailed information about creating development package, see Building AEM Forms workspace code.
In den folgenden Schritten wird davon ausgegangen, dass es sich bei den neuen lokalisierten Bilddateien um Categories_nw.png , Queue_nw.png und Processes_nw.png handelt. Die empfohlene Breite der Bilder ist 19 px.
Den Browser-Sprachschema-Code Ihres Browsers finden Öffnen Sie https://'[server]:[port]'/lc/libs/ws/Locale.html .
Führen Sie die folgenden Schritte aus, um die Bilder zu lokalisieren:
  1. Mit einem WebDAV-Client platzieren Sie die Bilddateien im Ordner /apps/ws/images .
  2. Navigieren Sie zu /apps/ws/css . Öffnen Sie newStyle.css zur Bearbeitung und fügen Sie die folgenden Einträge hinzu:
    #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;
    }
    
    
  3. Perform all the semantic changes listed in the Workspace Customization article.
  4. Navigieren Sie zum Ordner /js/runtime/utility und öffnen Sie die Datei usersession.js zur Bearbeitung.
  5. Suchen Sie den Code, der im ursprünglichen Codeblock aufgeführt ist und fügen Sie die folgende Bedingung hinzu: lang !== 'nw' to the if statement:
    // 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;
            }
        }
    
    

Datumsauswahl lokalisieren

Sie benötigen das Entwicklungspaket, um die Datumsauswahl -API zu lokalisieren. For detailed information about creating development package, see Building AEM Forms workspace code .
  1. Laden Sie das jQuery UI Package herunter und extrahieren Sie es, navigieren Sie zu <extrahiertes jQuery UI Package> \jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n.
  2. Kopieren Sie die Datei „jquery.ui.datepicker-nw.js“ für Gebietsschema-Code „nw“ nach „apps/ws/js/libs/jqueryui“ und nehmen Sie gebietsschemaspezifische Änderungen an der Datei vor.
  3. Navigate to apps/ws/js and open the jquery.ui.datepicker-nw.js file for editing.
  4. Erstellen Sie in der Datei "main.js"einen Alias für jquery.ui.datepicker-nw.js. Der Code zum Erstellen eines Alias für die jquery.ui.datepicker-nw.js Datei lautet:
    jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
    
    
  5. Use alias jqueryuidatepickernw to include the jquery.ui.datepicker-nw.js file in all the files that use datepicker. Die Datumsauswahl wird in den folgenden Dateien verwendet:
    • js/runtime/views/outofoffice.js
    • js/runtime/views/searchtemplatedetails.js
    Der Beispielcode unten zeigt, wie Sie den Eintrag aus „jquery.ui.datepicker-nw.js“ hinzufügen:
    //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) {
    
    
  6. In allen Dateien, die die Datumsauswahl-API verwenden, ändern Sie die Standardeinstellungen der Datumsauswahl-API. Die Datumsauswahl-API wird in den folgenden Dateien verwendet:
    • apps\ws\js\runtime\views\searchtemplatedetails.js
    • apps\ws\js\runtime\views\outofoffice.js
    Ändern Sie den folgenden Code, um das neue Gebietsschema hinzuzufügen:
    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['']);
    }