Agregar una pantalla en desplazamiento a una aplicación de lienzo

En una aplicación de lienzo, cree una pantalla por la que puedan desplazarse los usuarios para ver diferentes elementos. Por ejemplo, cree una aplicación de teléfono que muestre datos en varios gráficos, que los usuarios podrán ver al desplazarse.

Cuando se agregan varios controles en una sección, estos mantienen su posición relativa en dicha sección tanto si se trata de una aplicación para el teléfono como de una aplicación para la tableta. El tamaño y orientación de la pantalla también pueden afectar la forma en que se organizan las secciones.

Requisitos previos

  1. Crear una aplicación de lienzo en blanco.
  2. Aprenda a agregar y configurar controles.

Crear una pantalla de desplazamiento

  1. Seleccione Nueva pantalla debajo del menú superior.

  2. Seleccione Desplazable.

    Seleccione nueva pantalla y luego elija el tipo de pantalla desplazable.

    Se agrega una nueva pantalla desplazable a la aplicación.

    Una captura de pantalla que muestra la pantalla desplazable agregada a la aplicación.

Agregar controles

La pantalla desplazable incluye una cuadrícula fluida con una tarjeta de datos de forma predeterminada. Las tarjetas de datos ayudan a separar los bloques de creación en la pantalla. Para hacer que la pantalla se pueda desplazar con múltiples controles, agregue más tarjetas de datos. Y luego, agregue controles en las tarjetas de datos según sea necesario.

Para agregar tarjetas de datos, puede seleccionar Agregar sección en la parte inferior de la pantalla desplazable.

Agregar botón de sección resaltado en la pantalla desplazable en el lienzo.

Comenzaremos agregando controles en la tarjeta de datos disponible con la pantalla desplazable de manera predeterminada y luego agregaremos una nueva sección que agrega otra tarjeta de datos. Una vez que esté disponible una nueva tarjeta de datos, agregaremos otro control dentro de la nueva tarjeta de datos.

Juntos, tanto las tarjetas de datos como los controles dentro de las tarjetas de datos extenderán la longitud predeterminada de la pantalla, lo que requerirá el uso de la capacidad de desplazamiento de la pantalla.

Sugerencia

Para obtener más información acerca de tarjetas de datos, consulte Comprender las tarjetas de datos.

  1. Seleccione + (Insertar) en el panel de la izquierda.

    Texto alternativo que describe el contenido de la imagen.

  2. Expanda Gráficos y luego seleccione Gráfico de columnas.

  3. Cambie el tamaño del gráfico agregado en la pantalla para consumir aproximadamente dos tercios de la pantalla.

  4. Reduzca el tamaño de la tarjeta de datos al tamaño del gráfico agregado.

    Cambie el tamaño de la tarjeta de datos en la pantalla para consumir aproximadamente dos tercios de la pantalla.

  5. Seleccione Agregar sección en la pantalla para agregar otra sección.

    Se agrega una nueva tarjeta de datos a la pantalla.

  6. Seleccione Insertar > Gráficos > Gráfico de líneas.

  7. Desplácese hacia abajo en la pantalla usando la barra de desplazamiento del lado derecho de la pantalla y luego seleccione Agregar sección para agregar una tercera tarjeta de datos.

  8. Seleccione Insertar > Entrada > Entrada manuscrita.

  9. Cambie el tamaño del control Entrada manuscrita aumentando el ancho dentro de la tarjeta de datos.

    El control Entrada manuscrita se redimensionó para usar más ancho en la pantalla.

  10. Pulse F5 en el teclado para obtener una vista previa de la aplicación. Desplácese hacia abajo usando la barra de desplazamiento para ir a la parte baja de la pantalla.

    Vista previa de la pantalla desplazable.

Ahora que ha demostrado cómo usar la pantalla desplazable, personalice aún más la aplicación según los requisitos de su negocio.

Desplazamiento de pantalla para formularios

Ya que Power Apps utiliza tarjetas de datos para crear secciones, los controles Mostrar formulario y Editar formulario no se pueden insertar en ellos. El anidamiento de tal combinación de controles puede degradar el rendimiento de la aplicación. Por lo tanto, cuando utilice controles de formulario, utilice contenedores de diseño como un control Contenedor vertical.

Sugerencia

Para obtener información sobre cómo trabajar con formularios, consulte Comprender los formularios de la aplicación de lienzo.

Hay varios métodos diferentes para configurar el desplazamiento con formularios:

Usar la propiedad Vertical Overflow

El uso de la propiedad Vertical Overflow es un método básico para usar una pantalla de desplazamiento que tiene un formulario.

  1. Asegúrese de estar usando una pantalla en blanco y no una pantalla desplazable.

  2. Seleccione Insertar > Disposición y luego seleccione Vertical container.

  3. Desde el lado derecho de la pantalla en el panel de propiedades, seleccione el menú desplegable de la propiedad Vertical Overflow y seleccione Desplazarse.

    Propiedad Vertical overflow del contenedor establecida en Desplazarse.

  4. Agregue el formulario de edición o visualización con los campos obligatorios. Cuando la lista de campos exceda el tamaño del contenedor dentro de la pantalla, podrá desplazarse dentro del contenedor usando la barra de desplazamiento.

    Contenedor vertical desplazable que usa la propiedad Vertical Overflow establecida para desplazarse con un formulario de visualización.

Usar contenedores dentro del contenedor Vertical

Para aplicaciones complejas, puede considerar agregar contenedores dentro de un control Contenedor vertical. Y luego, ajuste la altura del formulario y el contenedor interior como se muestra a continuación.

  1. Asegúrese de estar usando una pantalla en blanco y no una pantalla desplazable.

  2. Seleccione Insertar > Disposición y luego seleccione Vertical container.

  3. Desde el lado derecho de la pantalla en el panel de propiedades, seleccione el menú desplegable de la propiedad Vertical Overflow y seleccione Desplazarse.

  4. Seleccione Insertar > Disposición y luego seleccione Contenedor.

  5. Desde el lado derecho de la pantalla en el panel de propiedades, gire la propiedad Flexible height a Apagado.

    Propiedad Flexible height desactivada para el contenedor.

  6. Agregue el formulario de edición o visualización con los campos obligatorios.

  7. Para habilitar el desplazamiento dentro de la pantalla para el formulario, actualice la altura del contenedor agregado en el paso 4 y el formulario.

    Formulario desplazable que utiliza el contenedor y la altura del formulario para la capacidad de desplazamiento.

Para obtener más información sobre cómo trabajar con la capacidad de respuesta de una aplicación, consulte Crear aplicaciones de lienzo con capacidad de respuesta y Diseños dinámicos

Consulte también

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).