Alteração do local da interface do usuário do AEM Forms workspace

A AEM Forms workspace oferece suporte pronto para uso para idiomas inglês, francês, alemão e japonês. Também fornece a capacidade de localizar a interface do usuário do AEM Forms workspace para qualquer outro idioma.

Para localizar a interface do usuário do AEM Forms workspace para o idioma de sua escolha:

• Localizar texto do espaço de trabalho do AEM Forms.
• Localize categorias, filas e processos recolhidos.
• Localizar Selecionador de Datas

Antes de executar as etapas acima, siga as etapas listadas em Etapas genéricas para personalização do espaço de trabalho do AEM Forms.

Localização de texto

Execute as etapas a seguir para adicionar suporte a um idioma Novo e o código de local do navegador nw.

1. Faça logon no CRXDE Lite.

   O URL padrão do CRXDE Lite é https://[server]:[port]/lc/crx/de/index.jsp.

2. Navegar até o local apps/ws/locales e criar uma nova pasta nw.

3. Copiar o arquivo translation.jsondo local /apps/ws/locales/en-US para localização /apps/ws/locales/nw.

4. Navegar para /apps/ws/locales/nw e abrir translation.json para edição. Faça alterações específicas da localidade no arquivo translation.json.

   Os exemplos a seguir contêm o arquivo translation.json para as localidades em inglês e francês do espaço de trabalho do AEM Forms.

   

Localização de categorias, filas e processos recolhidos

O espaço de trabalho do AEM Forms usa imagens para exibir cabeçalhos de categorias, filas e processos. Você precisa de um pacote de desenvolvimento para localizar esses cabeçalhos. Para obter informações detalhadas sobre a criação de pacotes de desenvolvimento, consulte Criação do código do espaço de trabalho do AEM Forms.

Nas etapas a seguir, presume-se que os novos arquivos de imagem localizados sejam Categories_nw.png, Queue_nw.png e Processes_nw.png. A largura recomendada das imagens é de 19px.

Execute as seguintes etapas para localizar as imagens:

1. Usando um cliente WebDAV, coloque os arquivos de imagem no /apps/ws/images pasta.

2. Navegar para /apps/ws/css. Abrir newStyle.css para editar e adicionar as seguintes entradas:

   #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. Execute todas as alterações semânticas listadas no Personalização do Workspace artigo 10. o

4. Navegue até o js/runtime/utility e abra o arquivo* usersession.js* para edição.

5. Localize o código listado no bloco de código original e adicione a condição lang!== 'nw' para a instrução if:

   // 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;
           }
       }
   

Localizando seletor de datas

Você precisa de um pacote de desenvolvimento para localizar a API *datepicker *. Para obter informações detalhadas sobre a criação de pacotes de desenvolvimento, consulte Criação do código do espaço de trabalho do AEM Forms.

1. Baixe e extraia o Pacote da interface do usuário do jQuery, navegue até <extracted jquery="" ui="" package="">\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n.

2. Copie o arquivo jquery.ui.datepicker-new.js para código de localidade agora em apps/ws/js/libs/jqueryui e faça alterações específicas de localidade no arquivo .

3. Navegar para apps/ws/js e abra o jquery.ui.datepicker-nw.js para edição.

4. No arquivo main.js, crie um alias para jquery.ui.datepicker-nw.js. O código para criar um alias para a variável jquery.ui.datepicker-nw.js O arquivo é:

   jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
   

5. Usar alias jqueryuidatepickernw para incluir a jquery.ui.datepicker-nw.js em todos os arquivos que usam datepicker. O datepicker é usado nos seguintes arquivos:

   • js/runtime/views/outofoffice.js
   • js/runtime/views/searchtemplatedetails.js

   O código de amostra abaixo mostra como adicionar a entrada de jquery.ui.datepicker-new.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) {
   

6. Em todos os arquivos que usam a API do datepicker, altere as configurações padrão da API do datepicker. A API do datepicker é usada nos seguintes arquivos:

   • apps\ws\js\runtime\views\searchtemplatedetails.js
   • apps\ws\js\runtime\views\outofoffice.js

   Altere o seguinte código para adicionar a nova localidade:

   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['']);
   }
   

para

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['']);
}

Recursos do Business.Adobe.com

Auto Text Summarization Theme Editor Managed Cloud Content As A Service Digital Asset Management Content Management System