Cómo crear un módulo e invocar un componente configurable en tu app

Después de crear un módulo, debes seguir varios pasos para poder invocar y usar su contenido desde una app o módulo padre. Estos pasos involucran entidades que deben configurarse de antemano y que necesitarás cuando configures las interfaces del módulo. La decisión de si necesitas crear estas entidades o utilizar las existentes depende de las características del módulo que necesitas crear y el propósito que cumplirá. Para obtener más información sobre cuándo debes crear un módulo, lee Módulos.

Sigue los pasos a continuación para invocar y utilizar el contenido de un módulo.

Crea el módulo.
Define la plantilla o plantillas de diseño de la app que se aplicarán a las vistas de las pantallas del módulo.
Define la vista o vistas que se utilizarán en las pantallas de la app.
Nota
Las apps móviles generalmente contienen una vista que hace referencia a todo el contenido de la pantalla.
Crea la pantalla o pantallas donde se diseñarán las interfaces del módulo.
Crea la interfaz o interfaces del módulo, dependiendo de las pantallas previamente creadas.
Vincula el módulo a la app o módulo padre desde donde quieres invocar sus interfaces.
Invoca la interfaz o interfaces desde la app o módulo padre.

El siguiente caso de uso implica la creación de un módulo con un componente que muestra un error genérico en la app. Además, configurarás que, cuando el usuario cierre el mensaje de error, se cierre la sesión y se redirija al usuario a la pantalla de Login.

En este caso, debes construir un módulo y hacer uso de sus capacidades reutilizables por dos razones: por un lado, necesitas aplicarlo en varias pantallas de la app, por lo que lo correcto sería utilizar un componente configurable y evitar crear un componente por pantalla; por otro lado, al ser un error genérico, se puede reutilizar en cualquier otra app o módulo. Las siguientes secciones explican cómo realizar cada uno de los pasos especificados anteriormente.

El primer paso implica crear los errores del módulo. Los módulos son unidades de configuración que se pueden instanciar a través de sus interfaces en una app u otro módulo, que se denomina app o módulo padre. Tienen las mismas funcionalidades que una app, pero no se pueden publicar. Para obtener más información sobre los módulos, lee Módulos.

Sigue las instrucciones a continuación para crear un módulo.

Inicia sesión en Studio utilizando tus credenciales de nombre de usuario y contraseña.
Studio se abre en la página Apps & Modules. Haz clic en Modules para abrir la pestaña.
Haz clic en + Create module. Se abre la página Create Module, donde tienes que completar tres pestañas: Basic, Errors y Dependencies. Para este ejemplo, solo configurarás la pestaña Basic. Para obtener más información sobre todas las pestañas y cómo completar todos los campos disponibles, lea Crea o edita un módulo.
Dirígete a la pestaña Basic y completa la configuración básica del módulo.
Nota
El nombre del módulo debe ser único. Si el nombre que ingresaste ya existe, no podrás crear el módulo.
1. Basic Info
  1. Dirígete al campo Module's name e ingresa Errors Module.
  2. Dirígete al campo Short description y especifica el contenido del módulo. Para este ejemplo, ingresaModule that contains interfaces related to components that appear whenever an error occurs in the app.
  3. Dirígete al campo Type y deje seleccionada la opción Universal.
    Importante
    Este campo funciona como en el caso de las apps. Si elijes Universal, cuando configures una pantalla, el editor de pantallas mostrará las opciones del dispositivo. Si elijes Web, muestra las opciones de breakpoints. Lee Screens Editor Navigation para más información.
  4. Dirígete al campo Design y deja la opción Mobile First seleccionada para definir que el diseño del módulo priorice la vista móvil.
2. Theme info. En esta sección, haz clic en el campo x para eliminar el tema aplicado de forma predeterminada. Ahora, el módulo heredará el tema aplicado a la app o módulo principal cuando se invoque. Para obtener más información sobre la herencia de errores, lee Crea o edita un módulo.
3. Languages. En esta sección, selecciona los botones de opción English y Español.
Haz clic en Confirm & create para guardar los ajustes del nuevo módulo.
Serás redirigido a la página Apps and Modules, y un mensaje de confirmación indicará que el módulo se creó correctamente. Haz clic en la pestaña Modules y, a continuación, haz clic en la tarjeta del módulo creado para comenzar a trabajar en él.

