Day 11: ¿Que entendiste de: Interfaces 102: Build Interfaces Using an Expression?
Discussion posts and replies are publicly visible
Marco Antonio Flores F.
Marco Polo, en las lecciones de hoy se abordaron temas como Plantillas de Interfaz y Modo de Expresión, explica que en Appian hay una serie de plantillas por default que ayudan a facilitar y agilizar el desarrollo de nuestra aplicación. Primero seleccionamos la plantilla y posteriormente seleccionamos los componentes que usaremos en nuestra interfaz.
Por otro lado explica que con el Modo Expresión nos permite construir o modificar insterfaces, en Appian es mas ágil y recomendable utilizar la combinación de modo de diseño y arrastrar y soltar elementos ya que estos se pueden hacer dinámicos en el modo de expresión.
Tanto las Plantillas de Interfaz y el Modo Expresión nos permiten trabajar a corde a el estilo que deseemos dar a cada una de las interfaces de nuestra aplicación, el Modo de Expresión proporciona un lienzo de expresión vacío y ahí podemos definir nuestros diseños y componentes, mientras que desde las interfaces solo nos la proporciona de lectura como tipo resumen de registro o algún tipo de informe.
Se hace la recomendación de que creemos nuestras interfaces con el Modo de Diseño ya que ayuda a ahorrar tiempo y posterior a eso usar el Modo Expresión para la configuración de nuestras funciones dinámicas avanzadas.
Se hace mención de 3 elementos principales por así decirlo:
Se mencionan un componente muy importante a mi parecer, "Variables Locales":
Se menciona que e desde la versión de Appain 19 se cuenta con la función de poder actualizar variables locales de manera automática.
Hola aliciam0003
adjunto resumen día 11 - Interfaces 102: Build Interfaces using an Expression
– Jesús Alberto Guzmán Cruz
Interfaces 102
Bueno, en este tema trata sobre cómo crear interfaces, insertar campos, mediante el uso de expresiones y como aprovechar las variables locales y su utilidad para construir componentes de interfaces muy dinámicos como cuadriculas editables, a diferencia del modo diseñador que solo arrastras y sueltas, este se enfoca más a las líneas de código.
Los tipos de interfaz como el registro o el informe no requieren un diseño de formulario, sino que usan llaves para indicar que proporcionaremos una lista de componentes
Se debe respetar la sintaxis, que es donde identifica cada parámetro de función como una palabra clave antes de proporcionar valor, debido que por falta de una coma puede salir un error, se recomienda dar formato al código para que se ordene automáticamente y sea mucho mejor de leer por otros desarrolladores.
Aprendí a configurar utilizando el modo de expresión, los campos de texto, botones de radio, botón de envió y configurar variables locales que almacenan datos y pasarlos a las reglas de entrada.
PDF_
Buen día
Comparto Resumen, elaborado por Ana Karen Garcia Braulio.
Tema: -Interfaces 102-
Este módulo esta basado en la crear una interfaz sin usar el drag and drop en el Design Mode.En las expresiones de código son muy útiles las variables locales para realizar distintas acciones. Las funciones principales de una variable local son: 1. Eliminar arrays 2. Agregar arrays 3. Actualizar arrays
Modo Expresión nos permite construir o modificar interfaces, en Appian es mas ágil y recomendable utilizar la combinación de modo de diseño y arrastrar y soltar elementos ya que estos se pueden hacer dinámicos en el modo de expresión.
Uno de los componentes más usados son los formularios, llamando a la función a!formLayout(), que presentan diversos elementos, además de presentar 3 parámetros principales:
Label: nombre que se mostrará en la interfaz para el formulario.Contents: todos los elementos contenidos en el formulario, a más de uno se separan por comas. Buttons: son los botones que se muestran en el formulario.
Las variables locales pueden ser usados para almacenar datos de una consulta y estos sean mostrados en una interfaz.
En las actualizaciones de variables pueden ser usados para:
-Desconectar -Establecer una actualización continua-Establecer temporizadores -Ver otras variables
Quedo pendiente para cualquier duda o comentario.
PDFTania Luis
Conceptos básicos
Hay dos modos para construir la interfaz objetos:
En el modo de expresión se puede localizar en componente en la expresión al hacer clic dentro del componente, dentro de este modo también se puede contraer y expandir parte de la expresión. Esto sirve para visualizar mucho mas fácil la estructura de alto nivel de la interfaz: un diseño de formulario con una etiqueta, algunos contenidos y algunos botones.
Cuando una interfaz tiene un error se mostrara un banner grande en la parte superior de la pantalla, estos banner a menudo contienen instructivos de texto de la ubicación del error en la expresión.
Las variables locales definidas al principio de una expresión servirán para hacer referencia a ellas en toda la expresión. Mientras que al utilizar variables locales en medio de la expresión solo servirán para hacer uso de estas en es función en especifico.
Para utilizar variables locales usamos la función a!localVariables() la cual debe de estar por fuera de toda la expresión para que se puedan utilizar en cualquier lugar de toda la expresión. Todas las variables locales deben utilizar el prefijo local! y el nombre o para lo que nos servirá esta variable, se puede inicializar una variable o solamente dejarla en blanco poniendo una coma enseguida del nombre.
La función a!forEach() toma dos parámetros, el primero es una lista de elementos y el segundo es una expresión que desea ejecutarse en cada uno de los elementos.
Variables de función
Son variables especiales solo disponibles dentro de ciertas funciones. Para ver que variables se encuentran disponibles dentro una función se utiliza el prefijo fv!, por ejemplo para a!forEach() algunos de estos son:
Vínculos dinámicos
EL uso de los enlaces dinámicos sirve para crear interfaces mas interactivas ya que convierten textos, iconos, sellos, tarjetas y otros componentes en elementos dinámicos que se pueden utilizar para mostrar, ocultar o modificar condicionalmente otros componentes de una interfaz.
Appian admite muchos diferentes tipos de enlaces, enlaces que llevan al usuario a un registro, a una URL externa o para iniciar un proceso entre otros:
La función a!dynamicLink() tiene cuatro parametros: equiteta, la condicion de en que momento se mostrara, el valor que se especifica que se guarde en el enlace y saveInto que especifica que variable o entrada de regla guarda el valor.
La función and() toma una lista de instrucciones lógicas y devuelve TRUE solo cuando todas las declaraciones evalúan a TRUE, de lo contrario, devuelve FALSE.
La función or() devuelve TRUE si cualquiera de las declaraciones evalúan al verdadero, y falso solo cuando todas las declaraciones se evalúan como falsas.
Cuadriculas editables
La función append() se utiliza para agregar elementos al final de una lista, la cual se pasa como la primera y el elemento que se va a anexar a la lista se pasa como el segundo.
La función remove() toma un registro de la lista como su primer parámetro y para su segundo lugar el índice del elemento que se va a eliminar.
La función choose() toma un entero como su primer parámetro (key) y devolverá el resultado de uno en el parámetro posterior el cual esta basado en esa clave.
En Appian los botones actúan de la misma manera que los enlaces dinámicos, pueden tener un parámetro de valor y un parámetro saveInto. Sin embargo, en algunas circunstancias es posible que un boton guarde varios valores, para esto el comando saveInto puede tomar no un solo solo parametro, entrada, variable o regla, pero en su lugar, guarda una lista de funciones a!save.
Repasando lo básico sobre la creación de interfaces la Interface Design Object.cuenta con dos tipos de modos Design Mode y Expression Mode. Además Design Mode cuenta con las secciones: Palette, Live View, Configuration Pane, Local variable y Rule Inputs Pane.
Nota: Las variables locales sólo pueden ser creadas en el Expression Mode y son parte indispensable para crear interfaces dinámicas
Expression Mode
Cuando estamos utilizando este modo podemos seleccionar el componente en pantalla para que la parte donde se muestra la expresión se recorra y señale el componente que deseamos modificar. Además podemos expandir o colapsar las líneas de código para visualizar solamente el código en el que estemos interesados de momento. Todas las configuraciones se pueden ajustar desde este modo ya que en el panel de configuración estamos haciendo lo mismo pero de manera automatizada. Si existe algún error el Live View nos avisará.
Variables locales
Para usar variables locales siempre hay que rodear la expresión completa con “a!localVariables” y las variables locales se declaran con “local!nombredevariable”. Para inicializar variables locales se usa “:”. Es una buena práctica crear nuestros query como una Expression Rule y solo mandarla a llamar. Debes dar click en test para que se cargue información que acabas de poner a partir de una expression rule.
Para crear por ejemplo una tarjeta para cada elemento del arreglo usamos la expresión “a!forEach”. Las “fv!” son variables especiales solo disponibles en ciertas funciones.
Dinamyc Links
Estos enlaces permiten que otros componentes se vuelvan elementos dinámicos que pueden ser usados para mostrar de manera condicional, ocultar o alterar otros componentes de una interfaz.
Para crear un link dinámico se utiliza ”a!dynamicLink” el cual tiene cuatro parámetros.
Editable Grid
Se utilizan para que el usuario pueda capturar datos y necesitamos usar “a!gridLayout” para mostrarlas; debemos configurar el parámetro “headerCells” o causará un error cada header es representado por la función “a!gridLayoutHeaderCell”. Las Editable Grids se configuran para que muestran lo que nosotros deseamos, es decir nosotros configuramos todo su comportamiento.
Interface pattern
Podemos crear un Wizard esto permitirá al usuario pasar por una serie de pasos antes de enviar un formulario, divide el formulario en pasos. Dentro de los patterns podemos encontrar ya definidos ciertos elementos que nos harán más fácil la creación de nuestro wizard.
Nota: El scope nos dice en que partes puede ser referenciada una variable
La función “a!save” nos permite guardar múltiples variables al mismo tiempo. Esta función se usa en conjunto con sí misma dentro de una lista, para salvar múltiples variables dentro de un solo “saveInto”. Cuando se ejecuta la función “a!save” el valor definido en ella se guardará en el target especificado.
Nos enseña cómo sería desarrollar interfaces en un entorno controlado que simula Sprints. Y nos da tareas a completar. Es una práctica de lo que vimos en las otras secciones de interfaces. Además integra conocimientos generales sobre Appian.
¿Qué es UX (User Experience) Design?
Un buen diseño de experiencia de usuario hace que la aplicación sea de mejor calidad. El diseño de UX debe priorizar que el usuario pueda realizar sus tareas de forma eficiente y rápida.
Una interfaz debe tener como prerrequisito para poder aplicar diseño UX sel ser:
Funcional: Provee lo que los usuarios quieren y no tiene errores.
Los principios en los que debemos basarnos para diseñar UX son:
Con el UX podemos lograr que las personas disfruten trabajando en nuestra aplicación. Además como la funcionalidad es parte de un buen diseño UX, las aplicaciones serán funcionales.
Planeación de UX Design
Debemos pensar con calma y adecuadamente cuáles serán los componentes de nuestra interfaz antes de empezar a crear, para que se ajusten a nuestros objetivos.
Para lograr lo anterior podemos dividir la planeación en cuatro pasos,
Entender a nuestros usuarios: Necesitamos entender quién usará nuestra aplicación y que necesita de ella. Debemos entrevistar a cada uno de los roles que utilizaran la aplicación para saber con mayor detalle sus objetivos, necesidades, etc.
Sketch: Antes de crear la interfaz debemos tener un concepto de ella, como lucirá, como interactúan los usuarios con ella. Y con el concepto en mente podemos crear un bosquejo de la aplicación.
Diseñar: Debemos siempre mostrar la cantidad adecuada de información, es decir que tenemos que tener siempre disponible y al alcance del usuario los controles para poder completar sus tareas. Debemos procurar no crear pasos innecesarios o cosas que distraigan al usuario.
Probar: En esta fase nos aseguramos si las interfaces creadas cumplen con las necesidades y expectativas de nuestros usuarios.
Layouts y Componentes
Podemos crear interfaces con layouts y componentes por lo cúal es importante conocer cómo utilizarlas.
Mejores prácticas
Dependiendo de para que se va usar y que componente es, es mejor usar ciertas configuraciones sobre otras.
Field Properties:
Jesús Reyes Hernández
Interfaces 102: Building Dynamic Interfaces
Hay dos modos para crear objetos de interfaz, el modo de diseño y el modo de expresión.
En el modo de diseño, se encuentra una paleta de componentes de interfaz que se pueden agregar a una interfaz simplemente arrastrando y soltando.
Encima del panel de configuración se encuentra el panel Variables locales.
La vista en vivo en el centro de la pantalla actúa como una herramienta de vista previa y edición.
Al cambiar a la pestaña Vista previa, se eliminan las opciones para configurar o eliminar componentes directamente.
Al cambiar al modo Expresión, se oculta la paleta Componentes y panel de configuración y en su lugar muestra la expresión de la interfaz.
Se puede utilizar la función de resaltado y la capacidad de contraer y expandir partes de la expresión para facilitar la comprensión de la estructura de alto nivel de la interfaz.
La vista en vivo de la interfaz y el panel de configuración del componente son representaciones visuales de la expresión de definición de la interfaz.
Utilizaremos variables locales para almacenar los datos
Crearemos una variable local llamada "paquetes bancarios" para almacenar los registros de los paquetes. También llamaremos a una regla de expresión llamada "CC obtener paquetes de comida" para obtener los registros de los paquetes. Definir la consulta fuera de la interfaz nos permite reutilizarla en otras partes de la aplicación si es necesario.
Utilizaremos la función "a!forEach" para iterar sobre la lista de paquetes y aplicar la plantilla de tarjeta a cada uno.
Sintaxis:
a!forEach(
items: una matriz que contiene los elementos para iterar sobre expresiones.
expressions: una expresión que se evaluara para cada elemento de la matriz.
)
Variables de función:
Puede ocurrir un error si un paquete no tiene una imagen especificada. Para manejar este caso, utilizaremos la función "if" para mostrar una imagen de muestra cuando falte la imagen del paquete. La función "if" tiene tres parámetros: la condición, el valor a devolver si la condición es verdadera y el valor a devolver si la condición es falsa.
Los enlaces dinámicos se utilizan para registrar las selecciones del usuario y anidar e interactuar dentro de otra interfaz. Los enlaces dinámicos convierten texto enriquecido estático, íconos, sellos, tarjetas y otros componentes en elementos dinámicos que se pueden usar para mostrar, ocultar o modificar condicionalmente otros componentes en una interfaz.
a!dynamicLink()
parámetros:
Para crear un cuadricula editable se comienza creando una variable local para almacenar los artículos agregados por los usuarios. Se utiliza un tipo de registro para contener los elementos de menú adicionales. Se configuran los encabezados de las columnas en la cuadrícula y se agregan más columnas Se configura la última columna para incluir un enlace que permita eliminar elementos de la lista. Se definen los datos de cada fila de la cuadrícula.
Para implementar el patrón de diseño “wizard type form”, puedes arrastrar y soltar el patrón de barra de hitos desde la pestaña "Patrones" en la paleta de diseño. Este patrón crea una plantilla de asistente con pestañas, tarjetas para indicar el progreso del usuario, contenido para cada paso y botones para avanzar o retroceder. Puedes personalizar los pasos y su contenido según tus necesidades. La expresión del asistente se estructura dentro de una función de variables locales y utiliza variables locales para controlar el progreso y los pasos del asistente. Además, se utiliza una función de selección para mostrar el contenido correspondiente al paso actual del usuario.
UX Desing and Appian
Un buen diseño de UX mejora la probabilidad de éxito de una aplicación, medida en términos de productividad y satisfacción de los usuarios.
Las decisiones de diseño deben enfocarse en maximizar la capacidad de los usuarios para realizar su trabajo de manera rápida y eficiente.
En Appian, los usuarios interactúan con diferentes interfaces, como formularios y informes, para realizar su trabajo y obtener información agregada sobre indicadores clave de rendimiento.
Para crear una experiencia significativa y productiva, la interfaz debe ser funcional, eficiente, intuitiva y atractiva visualmente.
Aunque puede parecer que la experiencia de usuario es una tarea adicional, es importante considerarla, ya que los usuarios necesitan poder lograr sus objetivos de manera rápida y eficiente.
Una interfaz insatisfactoria puede ralentizar el trabajo de los usuarios y afectar su apoyo a la aplicación.
La planificación y prueba de UX se pueden realizar rápidamente con herramientas de baja fidelidad como papel y pizarra.
Es más costoso realizar cambios en el diseño de UX más adelante cuando la aplicación ya está en producción, por lo que es mejor incorporarlos durante el desarrollo.
Comprender a los usuarios: Identificar los diferentes tipos de usuarios, conocer sus necesidades, objetivos y preocupaciones a través de entrevistas y la creación de personas ficticias.
Esbozar la interfaz: Generar ideas rápidamente utilizando herramientas de baja fidelidad como papel o pizarras, centrándote en la progresión del usuario sin preocuparte por los detalles de diseño.
Crear wireframes: Desarrollar esquemas básicos de los elementos clave en cada pantalla de la interfaz, prestando atención a la arquitectura de la información, la navegación y la disposición del contenido y los controles.
Diseñar según las mejores prácticas: Aplicar principios de diseño y considerar la disposición de los elementos, los componentes de la interfaz y las opciones de diseño para optimizar la experiencia del usuario.
Realizar pruebas de usabilidad: Evaluar si las interfaces cumplen con las necesidades y expectativas de los usuarios, realizando pruebas tempranas y frecuentes, recopilando comentarios y utilizando la retroalimentación para refinar los diseños.
Trabajar con clientes que tienen su propio equipo de diseño de UX.
Conocer los límites y capacidades del diseño de UX.
Familiarizar con diferentes diseños, componentes y patrones de diseño comprobados.
Mantenerse actualizado sobre las nuevas características y aprovecharlas en los diseños.
Elegir el diseño adecuado para organizar y resaltar el contenido.
Configurar secciones colapsables para una mejor navegación en interfaces con mucha información.
Moderar el usode diseños de cajas y tarjetas para evitar que las páginas se vean desordenadas.
La función decorativa de los diseños de carteles y la advertencia de no utilizarlos para información crucial.
Los componentes de interfaz tienen conjuntos de propiedades propias.
Algunas propiedades comunes incluyen etiquetas, instrucciones y consejos útiles.
Las etiquetas pueden ubicarse en diferentes posiciones: encima, adyacentes, justificadas u ocultas.
La posición de la etiqueta debe seleccionarse en función de si el campo es editable o de solo lectura.
Las instrucciones deben utilizarse para proporcionar orientación importante para completar una tarea.
El texto de marcador de posición puede utilizarse para describir el formato de entrada correcto o proporcionar una pista breve.
Los botones se utilizan para el control de flujo y acciones en línea en la interfaz.
Los botones de control de flujo deben estar en el mismo grupo en la parte inferior del formulario.
Los botones de acciones en línea deben colocarse en el cuerpo de la interfaz.
Se debe utilizar un botón principal para la acción más común en la interfaz.
Los botones destructivos deben usarse con precaución y solo en casos de pérdida permanente de datos.
Se recomienda utilizar verbos imperativos para las etiquetas de los botones.
Los asistentes (wizards) deben utilizar etiquetas como "Siguiente" o "Continuar" para indicar el progreso.
Estilo de tarjetas para selección de usuarios: Se recomienda utilizar iconos grandes y de tamaño medio, colores de acento y de segundo plano, y espacio en blanco para mantener un diseño limpio y reconocible.
Diseño estándar de tarjetas: Las tarjetas deben tener una forma cuadrada, tamaño consistente y estar dispuestas en columnas fijas para lograr una apariencia equilibrada.
Destacar tarjetas seleccionadas: Se sugiere utilizar un color de fondo de acento y cambiar el icono decorativo por una marca de verificación para resaltar las tarjetas seleccionadas.
Diseño general de la página: El uso de espacios en blanco vertical, tamaños y estilos diferentes para los títulos, y una alineación centrada ayuda a crear jerarquía y claridad en la página.
Estilo de enlaces: Se recomienda utilizar el estilo de enlace en línea solo cuando se encuentren dentro de un párrafo de texto. Para enlaces independientes, se debe utilizar un estilo más limpio y sin subrayado.
Uso de cursiva: La cursiva debe utilizarse para enfatizar palabras o frases específicas, no para decorar frases completas. Es importante mantener la legibilidad y claridad del texto.
Alineación vertical de contenido: Se debe evitar la falta de alineación causada por dejar una etiqueta vacía encima de un campo. Ocultar la etiqueta restaura la alineación y evita la confusión visual.
Es importante crear jerarquías de información y una estructura visual equilibrada en las interfaces de usuario.
Resalta la información más importante.
Utilizar componentes predefinidos y patrones de diseño en la herramienta de diseño de interfaces para agilizar el proceso de diseño y garantizar la coherencia visual.
Comunicarse con los usuarios durante todo el proceso de diseño y desarrollo de aplicaciones para garantizar que se cumplan sus necesidades.
Fernando Fernández Morales
Interfaces 102 – Creacion de interfaces dinámicas
Modo diseño
Desing mode
Los componentes de pueden arrastrar de la barra izquierda (paleta)
Se pueden editar desde la barra derecha (configuración de componetnes)
En el centro se muestra una vista previa de la interfaz
Expression mode
En este modo se pueden encontrar los componentes pulsando sobre ellos y en el código se marcará la parte en la que esta.
De igual manera se pueden configurar las características del componente
Se pueden mostrar errores de distintas maneras
Las variables locales se definen usando a!localVariables y se definen al inicio
Las variables locales llevna el preijo local!(nombre de la varible)
Si no se le asigna valor a una variable local por defecto es null hasta que se le asigne un valor
Enlaces dinámicos
Convierten texto estático a iconos, estampas y cards en componentes dinámicos que se pueden usar para mostrar, ocultar o alterar otros componentes.
Para esto se usa la función a!dynamicLink() que tiene los parámetros:
label
showWhen
value
saveInto
Se representan como a!gridLayout().
headerCell no puede estar vacio.
Con el parámetro columnConfigs podemos establecer la configuración de las columnas, este parámetro acepta una lista de a!gridLayoutColumnConfig() para cada una de las columnas.
Cada fila de la cuadricula esta representada por un a!gridRowLayout()
Guardar datos
En appian los botones funcionan similar a los enlaces dinamicos.
Guardar un solo valor
Pueden tener un parámetro de value y un parámetro saveInto
Cuando se hace click el valor especificado en value se escribe en la variable saveInto.
Guardar múltiples valores
Se puede utilizar la siguiente sintaxis
saveInto{
a!save(
target: guarda el valor
value: valor
),
}UX Planning
UX Design and Appian
Las interfaces deben ser
Eficaces: Para disminuir los tiempos de trabajo y hacer mas eficientes los procesos de trabajo.
Intuitivas: Mientras menos pasos tengan para lograr su objetivo mejor también ayudara a hacer más eficiente el trabajo.
Bonitas/agradables: Ayudara a que los usuarios se sientan más cómodos trabajando en la plataforma.
Planificación
Entender tus usuarios: Debes entender quien estará usando la interfaz para hacer flujos más eficaces.
Sketch: Antes de cualquier cosa debemos hacer el diseño para saber como se va a ver la interfaz y como van a interactuar con ella. Wireframe, es un diseño muy básico que ayudara a definir mejor el diseño de las interfaces.
Diseño: Siempre mostrar la cantidad correcta de información y asegurarse de que todos los componentes estén accesibles y disponibles. No crear pasos innecesarios o distracciones.
Test de usabilidad: Se prueban las interfaces para ver que funcionen de manera correcta. Sirve para detectar y corregir errores.
Layouts
Lo principal para hacer buenas interfaces es conocer los límites de la plataforma.
Lo mas común es usar columnas, aunque también se utiliza el side by side layout que aporta mas control en la posición de los componentes.
El box layout también tiene mas orden y aparte aporta un mayor impacto en el diseño ya que pone una barra de titulo y un borde.
El billboard: es meramente decorativo y le da una mejor presentación a la página.
Mejores practicas
Tienen las siguientes propiedades:
Etiquetas:
Pueden ayudar a dar instrucciones o consejos
Buttons
Tienen 2 principales utilidades:
Controlar el flujo de navegación (Pasar de una página a otra)
Para realizar acciones
Interfaces 102: Building dynamic interfaces
Beneficios de ocupar interfaces dinamicas
Review the basics
Se muestra un resumen de lo aprendido hasta el momento
Introduccion to expression Mode
Podemos ocupar tanto el expression como el design mode para crear nuestras interfaces y dependerá de nosotros elegir cual es el mas conveniente según sea el caso.
Local Variables to Store Data
a!local variables ocupa la "expression" como ultimo parametro por lo cual al definir nuestras variables estás deben ir antes que la expresion de la interfaz
Dynamic Links
Podemos usar a!dynamicLink para definirlo en expression mode
Define un vínculo que desencadena actualizaciones de una o más variables.
Podemos anidar una interfaz dentro de una interfaz ocupando un rule input
Mediante el style property y utilizando una condicion podemos hacer que nuestros items s resalten
Editable grid
A!gridLayout, de esta forma se define un editable grid en expression mode
Append function, esta funcion añade el items al final de la lista
La funcion remove es lo contratio a Append y permite remover elementos de una lista basada en el Index
Interface Pattern
Son templates preconstruidas que permiten crear dinamicas y avanzadas interfaces
Variable scoped
Define el alcance de la funcion, si una variable es local solo puede ser invocada desde la funcion que la define, será inalcanzable para las demas
Create a Wizard and Save your Data
Variable Local
Guardan datos temporalmente for uso en una interfaz o expression rules
Rule Inputs
Transfieren datos dentro o fuera de interfaces y expression rules
Los botones tiene dos valores
Cuando solo es un parametro se ocupa:
Value
Saveinto
Cuando son multiples datos de entrada
Ocupamos Saveinto y las funcion a!save la cual tiene dos parametros
Target
103: Build Complex Interfaces by Adapting Patterns
Users stories
Explicación general de una característica del software escrita desde la perspectiva del usuario final o cliente.
Acceptance criteria
Lista de elementos que debe incluir al crear sus interfaces. Incluyen orientación y consejos generales para desarrolladores.
Mock Ups
Representa un high level overview de lo que buscamos hacer
Antes de saber si tu interfaz cumple los princios del UX design, debes asegurarte que esta sea funcional. Incorporar los principios en la fase de desarrollo es mejor debido a que incorporarlos una vez que se recibio feedback esto será mas costoso
UX design principles
Efficient: Usuarios pueden completar su trabajo en el menor tiempo posible y esta debe de ser responsive para minimizar el numero de pasos que el usuario debe realizar para realizar una tarea
intuitive : Debe de ser facilmente manejada, que pueda ser usada con mínimas instrucciones
Beautiful : La interfaz debe de ser atractiva, armoniosa y debe de verse moderna
UX Planning in Apian
Hay cuatro fases que seguir
Considera las best practices para layouts y Components
Algunos metodos utiles pueden ser los siguientes
Permiten juntar componentes
Hay diferentes tipos de layouts
Component best practices
Labels position
Evita la redundancia cuando algo sea muy obvio, debido a que esto puede distraer al usuario
Help tooltil: son utiles para incluir informacion que es necesaria, pero que no necesita ser mostrada todo el tiempo
Placeholder text: Utilizalo para mostrar que tipo datos se requieren o para asistir al usuario
Tienen dos principales funciones
Flow control, Move forward or backwards
Realizar una acción
- El botón primario de una interfaz siempre debe de ir del lado derecho y en caso de que haya dos botones debe ser el que vaya a la izquierda
- El boton primario y secundarios deben de tener un estilo diferente
- Ocupa verbos imperativos: añadir, aprobar, etc para los botones
Design for Great User Experiences
Como hacer una app de Appian "beautiful"
Puedes comenzar buscando el tipo de compañía u organización para la cual vas a diseñar debido a que posiblemente ya se tenga un patrón definido para las interfaces, esto nos evitara empezar de cero.
TIPS
Color (Choose tasteful colors)
Images(understand how best to use images)
Typography (select varied and appropriate typography)
Balance (la interfaz debe lucir armoniosa, bien distribuida)(Think explicity about visual Balance)
Clutter (Avoid unnecessary clutter)
Al mostrar informacion esta debe de demostrar una jerarquia respecto a la importancia de la misma, es decir debe resaltar.
La pagina debe verse balanceada y estructurada
Marco Polo Martínez Badillo
Me queda más claro que al crear un interfaz, tenemos la oportunidad de reutilizar una amplia gama de plantillas predeterminadas que brinda la plataforma, escoger un formulario con secciones y botones predefinidos, los cuales podemos configurar.
Tenemos la opción de utilizar el modo expresión y modo diseñador, diseñador permite arrastrar y soltar objetos y aporta una forma práctica y ágil para escoger componentes, el modo expresión permite acceder al código generado al escoger esos componentes, tenemos alcance a l uso de funciones predefinidas. Los Rule inputs son variables que permiten capturar datos de una interfaz y permiten pasar información de una interfaz a otra aplicación.
Con respecto a los botones , contamos con: radio, se pueden crear constantes con la finalidad de tener valores predefinidos y así no estar cambiando los valores que se mostrarán en cada uno de ellos. enviar, sirven para enviar información a DSE y deben ser en formato Primary.
otra parte importante son las variables locales que nos ayudan a administrar consultas de datos en una interfaz y agregar diferentes tipos de comportamientos dinámicos.
La diferencia entre rule inputs y local variables es que los rule inputs sirven para pasar datos fuera de una interfaz a un proceso, mientras que las variables locales solo existen dentro de la interfaz y no pueden ser conectadas a otros objetos de la ampliación, además, no se necesita declarar que tipo de datos se usará. Finalmente, las variables locales pueden ser usados para almacenar datos de una consulta y estos sean mostrados en una interfaz.
Hecho por: Josué Quintero