Day 11: ¿Que entendiste de: Interfaces 102: Build Interfaces Using an Expression?
Discussion posts and replies are publicly visible
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: