Panel izquierdo
El panel izquierdo del editor de pantallas proporciona un conjunto de pestañas que te permiten construir y personalizar tu pantalla. En primer lugar, te permite ver y editar los detalles referidos a la pantalla, tales como su nombre, descripción y etiquetas relacionadas.
Desde el panel izquierdo, puedes arrastrar y soltar componentes nuevos o componentes de librería (componentes que se han creado anteriormente y han sido guardados para su reutilización) en el canvas para configurarlos, y también verlos dispuestos en una vista de árbol para identificar el orden en que se establecen. Además, puedes configurar las traducciones que se aplicarán a los componentes que incluyan texto cada vez que se cambie el idioma de la app, así como identificar errores en la configuración de un atributo de componente. Consulte las secciones a continuación para obtener más información sobre cada pestaña disponible.
La pestaña Settings 
contiene detalles de configuración sobre la pantalla que se definen al crearla y detalles adicionales que puede editar en cualquier momento. Si estás creando una nueva pantalla, debes darle un nombre que la identifique. Además, debes configurar el campo Sequence con un ID siguiendo la estructura S y luego es de tres dígitos (por ejemplo, S097); este id establece un número de orden para la pantalla y también establece un orden en la progresión de las pantallas. También puedes configurar el campo View/Area, el área visual de la pantalla que está editando y la vista del sitio a la que pertenece. Tanto la site view como el layout aplicado deben estar ya preconfigurados en su app y pantalla. Dependiendo del área de la pantalla que estés editando, el resto del canvas aparecerá en gris y no será editable.
Aviso
Los campos Sequence y View/Area no se pueden editar una vez configurados al crear la pantalla.
Opcionalmente, puedes configurar la descripción de la pantalla y agregar etiquetas. La descripción es un texto breve para explicar el objetivo de la pantalla o por qué se creó; las etiquetas son palabras clave relacionadas con el propósito de la pantalla que se pueden utilizar para encontrarla fácilmente en la página Screens.
La pestaña Components 
muestra todos los componentes que se pueden usar en la pantalla. Incluye los componentes dentro de la librería built-in, componentes predeterminados adicionales y cualquier componente creado y publicado específicamente para la app en la que estás trabajando.
De forma predeterminada, los componentes se muestran en la vista de cuadrícula. Para ver los componentes en la vista de lista, haz clic en el icono vertical de tres puntos a la derecha y haz clic en View List (
). Para cambiar la vista de nuevo, haga clic en View Grid (
. Para encontrar un componente, usa la barra de desplazamiento para recorrer la lista de componentes o usa la barra de búsqueda para encontrar un componente escribiendo su nombre.
Para agregar un componente a la pantalla, arrástralo desde el panel izquierdo y suéltelo en el canvas. Cuando seleccionas un componente en el canvas, el panel derecho muestra sus atributos, que se pueden editar para personalizar su apariencia, establecer funciones y agregar animaciones. Estos atributos varían dependiendo del componente seleccionado. Lee Panel derecho para obtener más información.
Además de los componentes disponibles en el editor de pantallas, puedes utilizar los componentes creados dentro de los módulos previamente vinculados a su sucursal en la sección Dependencies disponible en Settings. Lea Instanciar un módulo de tipo componente para obtener más información.
La pestaña Library muestra todos los componentes reutilizables creados en el ambiente en el que estás trabajando. Los componentes de librería son componentes reutilizables que puedes incluir en una pantalla duplicándolos o haciendo referencia al elemento original. Puedes agregar un componente individual a la biblioteca o un componente contenedor que incluya varios componentes.
De forma predeterminada, los componentes de librería se muestran en la vista de cuadrícula () y el criterio de organización es Sort by type 
. Para cambiar la vista predeterminada y ver los componentes de librería en la vista de lista, pasa el cursor sobre la flecha a la derecha del icono de cuadrícula () y haz clic en List view (). Si deseas cambiar los criterios de organización predeterminados para definir el orden de los componentes de librería, haz clic en el icono vertical de tres puntos y selecciona Sort alphabetically (
) o Sort by Feature Template (
).
Para encontrar un componente reutilizable, usa la barra de desplazamiento para recorrer la lista de componentes o usa la barra de búsqueda para encontrar un componente escribiendo su nombre. Para utilizar un componente reutilizable, arrástralo y suéltalo desde el panel al canvas. Se abre una ventana emergente con dos opciones:
Link: Invoca el componente original en la pantalla. No puedes modificar un componente de librería vinculado y cualquier actualización realizada en el componente original se verá reflejada en cada pantalla donde se invocó.
Duplicate Crea una copia exacta del componente original. Puedes editar los atributos del componente de librería duplicado.
Create a Library Component
Sugerencia
Los componentes de librería se crean a partir de componentes existentes. Antes de crear un componente de librería, verifica que los atributos del componente original estén correctamente configurados.
Para crear un nuevo componente de librería, selecciona el componente que deseas reutilizar en el canvas o en la vista de árbol. A continuación, haz clic en Create library en la barra de herramientas, como se muestra en la imagen a continuación.
Aparecerá una ventana emergente, donde deberás agregar un nombre al nuevo componente de biblioteca y una imagen en miniatura. La imagen en miniatura debe estar en formato .jpg o .png y ser menor de 95 (alto) por 48 (ancho) píxeles. Haz clic en Save.
El nuevo componente de la biblioteca aparece en la pestaña Library y ahora puedes comenzar a utilizarlo en cualquier pantalla.
En esta pestaña, figuran los componentes individuales y contenedores incorporados en la pantalla y te permiten organizarlos de acuerdo con su jerarquía, como sucede cuando ordenas archivos en una carpeta.
Una vez abierta la pestaña, puedes hacer clic en 
para ocultar el canvas y solo ver la vista de árbol y la pestaña de componentes abierta. Esto te permitirá centrarte en la lista de componentes y arrastrar y soltar cualquier componente adicional que puedas necesitar a la vista de árbol. Además, puedes hacer clic en 
o 
para expandir o contraer los componentes contenedores (como un panel o un flex container) y mostrar u ocultar los componentes dentro de él.
Para reorganizar un componente de la lista, puede usar una de dos opciones. Para reordenar un componente manualmente, mantenlo cliqueado y arrástralo hacia arriba para llevarlo hacia atrás o hacia abajo para llevarlo hacia delante, hasta que quede en la posición que necesitas. También puedes hacer clic en las flechas arriba y abajo a la derecha de cada componente para moverlas a la parte posterior o frontal de la pantalla, respectivamente. Además, puedes hacer clic en 
para duplicar un componente o un componente contenedor con todos sus componentes secundarios en la vista de árbol.
La pestaña Translations contiene una lista de las traducciones aplicadas a los componentes de la pantalla. En esta pestaña, encontrarás una traducción específica recorriendo la lista o haciendo clic en los tres puntos verticales a la derecha y haciendo clic en All para ver todas las traducciones definidas o Missing para ver las traducciones pendientes para el componente seleccionado en el canvas. .
La información listada depende del idioma seleccionado en las opciones del canvas. Si el idioma seleccionado es el idioma predeterminado de la app, la lista contiene el texto introducido para cada componente en el campo Value de la sección Basic ubicado en la pestaña Design del panel derecho. Si el conjunto de idiomas es diferente del idioma predeterminado, la lista mostrará las traducciones a dicho idioma definidas para cada componente. Si seleccionas un idioma y no defines traducciones, la lista mostrará los valores de texto en el idioma predeterminado y un signo de advertencia a la derecha que indica que falta la traducción.
Nota
Esta pestaña solo está disponible si hay más de un idioma habilitado en la configuración de la rama. En la configuración, puede agregar los idiomas que desee habilitar o cambiar el idioma predeterminado de su app.
Agregar o editar traducciones
Importante
Las traducciones se aplican a los componentes que contienen datos de texto que se pueden configurar en diferentes idiomas.
Para agregar una o más traducciones al texto de un componente, selecciona el componente de la vista de árbol o el canvas. Luego, dirígete a la pestaña Design en el panel derecho. En la sección Basic, dirígete al campo Value y haz clic en el icono del diccionario de traducciones (
). Haz clic en + Add para abrir el modal Add new entry to translations dictionary, donde puedes agregar las traducciones del texto del componente.
En la sección Clave, el sistema establece automáticamente una clave para la entrada de traducción. En la sección Traducciones, el campo de idioma predeterminado contiene el texto introducido en el campo Valor de la sección Básico especificado anteriormente. Si se definieron otros idiomas en la configuración de tu app, debes completar cada campo con la traducción respectiva al idioma especificado. Si no completa una traducción para un idioma específico y selecciona ese idioma en las opciones del lienzo, la pestaña traducciones mostrará el texto en el idioma predeterminado con un icono de advertencia para informarle de que falta la traducción a ese idioma.
Una vez completadas las traducciones, haz clic en Crear. Las traducciones se añaden al diccionario para ser reutilizadas.
Sugerencia
Cada vez que hagas clic en el icono del mundo de un componente que ya tiene traducciones guardadas, Studio sugiere las traducciones almacenadas en el diccionario de traducción.
Para editar una traducción, puedes modificarla desde el panel izquierdo o derecho. Desde el panel izquierdo, dirígete a la pestaña de traducciones y haz clic en el icono maximize. Desde el panel derecho, dirígete a la pestaña Design; luego dirígete al campo Value en la sección Basic y haz clic en 
a la derecha del campo.
En ambos casos, se abre el modal Editar entrada, donde se puede modificar el texto de las traducciones, añadir las traducciones que falten y ver dónde se usa la traducción.
La pestaña Errors 
muestra una lista de errores de expresión encontrados en la pantalla que estás editando. Si hay un error en una expresión en el atributo Value de un componente (como un registro mal escrito o un signo de puntuación que falta al final de la expresión), la pestaña Errors muestra el nombre del componente que contiene el valor incorrecto. Mira un ejemplo en la siguiente imagen.
Sugerencia
Si se identifica un error, el sistema muestra una lista de sugerencias para ayudarle a introducir la expresión correcta.