El segundo paso implica definir la plantilla de diseño de app que se utilizará en las vistas del módulo Error moduleque creaste previamente. Las plantillas de diseño de app definen cómo se distribuyen los elementos de tu app en áreas visuales o dentro de una pantalla, adaptándose al tamaño del dispositivo. Cada nueva app o módulo contiene un conjunto de plantillas de diseño de app predeterminadas (Global Design > App layout templates) que puedes utilizar en las vistas de la app o módulo. Además, puedes crear o importar plantillas.

Para este ejemplo, el módulo que creaste, y por lo tanto, su contenido, se utilizará en una app móvil. Como consecuencia, la única plantilla de diseño que necesitas es la plantilla C1 (Content), que es una de las plantillas predeterminadas disponibles (como se muestra en la imagen animada a continuación). Por lo tanto, no necesitarás crear una nueva plantilla de diseño. Para obtener más información sobre estas plantillas, lee Plantillas de diseño de app.

Las vistas representan el espacio visual donde se incluirán las pantallas de la app. Cada vista puede tener un diseño o área visual específica, que es el espacio visual donde se creará el contenido de la pantalla. Las vistas deben crearse primero para crear y configurar el contenido de las pantallas de la app.

Sigue las instrucciones a continuación para crear la vista.

En el Overview, dirígete a Branch Edition > Views.
Haz clic + New site view.
Una vez que se abra la página Views, complete los campos como se especifica a continuación.
Nota
El campo Site contiene el nombre del módulo en el que se está creando la vista. Este campo no se puede editar.
1. Dirígete al campo Vista e ingresa V00.
2. Dirígete al campo Theme y deja la opción No Theme seleccionada.
3. Dirígete al campo Description e ingresa View that represents the content of the whole screen.
4. Dirígete al campo Design y deja seleccionada la opción Contents 1 (C1). Como se menciona en la secciónDefine la plantilla de diseño de app, aplica el diseño Contents esta vista.
5. Haz clic enSavepara crear la vista y ser redirigido a la página Views.

En este paso deberás crear la pantalla donde configurarás el componente o flujo de pantallas que pasará a formar parte de la vista de contenedor en la configuración de la interfaz del módulo. En este ejemplo, crearás una pantalla para configurar el componente que pasará a formar parte de la interfaz de tipo componente.

Lee las instrucciones a continuación para crear la pantalla del módulo. Para obtener más información sobre cómo utilizar el editor de pantallas con un caso de uso, lee Flex Container.

Ir al Overview.
Haz clic enScreenspara abrir la página Screens.
Haz clic en+ New screen para crear la pantalla y accede al editor de pantallas.
Haz clic en Settingsen el panel izquierdo.
1. En el campo Sequence, ingresa S022.
2. En el campo de nombre, ingresa Error dialog.
Haz clic enTreeview en el panel izquierdo y luego haz clic en el ícono de maximizar para ocultar el canvas y los componentes en la vista de árbol como se especifica a continuación.
1. Agrega un componente Flex Container al componente Panel que aparece de forma predeterminada.
2. Dirígete al panel derecho y cambia su atributo Name a Flx_Main. Luego, agrega los dos siguientes componentes al componente Flx_Main:
  1. Agrega un componente Text Label y cambia su atributo Name a TxtLbl_Title en el panel derecho.
  2. Agrega un segundo componente Text Label y cambie su atributo Name a TxtLbl_Description en el panel derecho.
3. Agrega un Flex Container secundario al flex container padre.
4. Dirígete al panel derecho y cambia su atributo Name a Flx_ButtonContainer. Luego, agrega el siguiente componente al Flx_ButtonContainer:
  1. Agrega un componente Button y cambia su atributo Name Btn_Main en el panel derecho.
