Day 12 ¿Que entendiste del tema: Interfaces 103: Build Dynamic Interfaces?

Day 12 ¿Que entendiste del tema: Interfaces 103: Build Dynamic Interfaces?

  Discussion posts and replies are publicly visible

  • Buenas tardes, adjunto mi resumen y las actividades correspondientes.

    Day 12

    José Carlos Garduño Avila

  • Buenas tardes, adjunto mi resumen y las actividades correspondientes.

    Day 12

    José Carlos Garduño Avila

  • Resumen Interfaces 103 – Building Dynamic Interfaces 

    Orlando Sánchez Acuña 

    Modificar una plantilla usando variables locales 

    Las interfaces se pueden crear a partir de plantillas, las cuales tienen diferentes diseños y se puede hacer uso de local variables y rule inputs. Las variables locales son usadas para almacenar datos y mostrarlos en una interfaz. 

    Al utilizar la función a!save(), se pueden guardar los datos en una local variable como en un rule input. Además, en las variables locales se pueden usar consultas que obtengan datos de una base de datos, con la finalidad de mostrarlos en un formulario y evitar establecer valores como opciones. 

    Crear una lista dinámica 

    Una consulta devuelve varios datos, en ese sentido, se puede usar la función a!forEach(), de tal manera que se pueda recorrer un registro de datos, independientemente de la cantidad.

    Para crear una lista dinámica se deben seguir los siguientes pasos: 

    • Crear variables para almacenar los valores. 
    • Construir una sección de formulario para ingresar los nuevos datos. 
    • Crear un enlace dinámico que muestre y oculte la sección. 
    • Configurar los botones de agregar para añadir la actualización. 
    • Mostrar y ocultar los componentes de la interfaz cuando el usuario quiera agregar un nuevo registro. 

    Un type constructor es como una función, pero en lugar de modificar datos, brinda estructura a los datos, similar a un CDT. Esto permite recolectar los datos de los campos de un formulario en una variable local. 

    Editable Grid

    Una rejilla editable proporciona visualizar datos dinámicamente, además, el usuario puede interactuar con los datos haciendo uso de funcionalidades como actualizar, eliminar y agregar nuevos registros mediante enlaces dinámicos. 

    Reusing interfaces 

    Las interfaces se pueden usar en otras interfaces (gráficos, formularios, etc) como componentes, de esta manera se puede configurar y obtener un mejor rendimiento al crear una nueva interfaz. 

    PDF

    PDF

    PDF

  • Excelente Tarde

      

    Interfaces 3: Build Dynamic Interfaces  

    Aprendimos a configurar una variable local para poder realizar una consulta, mostrar y ocultar secciones de una interfaz, crear enlaces dinámicos con variables locales, usar la función a!save para insertar una nueva dirección en las listas de direcciones, así como utilizar la función a!forEach y poder realizar una lista de opciones dinámica.  

    La función a!forEach en Appian.   

    Usada para definir la estructura de cada línea de dirección como por ejemplo una matriz de datos que necesita recorrer una expresión ya que puede crear una fila para cada elemento de dirección. Los parámetros necesarios son:   

    • Los elementos   
    • Una expresión para recorrerlos 

    Se puede basar en las siguientes variables de función:  

    • fv!item (cualquier tipo) hace referencia al elemento actual.  
    • fv!index (Integer) se refiere a la posición del elemento en la matriz.  
    • fv!identifier (Any Type Array) hace referencia al identificador del elemento actual (si este elemento es un subconjunto de datos  
    • fv!isFirst (booleano): verdadero para el primer elemento de la matriz de elementos; de lo contrario, falso.  
    • fv!isLast (booleano): verdadero para el último elemento de la matriz de elementos; de lo contrario, falso.  
    • fv!itemCount (Integer) hace referencia al número total de elementos (incluidos los nulos).  

    También aprendí que append() se utiliza para agregar elementos a una lista existente y type! para hacer referencia a la estructura de datos dentro de una expresión  

    Evidencias 

  • José Castillo

    Resumen

    Es posible modificar detalles en la configuración de los componentes haciendo uso de las variables locales, estas almacenan valores que pueden ser utilizados para mostrar una u otra información dentro de las interfaces, por medio de consultas u otras formas de obtener información. Con ayuda de funciones se pueden guardar la información dentro de las variables locales en los rules inputs y así pasar la información a otro objeto en appian. 

    Las variables locales pueden ser usados para darle una mejor funcionalidad a la función forEach(), para permitir realizar listas dinámicas  en donde se muestren valores recorriendo un arreglo de datos. 

    Se usan vínculos dinámicos para permitir al usuario una interacción con las diferentes opciones que se desean mostrar, basadas en un clic sobre una imagen, un texto, etc. Comúnmente se hace uso de las vínculos de la siguiente manera: 

    • Crear la variable local que almacene los datos 
    • Construir la sección en donde se añadirán las cosas 
    • Crear un vínculo dinámico para mostrar u ocultar datos 
    • Configurar el botón de añadido 
    • Mostrar u ocultar los componentes agregados. 

    Para poder agregar valores en una lista con los botones, se usa la función append(), que permitirá guardar valores en una lista ya creada. Para añadir un link dinámico a un elemento en la interfaz se hace agregando la función a!dynamicLink(). 

    Una grilla editable permite el almacenar mucha información y que esta pueda ser alterada en cualquier momento de la ejecución de la aplicación, actualizar, eliminar y agregar nuevos datos. De la mismo forma que al usar una lista dinámica, en las grillas también se puede usar la función forEach(), para un recorrido de los datos mostrados. También está la posibilidad de usar la función Remove(), para eliminar elementos de la grilla o la función append(), para agregar elementos. 

    Existe la posibilidad de reutilizar interfaces ya creadas para facilitar el tiempo de diseño, evitar posibles errores, permitir una navegación más sencilla y reducir el código realizado en la interfaz. Es sencillo reutilizar las interfaces, se realiza mediante reglas. 

    Ejercicio

    PDF

  • Construir interfaces dinámicas:

    En este ejercicio nuestros botones de radio serán rellenados dinámicamente por los valores de las direcciones consultadas desde una base de datos.
    En este ejercicio, aprenderemos a utilizar la función de bucle a!forEach para aplicar una estructura específica a todas las direcciones consultadas. También aprenderemos a utilizar la función condicional if() para mostrar el campo de la unidad sólo si la información de la unidad está disponible. Configuraremos nuestro formulario para guardar la dirección seleccionada por el usuario en la entrada de la regla.

    a!forEach

    Evalúa una expresión para cada elemento de una lista y devuelve una nueva matriz de los resultados. Devuelve cualquier tipo de matriz.

    Editable Grids

    Las cuadrículas editables son una potente herramienta en Appian. Con ella, podrá construir tablas que los usuarios pueden editar directamente desde la interfaz. En este ejercicio, construiremos una cuadrícula que permitirá a los usuarios añadir y eliminar las filas de información simplemente  haciendo clic en el enlace Añadir nuevo elemento o en el botón rojo X de borrar.

    A continuación le adjunto mi evidencia.

    Elaborado por Pavel Gabriel Morales Montane

  • Hola

    Dentro de todo el contenido que muestra en esta sección habla sobre cómo construir interfaces dinámicas de manera correcta desde cero lo cual muestra diferentes aspectos a considerar a través del diseño de toda la aplicación. Otro aspecto del cual nos habla es de como modificar los templates a través de variables locales lo cual ayuda a poder almacenar datos de manera interna y que solo se pueden usar dentro de esa interfaz y lo podemos utilizar para poder probar las funcionalidades de los componentes con los que estemos trabajando en la aplicación. 

    Nos muestra como reconocer los componentes clave de una Grid Editable, así como también a poder identificar como agregar, actualizar o eliminar un elemento en una matriz de valores de un CDT. Otro aspecto importante que también nos menciona es a como adaptar una plantilla para poder usar sus propias estructuras de datos. 

    También nos habla de cómo crear listas dinámicas para poder usarlas dentro de los componentes como las listas desplegables y utilizar esos valores. Nos muestran también como poder crear links y secciones dinámicas donde podemos ocultar algunas secciones o componentes a través de estas opciones, lo cual resulta muy útil dentro de los formularios para poder ocultar información si es que no lo especifica al momento del llenado y demás funciones que se le pueden dar a esas opciones dentro del entorno de Appian. 

    Además, nos muestra cómo crear un Editable Grid para poder agregar componentes dentro del mismo y a su vez agregar las configuraciones necesarias para darle la funcionalidad que nosotros le especifiquemos, en esta sección nos desglosa mucha información sobre este componente el cual tiene grandes aplicaciones de uso y una gran opción dentro del desarrollo de Appian para una aplicación. También nos enseña nuevamente sobre la reutilización de interfaces donde tiene grandes ventajas para los desarrolladores que pueden obtener diseños hechos anteriormente y los cuales son utilizables para una nueva app. 

    PDF

    PDF

    PDF

    Jordi Brayan Vicente Moreno