Ejercicio: Introducción a fórmulas en aplicaciones de lienzo

  • 8 minutos

¿Sabía que podemos agregar fórmulas a nuestros controles en Power Apps? Recuerde que una etiqueta de texto solo necesita texto y un control de imagen necesita una imagen (por ejemplo). Si proporciona la entrada que Power Apps está buscando, puede incluir cualquier variación siempre que la fórmula refleje el tipo de entrada que espera el control.

En el siguiente ejercicio, modificaremos nuestra galería para que el "Machine Price" muestre un valor en divisa y modificaremos el color del texto de nuestro campo "Type" para que aparezca como el color de la máquina de café. Esta aplicación se basa en la aplicación que creamos en la última unidad, por lo que si aún no la ha completado, vuelva a la última unidad para completarla.

Cuando tengas abierta la aplicación "Máquinas de café de Contoso", continúa con los pasos a continuación:

  1. Seleccione la "Catalog Screen" del panel Vista de árbol.

    Nota

    También puede cambiar de pantalla desde el menú desplegable en la esquina inferior de la pantalla de visualización actual. Si selecciona el menú desplegable, la pantalla en la que se encuentra actualmente tendrá una marca de verificación al lado y estará resaltada en gris oscuro.

  2. Seleccione su Galería y luego seleccione el control Subtitle1 y busque la propiedad Text, que muestra ThisItem.'Machine Price'.

  3. Para agregar el símbolo de moneda de dólares estadounidenses, establezca la propiedad Text en:

    Text(Value(ThisItem.'Machine Price'), "$ ##.00")

    Recuerde el orden de las operaciones matemáticas cuando utilice una fórmula; todo lo que esté dentro del paréntesis ocurre primero. Nuestra fórmula toma el valor de "Machine Price", ya que nuestra tabla de datos lo introdujo como texto, lo declaramos como numérico al envolverlo en la función Value(). Luego damos formato al resultado como texto al agregar el signo de dólar junto con el número y luego los valores de centavos, incluso si el valor en centavos es cero.

    Nota

    Si la fórmula devuelve un error, la configuración de idioma del entorno de Power Apps puede afectar a algunos separadores y operadores. Por ejemplo, la fórmula anterior se expresa en un idioma y una región que utiliza un punto como separador decimal, como Japón o el Reino Unido.

    Sin embargo, para esta misma fórmula en un idioma y una región donde se usa una coma como separador decimal, como Francia o España, la fórmula debería ser: Text(Value(ThisItem.'Machine Price'); "$ ##,00")

    El operador de selección de propiedad (punto) en ThisItem.Price es siempre el mismo, sin importar cuál sea el separador decimal, pero observe que el separador decimal y el separador de la operación de encadenamiento han cambiado a coma y punto y coma respectivamente. Internamente, la fórmula no cambia, lo que cambia es cómo la muestra y edita el autor.

  4. Ahora, cambiemos la propiedad Color de nuestra etiqueta Body1 en nuestra galería. Seleccione el control Body1 y busque la propiedad Text, que mostrará ThisItem.Type.

  5. Busque la propiedad Color para Body1. Como puede ver, la fórmula dice "Black". Si selecciona dentro del campo de entrada de la fórmula, verá que dice "Color.Black". Además, justo debajo del campo de entrada de fórmula, en Power Apps se ve una fórmula que muestra Color.Black = y un cuadrado que se rellena en negro. También se indica que el Tipo de datos es Color.

    Nota

    Algunos campos, como los campos de Color, solo muestran el valor completo de la fórmula cuando hace una selección dentro del campo de entrada de la fórmula. Al introducir un valor de color, debe incluir todas las partes de la fórmula para que Power Apps entienda la entrada. En este caso, la fórmula debe ser Color.Black.

  6. Cambiemos la propiedad Color de la etiqueta Body1 a Color.Purple. Es posible que haya notado que tan pronto como ha escrito la palabra "Color", Power Apps ha empezado a sugerir automáticamente posibles valores para el resto de ese campo debajo de la barra de fórmulas. En esta sintaxis, Power Apps reconocerá todos los colores HTML disponibles.

  7. Ahora, mire brevemente hacia la derecha de la galería en su control de formulario (sin seleccionarlo) y observe que tenemos un campo titulado "Primary Color". Nuestros datos están escritos para que podamos usar el valor de este campo en nuestra fórmula. En el campo de propiedad Color de su etiqueta Body1, cambie su entrada a la siguiente fórmula:

    ColorValue(ThisItem. 'Primary Color')

    ¿Ha vito que ahora el color del texto en la etiqueta Body1 coincide con el Color primario de la máquina de café? Power Apps puede utilizar la fórmula ColorValue para cambiar el nombre del texto de un color a un valor de color. Puede ver justo debajo de la barra de fórmulas que Power Apps muestra el tipo de datos como Color y cambia el color de todos los elementos de la galería según el color primario de la máquina.

    Captura de pantalla de propiedades personalizadas

  8. A continuación, agregaremos algunos encabezados a las nuevas pantallas que creamos. Para hacerlo, copiaremos algunos controles de nuestra pantalla Catálogo y los pegaremos en las nuevas pantallas. Mientras mantiene pulsada la tecla Shift, seleccione los controles Rectangle1 y Label1 desde la parte superior de la "Catalog Screen" (también puede seleccionarlos desde la Vista de árbol). Haga clic derecho y seleccione "Copiar" o use las teclas Ctrl + C para copiar los controles en el portapapeles de su dispositivo.

    Sugerencia

    Hay algunas funciones interesantes al hacer "clic derecho" en un control o en varios controles seleccionados. Estas características aparecerán en su pantalla junto a los controles seleccionados. No solo puede Cortar y Copiar, sino que también puede Agrupar, Reordenar, Alinear o agregar comentarios (para otros usuarios). En función del tipo de control, verá características como Fuente, Tamaño, Color y Relleno.

    Captura de pantalla con la selección de Label1 y Rectangle1; se muestra el clic derecho para copiar

  9. Ahora, seleccione la "Home Screen" y pegue los dos controles allí. Vuelva a colocarlos para que ambos queden centrados en la parte superior de la pantalla.

  10. A continuación, seleccione la "Admin Screen" y vuelva a pegar. También vuelva a colocar los controles.

  11. A continuación, con la propiedad Text de los controles de etiqueta que insertamos, cambiaremos el nombre para reflejar los nombres de pantalla. Seleccione el control de etiqueta en el encabezado de su "Admin Screen". Recuerde que todo lo que necesita un control de etiqueta es texto. Introduzca lo siguiente en la propiedad Text de su control de etiqueta de encabezado:

    ‘Admin Screen’.Name

    Sugerencia

    Es posible que haya notado que cuando empezó a escribir "Admin Screen", Power Apps mostraba información potencial de la "Admin Screen" que podía usar como texto en esta etiqueta. Las etiquetas son un control de vital importancia para agregar a su aplicación cuando la está desarrollando porque pueden mostrar información que de otra manera no vería. Puede agregarlas o eliminarlas de su aplicación según sea necesario.

    Captura de pantalla del cambio de nombre de la etiqueta del encabezado de acuerdo con la propiedad de nombre de la pantalla

  12. Simplemente usamos la propiedad Name de nuestra "Admin Screen". Hagamos lo mismo ahora con Home screen al introducir lo siguiente en la fórmula Text:

    ‘Home Screen’.Name

Nuestra aplicación está tomando forma ahora a medida que mejoramos la experiencia del usuario con fórmulas. En la siguiente unidad, veremos cómo agregar algo de navegación a nuestra aplicación.