5. Ahora, configura cada uno de los componentes como se especifica a continuación.
Componente flex container Flx_Main
1. Dirígete a la vista de árbol y selecciona el componente Flx_Main.
2. Dirígete al panel derecho y luego a la sección de tamaño y posición. En el campo W (ancho) ingresa 100 y en el campo H ingresa 100. Luego, haz clic en el menú de unidad de medida y selecciona % para ambos campos.
3. Dirígete a la sección Layout. En la subsección Direction, haz clic en Column. En la subsección Align, selecciona center. En la subsección Justify, selecciona start y en la sección Chidren, selecciona Don't wrap.
Componente text label TxtLbl_Title
1. Dirígete a la vista de árbol y selecciona el componente TxtLbl_Title.
2. Dirígete al panel derecho, que se abre en la pestaña Design, y luego a la sección de tamaño y posición. En el campo X ingresa 0 y selecciona el en unidad; en el campo Y ingresa 0 y selecciona el Rh unidad. En el campo H, ingresa 4y selecciona Rh como unidad de medida.
3. Dirígete a la sección Basic. En el campo Value, ingresa #S{1504}. Esta sintaxis representa el registro que se definirá en la interfaz, de modo que, cuando se ingrese un valor en este campo, éste se almacenará en este registro.
4. Dirígete a la sección Size & Position. En el campo Position Type, haz clic en la flecha y selecciona relative desde el menú desplegable.
5. Ve a la sección Text. En el campo Font Size, ingresa 3rh.
Componente text label TxtLbl_Description
1. Dirígete a la vista de árbol y selecciona el componente TxtLbl_Description.
2. Dirígete al panel derecho, que se abre en la pestaña Design, y luego a la sección de tamaño y posición. En el campo X ingresa 0 y selecciona la unidad rw; en el campo Y ingresa 0 y selecciona la unidad Rh . En el campo H, ingresa 4y selecciona Rh como unidad de medida.
3. Dirígete a la sección Spacing. En el margen superior, escribe 18 y dejar la unidad de medida px definida.
4. Dirígete a la sección Basic. En el campo Value, ingresa #S{1505}. Esta sintaxis representa el registro que se definirá en la interfaz, de modo que, cuando se ingrese un valor en este campo, éste se almacenará en este registro.
5. Dirígete a la sección Size & Position. En el campo Position Type, haz clic en la flecha y selecciona relative desde el menú desplegable.
6. Ve a la sección Text. En el campo Font Size, ingresa 2rh.
Componente flex container Flx_ButtonContainer
1. Dirígete a la vista de árbol y selecciona el componente Flx_ButtonContainer.
2. Dirígete al panel derecho y luego a la sección de tamaño y posición. En el campo W (ancho) ingresa 100 y selecciona % como unidad de medida.
3. Dirígete a la sección Spacing. En el margen superior, escribe 8 y deja la unidad de medida px definida.
4. Dirígete a la sección Layout. En la subsección Direction, haz clic en Row. En la subsección Align, selecciona stretch. En la subsección Justify, selecciona end y en la sección Children, selecciona Don´t wrap.
Componente button Btn_Main
1. Dirígete a la vista de árbol y selecciona el componente Btn_Main.
2. Dirígete al panel derecho, que se abre en la pestaña Design, y luego a la sección de tamaño y posición. En el campo W ingresa 100 y en el campo H ingresa 40. Luego, selecciona px para ambos como unidad de medida.
3. Dirígete a la sección Basic. En el campo Value, ingresa #S{1506}. Esta sintaxis representa el registro que se definirá en la interfaz, de modo que, cuando se ingrese un valor en este campo, éste se almacenará en este registro.
4. Dirígete a la sección Size & Position. En el campo Position Type, haz clic en la flecha y selecciona relative desde el menú desplegable.
5. Ve a la sección Text. En el campo Color introduce el código hexagonal #c44747. En el campo Font Size, ingresa 2rh.
6. Haz clic en Actions para abrir la pestaña y luego ir a la sección Events & Actions.
7. En el atributo OnClick, haz clic en el ícono de tres puntos verticales. Se abre el modal Create New Link, donde puedes invocar el conjunto de mensajes de la interfaz de pantalla, que te permitirá configurar una acción para que ocurra cuando el usuario haga clic en la etiqueta Ready to start. Lee las instrucciones a continuación para aprender cómo invocar el mensaje.
  En el menú desplegable Select link in type, haz clic en la flecha y selecciona Interface Message.
  En el campo Select message, haz clic en la flecha y selecciona Error_Component@Componente_error: BUTTONCLICKED.
  Importante
  Podrás configurar este evento después de crear la interfaz y definir el parámetro Message.

