Introducir y mostrar datos con controles de texto

Completado

En Power Apps, los controles de texto se utilizan para todo tipo de objetivos, como mostrar texto, números o fechas y calcular la divisa. Por ejemplo, podría calcular el valor de dos controles Entrada de texto y mostrar los resultados en un control Etiqueta de texto.

Hay varios controles de texto que podría incorporar en su aplicación. Cada uno de estos controles tiene un fin y un caso de uso ligeramente diferentes. Por ejemplo, quizá esté creando una aplicación de encuesta para los empleados y desea obtener sus comentarios. En este escenario, utilizaría el control Entrada de texto y modificaría la propiedad Mode para que fuera Multiline en lugar de una línea única. Probablemente, todas las aplicaciones con las que trabaja tendrán controles de texto, así que le recomendamos que se familiarice con ellos, pues le resultarán útiles al desarrollar su aplicación. A continuación se detallan los diferentes controles de texto que están disponibles.

Captura de pantalla del menú de controles de texto

  • Etiqueta de texto: muestra los datos que especifica como una cadena de texto literal o un valor numérico, que aparecen tal y como los escribe, o como una fórmula que se evalúa como una cadena de texto o un número. Las etiquetas de texto suelen aparecer fuera de cualquier otro control (por ejemplo, un banner que identifica una pantalla), como una etiqueta que identifica a otro control (por ejemplo, un control de clasificación o de audio), o en una galería, para mostrar un tipo específico de información sobre un elemento.

  • Entrada de texto: un cuadro en el que el usuario puede escribir texto, números y otros datos. Por ejemplo, un usuario puede especificar datos escribiendo en un control Entrada de texto. Según cómo configure la aplicación, esos datos podrían agregarse a un origen de datos, usarse para calcular un valor temporal o incorporarse de alguna otra manera.

  • Texto HTML: un control de texto HTML no solo muestra texto sin formato y números, sino que también convierte las etiquetas HTML, como los espacios de no separación.

  • Editor de texto enriquecido: el control Editor de texto enriquecido proporciona al usuario de la aplicación un área de edición de WYSIWYG para aplicar formato al texto. Este es el control que debe usarse si quiere permitir que el usuario proporcione listas numeradas o listas con viñetas. Un buen ejemplo es una aplicación que se use para recopilar contenido para un artículo o boletín y donde se permita al usuario agregar texto con formato que podría resultar útil para la persona que compile el artículo.

  • Entrada manuscrita: un control en el que el usuario puede dibujar, borrar y resaltar las áreas de una imagen. El usuario puede utilizar este control como una pizarra, dibujando diagramas y escribiendo palabras que se pueden convertir en texto escrito.

Ejercicio de etiqueta de texto

