Explorar controles y pantallas en aplicaciones de lienzo
En esta unidad, vamos a examinar los controles que ya agregamos a nuestra aplicación, tanto en la Galería como en el Formulario, también vamos a agregar algunas pantallas a nuestra aplicación para prepararnos para la próxima unidad.
Controles en Power Apps
Un control es un elemento de la interfaz de usuario que produce una acción o muestra información. Muchos controles de Power Apps son similares a los controles que ha utilizado en otras aplicaciones: etiquetas, cuadros de entrada de texto, listas desplegables, elementos de navegación, etc.
Además de estos controles típicos, Power Apps tiene controles más especializados, que puede encontrar en el botón + Insertar, que incluye un campo de búsqueda para ayudarlo a encontrar lo que busca.
Algunos controles pueden aportar interés e impacto a las aplicaciones, como, por ejemplo:
Galleries: controles que son contenedores de diseño que incluyen un conjunto de controles que muestran los registros de un origen de datos.
Forms: controles que muestran detalles sobre los datos y le permiten crear y editar registros.
Media: controles que le permiten agregar imágenes de fondo e incluyen un botón de cámara, para que los usuarios puedan tomar fotografías desde la aplicación, un lector de código de barras para la captura rápida de información de identificación y mucho más.
Charts: controles que le permiten agregar gráficos, incluidos datos de Power BI, para que los usuarios puedan realizar análisis instantáneos de sus datos.
Para ver los controles disponibles, haga clic en la pestaña + Insertar y luego amplíe los diferentes campos. Mientras lo hace, verá la utilidad del campo de búsqueda para ayudarlo a encontrar rápidamente lo que está buscando. Intente introducir algunos valores en el campo de búsqueda para ver el comportamiento.
Propiedades y controles de Galería
Dentro de la galería en la pantalla debería ver diferentes controles. El tipo de control tiene un icono justo a la izquierda del nombre que indica de qué tipo de control se trata. Observe cómo tiene dos controles de forma que incluyen un rectángulo y un separador. Continúe y seleccione el control del rectángulo en su vista de árbol. Verá que el valor predeterminado es la propiedad OnSelect, que dice "Select(Parent)". A menos que designe una propiedad OnSelect diferente para cualquiera de estos controles de la galería, todos serán predeterminados en Select(Parent), lo que significa que al seleccionar ese control se selecciona la propia Galería.
Ahora seleccione el control Galería (no hay una etiqueta o forma en él, es posible que tenga que buscarlo en su vista de árbol) y observe la propiedad OnSelect. Actualmente está configurada como false, lo que significa que seleccionar cualquier control en su galería no hará nada hasta que defina una acción.
Vuelva a seleccionar el control Rectángulo de su galería en la vista de árbol. Ahora vaya a la propiedad Visible mediante el valor desplegable a la izquierda del campo de entrada de fórmula (fx). Observe que todas las propiedades disponibles para el control están en una lista desplazable, de modo que pueda buscar/seleccionar la propiedad Visible. La propiedad Visible la tienen todos los controles. Observe que este control tiene ThisItem.IsSelected en el campo de fórmula.
IsSelected es un valor booleano que se evalúa como "true" o "false" para determinar si este elemento de la Galería está seleccionado o no. Solo se puede seleccionar un elemento de nuestra Galería a la vez, por lo que este valor solo puede ser "true" para un elemento. Si pone su aplicación en modo Versión preliminar. Intente seleccionar algunas cafeteras diferentes y observe cómo el control Rectángulo solo aparece en la que ha seleccionado. El rectángulo visible también corresponde al elemento que se muestra en el formulario al lado de la galería.
Otros controles importantes son Separador, que también es un rectángulo, pero siempre está visible (actualmente es de color blanco, por lo que no aparece en nuestra pantalla blanca) y un icono titulado "NextArrow1", que actualmente no hace más que seleccionar el control principal de la galería, además de un control Image. Digamos que queremos cambiar NextArrow1 a un lápiz de edición, para darle al usuario una indicación de que debe presionar ese control para editar esa máquina de café. ¿Recuerda que la barra de encabezado refleja algunas propiedades modificables para el control seleccionado? Seleccione el botón desplegable Icono en su encabezado y verá el icono Editar lápiz en Acciones. Continúe y selecciónelo para cambiar la flecha derecha a un icono de Editar.
Analicemos brevemente el control Imagen. Dado que definimos un campo de imagen en sus datos, Power Apps pudo discernir a partir de los datos lo que entra en este campo. Si tuviera otra imagen para mostrar aquí, podría ponerla en la propiedad Image de este control. Por ejemplo, si tuviera un elemento al que le faltara una imagen en el campo de imagen, podría usar una fórmula para comprobar si el campo de imagen estaba en blanco y, de ser así, mostrar una imagen diferente. El campo de imagen simplemente quiere una imagen.
Como ya hemos cubierto las etiquetas, pasemos a los controles de su formulario.
Controles y propiedades del formulario
Cubramos rápidamente las dos propiedades más importantes del formulario. DataSource es la tabla de datos conectada al formulario. Esto es importante para que cuando su formulario se actualice, sepa dónde escribir los datos. La segunda propiedad importante es Item. El Item, para nuestra aplicación, es el elemento seleccionado de nuestra galería.
Dentro del formulario, cuando selecciona un campo, ese campo se representa como una DataCard en la vista de árbol. Observe cómo cada DataCard contiene cuatro controles diferentes. Los dos controles más importantes de su DataCard son el control de etiqueta, que inicialmente incluirá el nombre DataCardKey y el control de entrada de texto, que inicialmente incluirá el nombre DataCardValue. Los otros dos controles son opcionales y dependen de si los datos son requeridos o no. StarVisible es una etiqueta de texto con un asterisco que aparece si designa ese campo como obligatorio (ya sea en su formulario o en los datos). ErrorMessage es otra etiqueta de texto que aparece si intenta enviar un formulario y falta esa entrada. Puede consultar las propiedades Visible de estos controles. Visible se evalúa como: "true" o "false". La función And() que verá en el control StarVisible significa que ambas condiciones, separadas por una coma, deben ser true para que la función se evalúe como "true".
Muchas de las propiedades dentro de los controles de formulario no se pueden cambiar a menos que "desbloquee" la tarjeta y eso es así por una buena razón. Aunque un control de formulario está destinado a facilitar la entrada de datos, es mucho menos flexible para fines de diseño. Si tuviéramos que agregar o eliminar campos de nuestro formulario existente, nuestros controles cambiarían de tamaño automáticamente y perderíamos las ediciones que hicimos (recuerde la entrada de texto Product Summary). En módulos futuros, aprenderemos más sobre cómo personalizar la entrada de datos, pero de momento evitaremos personalizar tarjetas de formulario.
Para los datos del formulario de nuestras máquinas de café, el único control de entrada sin texto se encuentra en la ImageDataCard. Observe cómo esta tarjeta tiene un control adicional junto con los cuatro que hemos visto anteriormente, el control Agregar imagen. El control Agregar imagen es un control multimedia que le permite seleccionar una imagen de su dispositivo (o una ubicación en línea) para reemplazar la imagen existente. Cuando toca o selecciona para agregar una imagen, verá una ventana emergente abierta que le permite seleccionar un archivo de imagen y luego abrir esa imagen en el formulario.
Dos propiedades importantes que es imprescindible conocer para cada tarjeta de datos son la propiedad Default y la propiedad Update. La propiedad Default indica qué columna de nuestros datos proporciona el valor predeterminado para esa tarjeta. La propiedad Update indica de qué control de entrada provienen los datos que Power Apps utiliza para actualizar los datos de ese registro.
Seleccione la tarjeta Product Summary, solo la tarjeta y no el campo de entrada de texto dentro de la tarjeta. Observe que el valor Default de la tarjeta es ThisItem.'Product Summary', que es el valor que ve en el campo de entrada de texto DataCardValue. Cambie a la propiedad Update de la tarjeta y observe que esta tarjeta recibe la información de actualización del DataCardValue.Text de la tarjeta. Entonces, cuando enviamos el formulario, Power Apps toma lo que está escrito en ese campo de entrada de texto y actualiza el "Product Summary" para ese artículo.
Es posible desbloquear y agregar otros controles en una tarjeta y cambiar la propiedad Update de la tarjeta, siempre y cuando el control que agregue proporcione el tipo de datos que espera su origen de datos.
Finalmente, debemos dar a Power Apps un comando SubmitForm para que guarde los cambios que introdujimos en nuestro formulario. En nuestro caso, tenemos el botón "Guardar cambios" debajo del formulario, que se adapta a ese propósito. Si selecciona el botón (mientras está en modo de edición), observe que la propiedad OnSelect es SubmitForm(Form1), que toma cada tarjeta de formulario actualizada y la escribe en nuestro origen de datos.
Agregar pantallas
Hasta ahora, nuestra aplicación solo ha tenido una única pantalla. En las siguientes dos unidades, agregaremos más funciones a medida que continuamos personalizando nuestra aplicación. Siga este procedimiento para agregar pantallas a su aplicación:
Seleccione su Screen1 en el panel Vista de árbol, luego seleccione el botón Nueva pantalla desde la barra de comandos o desde la parte superior del panel Vista de árbol y luego elija la plantilla de pantalla En blanco.
Repita para agregar una tercera pantalla.
Cambiemos el nombre de nuestras tres pantallas. Para ello, haga doble clic en Screen1 en el panel de Vista de árbol y cámbiele el nombre a "Catalog Screen".
Repita el proceso para cambiar el nombre de Screen2 a "Home Screen" y Screen3 a "Admin Screen".
Finalmente, cambiemos la posición las pantallas en la Vista de árbol. Puede hacer esto seleccionando el botón de puntos suspensivos y, luego, el comando Subir.
Ahora que comprendemos mejor los controles de galería y formulario y sabemos cómo agregar pantallas a nuestra aplicación, continuemos modificando nuestra aplicación para mejorar la experiencia del usuario.