Una vez configurados todos los componentes, ve a las opciones de guardado (icono de disquete), haz clic en la flecha y haz clic en Save and close. En el modal Commit Message que se abre, ingresa New error component created. en el campo Description. A continuación, haz clic en Save and close. Haz clic en Close nuevamente en el mensaje de confirmación para ser redirigido a la página Screens.

En el quinto paso debes crear la interfaz requerida según el componente que quieras reutilizar o conectar con la app o módulo padre. Como resultado, es necesario crear una interfaz de tipo componente. Para obtener más información sobre las interfaces, lee Crea o edita una interfaz.

Lee las instrucciones a continuación para crear la interfaz de tipo de componente para el componente de error.

Dirígete al Overview del módulo.
Haz clic en Interfaces para abrir la página de interfaces.
Haz clic + New interface.
Se abre el modal New Interface Configuration. Dirígete al campo Functionality Name e ingresa el nombre Error_Component.
Ve al campo Functionality Name. Haz clic en la flecha y selecciona una opción:
Dirígete al campo Description e ingresa Reusable component for error messages purposes. It contains a title, a description and a Close button..
Luego, ve a la sección Parameters. Para este ejemplo, completará los datos en las pestañas General, Input y Message. A continuación encontrarás más información sobre estas secciones.
General
La pestaña General aparece abierta de manera predeterminada. Para este ejemplo, solo completará el campo Container View. En este caso, no es necesario configurar un proceso y los campos de tamaño permanecen vacíos ya que necesitas hacer que el componente tenga tamaño automático, es decir, que se adapte al tamaño del componente que lo contiene en la app principal.
Dirígete al campo Container View. Haz clic en la flecha y selecciona V00|contents1:S022 - Diálogo de error.
Input
Haz clic en Input para abrir la pestaña. En esta pestaña, ingresa los parámetros que requiere la interfaz para funcionar en la app o módulo padre. Para una interfaz de tipo componente, una vez invocados, los parámetros aparecerán como atributos en la sección Basic Input del panel derecho (pestaña Design).
Luego, completa los campos como se explica a continuación.
Haz clic + Add Parameter para agregar el primer parámetro. Complétalo como se explica a continuación.
En el campo New key, ingresa ERROR.
En el campo Name, ingresa Error
En el campo Internal register, ingresa 1504, de modo que este registro almacene el valor definido para el parámetro Error. Luego, al invocar el registro, el valor almacenado aparecerá en pantalla.
En el campo Type, deja seleccionada la opción Text.
En el campo Default, ingresa Error.
Haz clic + Add Parameter para agregar el segundo parámetro. Completalos como se explica a continuación.
En el campo New key, ingresa DESCRIPTION.
En el campo Name, ingresa Description
En el campo Internal register, ingresa 1505.
En el campo Type, deja seleccionada la opción Text.
En el campo Default, ingresa Something went wrong.
Haz clic en + Add Parameter para agregar el tercer parámetro. Complétalo como se explica a continuación.
En el campo New key, ingresa BUTTONTEXT.
En el campo Name, ingresa Button Text
En el campo Internal register, ingresa 1506.
En el campo Type, deja seleccionada la opción Text.
En el campo Default, ingresa OK.
Mensaje
Haz clic Message para abrir la pestaña. Luego, completa los campos como se explica a continuación.
Haz clic + Add Parameter para agregar el tercer parámetro. Completalo como se explica a continuación.
En el campo Key, ingresa BUTTONCLICKED.
En el campo Name, ingresa BUTTONCLICKED.
Después de completar los parámetros, haz clic en Confirm para guardar la interfaz. Luego, dirígete al Overview.

En el sexto paso deberás vincular el módulo Errors Module a la app GoldBank. Para vincularlo, debes habilitar el módulo como dependencia de la app. Habilitar dependencias te permitirá utilizar el contenido del módulo en el editor de pantallas para la app seleccionada. Para obtener más información sobre las dependencias, lee Settings.

Lee las instrucciones a continuación para vincular el módulo Errors Module a la app.

En el Overview, haz clic en Apps & Modules.
Encuentra la appGoldBanky haz clic en la tarjeta de la app.
En el Overview de la app, haz clic en Settings (Overview > Settings).
Haz clic enDependencies para abrir la pestaña.
Encuentra el móduloErrors Module y haz clic en el interruptor para vincularlo a la app GoldBank.
Haz clic en Save & Close para guardar los cambios y ser redirigido al Overview.

