Crear una aplicación en varios idiomas

En este artículo, aprenderá a crear una aplicación en varios idiomas con experiencia localizada. Con este método, puede usar componentes de la aplicación de lienzo y hacer que las traducciones estén disponibles en una aplicación usando una sintaxis de fórmula uniforme.

Importante

El método descrito en este artículo usa componentes para aplicaciones de lienzo que están en vista previa pública. Para obtener más información, consulte Crear un componente para aplicaciones de lienzo

Crear un componente de traducción

Cuando se trabaja con una aplicación en varios idiomas, el primer paso es crear un componente reutilizable para la traducción. En este componente, almacenará una tabla que actúa como el diccionario de todas las traducciones que necesitará. Se utilizará una propiedad de salida para proporcionar cadenas de salida de esta tabla de diccionario según el idioma del usuario que ejecuta la aplicación que utiliza este componente.

1. Inicie sesión en Power Apps.

2. En el panel izquierdo, seleccione Aplicaciones.

3. Bajo Aplicaciones, seleccione Bibliotecas de componentes (vista previa).

   

4. Seleccione + Nueva biblioteca de componentes (versión preliminar).

5. Ingrese un nombre, como "Componentes de traducción", y seleccione Crear para abrir el componente en Power Apps Studio.

6. Cambie el nombre de "Componente1" seleccionando ... en el panel izquierdo y luego seleccione Rebautizar como "Componente de traducción".

   

7. En el panel de propiedades en el lado derecho de la pantalla, seleccione + Nueva propiedad personalizada.

8. Establezca los siguientes valores de propiedades:

   Nombre de la propiedad	valor
   Nombre	Idioma
   Name	Idioma
   Descripción	El idioma al que desea traducir el texto.
   Tipo de propiedad	Entrada
   Tipo de datos	Texto

9. Seleccione la casilla Iniciar OnReset cuando cambia el valor.

   

10. Seleccione Crear.

    Nota

    Esta propiedad de entrada recibirá el ID de configuración regional actual (LCID) del usuario que inició sesión.

11. En el panel de propiedades en el lado derecho de la pantalla, seleccione + Nueva propiedad personalizada.

12. Establezca los siguientes valores de propiedades:

    Nombre de la propiedad	valor
    Nombre	Etiquetas
    Name	Etiquetas
    Descripción	Etiquetas traducidas.
    Tipo de propiedad	Salida
    Tipo de datos	Grabar

    

13. Seleccione Crear.

    Nota

    Esta propiedad de salida expone las etiquetas traducidas según el ID de la configuración regional de entrada.

14. En la parte superior izquierda de la pantalla, seleccione el menú desplegable de la lista de propiedades y luego seleccione la propiedad OnReset del componente.

    

15. Copie y pegue la siguiente fórmula en la barra de fórmulas para la propiedad OnReset.

    Set(
     varTranslations,
     Table(
             {
                 Language: "en-us",
                 Labels: {
                     Title: "UI Tips for building canvas apps",
                     JobTitle: "Power Platform Specialist"
                 }
             },
             {
                 Language: "pt-br",
                 Labels: {
                     Title: "Dicas de UI para construir canvas apps",
                     JobTitle: "Especialista de Power Platform"
                 }
             }
         )
        )
    

    La fórmula usa la función Set() para crear una tabla con las etiquetas en diferentes idiomas a modo de diccionario. Para personalizar esta tabla como el diccionario para sus traducciones, cambie los nombres de los controles como Título, Título profesional, Plataforma, Cerrar, Abrir, Cancelar, etc. Puede agregar o eliminar traducciones para nombres de control según los requisitos de su negocio.

    La tabla también debe tener una entrada para cada idioma que admita su aplicación. Cada entrada tendrá una propiedad Etiquetas que contendrá el contenido traducido de todos los botones, entradas y etiquetas posibles en su aplicación.

16. En la parte superior izquierda de la pantalla, seleccione el menú desplegable de la lista de propiedades y luego seleccione la propiedad Etiquetas del componente.

    

17. Copie y pegue la siguiente fórmula en la barra de fórmulas para la propiedad Labels.

       LookUp(
        varTranslations,
        Language = Lower(
            Coalesce(
                Self.Language,
                Language()
            )
        )).Labels
    

    La fórmula busca la entrada de traducción correcta basada en el idioma de entrada Language mediante la función Lookup(). En caso de que no se establezca el idioma, la fórmula usa el idioma del usuario actual como filtro a través de la función Coalesce.

18. Seleccione Archivo ->Guardar para guardar la biblioteca de componentes.

19. Seleccione Publicar para publicar la biblioteca de componentes.

    Propina

    Para obtener más información sobre cómo crear, guardar y publicar una biblioteca de componentes, vaya a Crear una biblioteca de componentes de ejemplo

La biblioteca de componentes de traducción se crea, guarda y publica para su uso.