Vamos a ver con más detalle el control Etiqueta de texto para que entienda mejor cómo funciona.

  1. Abra una aplicación o cree una nueva aplicación en Power Apps Studio.

  2. Agregue un control Etiqueta de texto a una pantalla.

  3. Ponga la propiedad Text de la etiqueta en "Hola, mundo" (incluidas las comillas). Esta es la función básica de una etiqueta de texto: mostrar texto a un usuario.

    A continuación, vamos a crear una solución más dinámica mediante la combinación de un botón, la galería y varios controles de etiqueta. En este escenario, creará una colección denominada CityPopulations que contendrá datos sobre la población de diversas ciudades de Europa. Luego, mostrará esos datos en una galería que contiene tres etiquetas y especificará el tipo de datos que mostrará cada etiqueta.

  4. Agregue un control Botón y establezca en su propiedad OnSelect la fórmula siguiente:

    ClearCollect(CityPopulations, {City:"London", Country:"United Kingdom", Population:8615000}, {City:"Berlin", Country:"Germany", Population:3562000}, {City:"Madrid", Country:"Spain", Population:3165000}, {City:"Rome", Country:"Italy", Population:2874000}, {City:"Paris", Country:"France", Population:2273000}, {City:"Hamburg", Country:"Germany", Population:1760000}, {City:"Barcelona", Country:"Spain", Population:1602000}, {City:"Munich", Country:"Germany", Population:1494000}, {City:"Milan", Country:"Italy", Population:1344000})
    
  5. Antes de continuar, vamos a obtener una idea de lo que hace esta fórmula usando el botón Copilot en el campo de entrada de la fórmula. Seleccione el botón y, luego, Explicar esta fórmula. Copilot analiza la fórmula e intenta darle una explicación en lenguaje natural. Es similar a lo que se ve en la siguiente imagen.

    Captura de pantalla del botón de Copilot

    Tenga en cuenta que el copiloto puede ofrecerle una explicación ligeramente diferente, pero puede ayudarle a comprender cómo funcionan las fórmulas en la aplicación. También puede usar el botón Copiar para usar la Explicación de la fórmula en los comentarios de su fórmula; solo tiene que pegarla en una línea de código separada precedida por dos barras diagonales (//). Las barras diagonales le indican a Power Apps que no tenga en cuenta el código detrás de ellas para ningún cálculo. Siga practicando cómo agregar la explicación que proporciona Copilot; para ello, vaya a una nueva línea en su fórmula, agregue dos barras diagonales y pegue la explicación.

  6. Mantenga presionada la tecla Alt y seleccione el control Botón. (Esto crea la colección y almacena toda la información).

  7. Agregue una galería vertical y establezca su propiedad Items en CityPopulations.

  8. Con la galería seleccionada, mire el panel de propiedades en el lado derecho de la pantalla y cambie el diseño de Vacío a Título, subtítulo y cuerpo.

  9. Seleccione el control Etiqueta de texto superior (o el título). La propiedad Text mostrará ThisItem.City. Una etiqueta de texto en una galería puede mostrar cualquier campo numérico o de texto disponible (o propiedad de campo que se pueda mostrar como texto o número) en el registro. En nuestra colección, cada registro incluye los valores de texto para City y Country y un valor numérico para Population; puede mostrar cualquiera de estos en una etiqueta en esta galería.

  10. Seleccione la etiqueta de texto central (o el subtítulo), que aparece como ThisItem.Country.

  11. Seleccione la última etiqueta de texto (o el cuerpo); compruebe que muestra una propiedad Text de ThisItem.Population. Haga los cambios que sean necesarios. Observe que, si selecciona la barra de fórmulas, Power Apps le indicará que el Tipo de datos es Número.

    Captura de pantalla de los elementos del menú de imagen de galería para la propiedad Text

  12. Copilot tiene otra función útil de la que podemos hablar ahora. Seleccione la etiqueta de texto del cuerpo (o Population). Como puede ver, al seleccionar la etiqueta, esta tiene un cuadro morado flotante con una opción Copilot. Seleccione Copilot.

  13. En este caso, Copilot le ofrece dos opciones: formato condicional o formato de texto. Seleccione Formato de texto.

    Captura de pantalla con el formato de texto seleccionado

  14. El panel Dar formato al texto usando ejemplos se deslizará sobre la parte derecha de la pantalla. Puede escribir un formato para su número o seleccionar el campo de entrada y ver cuáles son las sugerencias de Copilot. Como puede ver, Copilot proporciona algunos ejemplos sobre cómo representar este valor. Vamos a agregar los separadores de miles y millones a nuestro número seleccionando 8,615,000 en los valores, en el menú desplegable Formato deseado.

    Captura de pantalla del cuadro de diálogo

  15. En este momento, debería ver en Sugerencias la fórmula Text(ThisItem.Population, "#,##0", "en-US")

    Para utilizar esta fórmula, selecciónela.

  16. Por último, seleccione el botón Aplicar. El botón Aplicar no se puede seleccionar hasta que seleccione la fórmula.

Su valor de población ahora debería mostrarse con separadores de coma bajo miles y millones.

Hemos visto cuál es la funcionalidad básica de un control de etiqueta de texto, cómo puede usarlo para mostrar información y cómo puede usar Copilot para comprender las fórmulas y formatear la salida. Hay muchas formas de usar los controles de etiqueta de texto en la aplicación.