En el séptimo y último paso, debes invocar la interfaz. Al invocar la interfaz podrás utilizar el contenido de la interfaz en la pantalla de la app GoldBank. Para invocar la interfaz, debes estar trabajando en el editor de pantallas de la app o módulo padre.

Lee las instrucciones a continuación para invocar la interfaz del componente de error desde la pantalla de inicio de la app. Para este caso de uso, considera el siguiente escenario: para la pantalla de inicio, existen diferentes transacciones previamente definidas que validan que todas las funciones disponibles en la pantalla funcionen correctamente; estas transacciones validan la información a través de diferentes procesos.

Estas instrucciones se aplican a cualquier otra pantalla donde necesites invocar la misma interfaz.

Nota

Lee Invoca una interfaz de tipo componente e Invoca una interfaz de tipo pantalla para aprender cómo invocar ambos tipos de interfaces y los pasos que incluye cada procedimiento.

En el Overview, haz clic en Screens. Encuentra la pantallaApp Homey haz clic enDesign o haz doble clic en la tarjeta de la pantalla.
Nota
También puedes acceder a las pantallas de la app en Branch Edition > Screens.
Una vez que se abra el editor de pantallas, dirígete al panel izquierdo. Haz clic enComponents . La pestaña Components contiene todos los componentes disponibles en Studio, así como las interfaces de tipo componente que se mostrarán como componentes separados.Componentes
Desplázate hasta el final de la lista y busca el móduloErros module. Contiene la interfaz de tipo componente denominada Error_Component, que se muestra como un componente.
Arrastra y suelta el componente Error_Component al canvas.
Dirígete al panel derecho. Cambia el nombre a Error dialog.
Configura el atributo X con 0 y el atributo Y con 30 y deja la unidad % seleccionada. En el atributo W, ingresa 100 y en el atributo H ingresa 30y selecciona la unidad de medida % para ambos atributos. Ahora, toda la información del componente reutilizado se puede visualizar en el lienzo.
Dirígete a la sección Basic. En el atributo Visible, ingresa la expresión #S{7000}. Este registro fue configurado previamente en el proceso lambda que valida la función Customer Service.
Dirígete a la sección Basic Inputs. Deja el atributo Error como está definido por defecto. En el atributo Description, ingresa There was an error in the app. Your session will be closed.. En el atributo Button Text, ingresa Close.
Haz clic en Actions para abrir la pestaña e ir a la sección Events & Actions. En el atributo BUTTONCLICKED, haz clic en el ícono de tres puntos verticales. Se abre el modal Crear nuevo enlace, donde configuras el mensaje de la interfaz como se explica a continuación.
1. En el menú desplegable Select link type, haz clic en la flecha y selecciona Ver.
2. En el campo Select View, haz clic en la flecha y selecciona V00.
3. En la sección Visual Areas, haz clic en la flecha y selecciona S045 - Login Forgot Password-m.
4. Haz clic Accept. Ahora, cuando el usuario hace clic en el botón Close definido en la interfaz de pantalla, la interfaz invoca el mensaje definido y, por lo tanto, la app mostrará la pantalla especificada (que hace referencia a la pantalla de inicio de sesión).
Ahora, hay que definir que cuando el usuario haga clic en la etiqueta Customer Service, el sistema valide si el servicio está disponible, y, si no lo está, aparezca en pantalla el error configurado en la interfaz. Vaya a la vista de árbol en el panel izquierdo. Encuentra el txtServicioAlCliente componente y haz clic en él para seleccionarlo en el canvas.
Dirígete al panel derecho. Luego, haz clic Actions para abrir la pestaña.
Vaya a la sección Events & Actions. En el atributo On Click, haz clic en el ícono de tres puntos verticales. Se abre el modal Create New link, donde puedes configurar el mensaje de la interfaz como se explica a continuación.
1. En el menu Select link type, haz click en la flecha y selecciona Lambda.
2. En el menú que aparece, haz clic en la flecha y selecciona CUSTOMER_SERVICE_AVAILABILITY-.
3. Haz clic en Accept. Ahora, cuando se haga clic en Customer Service, se ejecutará el proceso lambda.

Veritran Docs

Cómo crear un módulo e invocar un componente configurable en tu app

Nota

Nota

Importante

Nota

Importante

Nota

Nota