Usar el componente de traducción en la aplicación

Anteriormente, creó la biblioteca de componentes de traducción para su reutilización. En esta sección, creará una aplicación que usa la biblioteca de componentes de traducción y demostrará la traducción de idiomas en función del idioma seleccionado.

1. Comience por crear una aplicación de lienzo en blanco con diseño de Teléfono.

2. En el lado izquierdo de la pantalla, seleccione + (Insertar).

3. En la parte inferior izquierda de la pantalla, seleccione Obtener más componentes.

4. Seleccione Componente de traducción.

   

   Nota

   El nombre puede ser diferente si guardó la biblioteca de componentes creada anteriormente con un nombre diferente.

5. Seleccione Importar.

6. En el lado izquierdo de la pantalla, seleccione + (Insertar).

7. En Componentes de biblioteca, seleccione Componente de traducción para agregar el componente a esta aplicación.

8. En el lado izquierdo de la pantalla, seleccione la vista de árbol.

9. Seleccione el componente de traducción.

10. En la parte superior izquierda de la pantalla, seleccione el menú desplegable de la lista de propiedades y luego seleccione la propiedad Visible del componente.

11. Establezca el valor de la propiedad Visible en false para que el componente sea invisible en la aplicación.

12. En Entrada en la lista de controles, seleccione Alternar.

13. En la parte superior izquierda de la pantalla, seleccione el menú desplegable de la lista de propiedades y luego seleccione la propiedad OnChange del componente.

14. Actualice la fórmula de la propiedad OnCheck del control de alternancia a lo siguiente.

        Set(varLanguage,"pt-br")
    

    En esta fórmula, el conmutador establece una variable llamada varLanguage con el valor de "pt-br" utilizando la función Set(), para el código de idioma portugués (BR).

15. Actualice la fórmula de la propiedad OnUncheck del control de alternancia a lo siguiente.

        Set(varLanguage,"en-us")
    

    En esta fórmula, el conmutador establece una variable llamada varLanguage con el valor de "en-us" utilizando la función Set(), para el código de idioma inglés (EE. UU.).

16. En el lado izquierdo de la pantalla, seleccione el componente de traducción.

17. En la parte superior izquierda de la pantalla, seleccione el menú desplegable de la lista de propiedades y luego seleccione la propiedad Idioma del componente.

18. Establezca el valor de la fórmula para la propiedad Idioma en varLanguage. La variable varLanguage viene determinada por el botón de alternancia configurado anteriormente. Cuando se activa el botón de alternancia, el idioma se establece en "pt-br". Cuando está desactivada, el idioma se establece en "en-us".

19. En el lado izquierdo de la pantalla, seleccione + (Insertar).

20. Seleccione Etiqueta de texto.

21. Actualice el nombre del control de etiqueta a Título en el lado derecho de la pantalla mediante el panel de propiedades.

22. Vuelva a seleccionar Etiqueta de texto para agregar una etiqueta más.

23. Actualice el nombre del control de etiqueta a JobTitle.

24. Establezca las etiquetas Title y JobTitle debajo del control de alternancia para que ambas etiquetas estén visibles.

25. Establezca la propiedad Text para las etiquetas Title y JobTitle de la parte superior izquierda de la pantalla en lo siguiente.

    Label	Fórmula
    Nombre	'Translation component_1'.Labels.Title
    JobTitle	'Translation component_1'.Labels.JobTitle

    Nota

    Reemplaza 'Component_1 de traducción' en esta fórmula por el nombre del componente de tu aplicación, si es diferente.

    De forma similar, puede utilizar diferentes etiquetas y propiedades, como se define en el componente que creó anteriormente para pasar más valores de propiedad. Por ejemplo, además de Title y JobTitle, puede crear más propiedades como Description o Instructions en la biblioteca de componentes con el texto traducido. Y luego, use tales propiedades en las etiquetas respectivas, como 'Translation component_1'. Labels.Description o 'Translation component_1'.Labels.Instructions.

26. Seleccione Archivo ->Guardar, actualice el nombre de la aplicación y, a continuación, seleccione Guardar para guardar la aplicación. Más información: Guardar y publicar una aplicación

Probar la aplicación con traducción de idiomas

Ahora su aplicación usa el componente de traducción. Vaya a Power Apps y seleccione la aplicación para ejecutar.

Cuando se selecciona el botón de alternancia, el idioma se cambia a portugués (BR) para las etiquetas. Cuando está desactivada, el idioma se establece de nuevo en inglés (EE. UU.).

Con este enfoque, ahora puede crear su propio componente con el diccionario de traducciones que se ajuste a sus requisitos empresariales. Y, a continuación, cree más aplicaciones de lienzo que usen el componente que ofrece a los usuarios empresariales la capacidad de usar diferentes idiomas.

Consultar también

Adición y configuración de controles
Conocer las variables
Referencia de fórmula