Ejercicio: Incorporación de un origen de datos a la aplicación de lienzo y diseño de páginas funcionales

8 minutos

En Power Apps, puede conectar los datos con una aplicación ya existente o a una aplicación que está compilando desde cero. La aplicación puede conectarse a SharePoint, Microsoft Dataverse, Salesforce, OneDrive o cualquier otro origen de datos.

Usaremos SharePoint como origen de datos principal para esta aplicación. Puede conectarse al sitio de SharePoint para generar automáticamente una aplicación a partir de una lista personalizada, crear una conexión antes de agregar datos a una aplicación existente o compilar una aplicación desde cero.

Creación de un sitio de SharePoint

Inicie sesión en el portal de SharePoint con las credenciales de su organización de Microsoft.
Seleccione + Crear sitio en la página de inicio de SharePoint para crear el sitio de SharePoint .
En la página de inicio de SharePoint, encontrará la siguiente información:
- Elija el tipo de sitio; la elección es el sitio de comunicación o el sitio de grupo. Seleccione Sitio de comunicación.
- Escriba un nombre adecuado para el sitio; por ejemplo, Easy Sales.
- Agregue la descripción del sitio si es necesario (opcional).
- Seleccione el idioma que prefiera en la lista desplegable.
Seleccione Finalizar para crear un sitio de SharePoint para cargar los datos.

Se crea un sitio de SharePoint moderno y está listo para su uso en segundos. Ahora puede crear una lista, una biblioteca de documentos, una página, etc. en el sitio recién creado.

Nota:

Si seleccionó Sitio de grupo, también se crea un grupo de Microsoft 365.

Crear lista de SharePoint

Una lista de SharePoint recopila datos con alguna estructura, similar a una tabla, una hoja de cálculo o una base de datos simple. Puede incluir muchos tipos diferentes de información, como números, texto, datos adjuntos e incluso imágenes.

Para nuestra aplicación Easy Sales, crearemos una lista que contiene detalles de todas las categorías de productos: Sofás, Sillas, Mesas y Alfombras.

En el sitio de SharePoint recién creado bajo el nombre Easy Sales, seleccione la lista desplegable + Nuevo y, a continuación, seleccione Lista para crear la lista de SharePoint.
En la ventana Crear una lista, seleccione Lista en blanco para crear una lista de SharePoint desde cero.
Configure el panel Crear de la manera siguiente:
- Escriba un nombre adecuado para la lista; por ejemplo, Easy Sales.
- Rellene la descripción, si es necesario (opcional).
- Deje activada la casilla Mostrar en la navegación del sitio.
- Seleccione Crear.

Agregar datos a la lista de SharePoint

Una vez creada la lista, es el momento de agregar los datos. Aquí, "datos" significa los detalles de cualquier producto determinado. Los detalles del producto incluyen la siguiente información: nombre, imagen, precio, dimensiones, peso, color, material principal, área, altura y modelo/imagen 3D del producto para visualizar en realidad aumentada.

En la lista Ventas fáciles creada, seleccione + Agregar columna para agregar una columna de un tipo específico. En la lista siguiente se muestran las columnas que deben crearse, con sus nombres y tipos en este formato: Nombre del tipo Columna - Columna.
- Nombre: línea única de texto
- ImageLink: línea única de texto
- Precio: línea única de texto
- Dimensiones: línea única de texto
- Peso: Línea de texto única
- Color: línea única de texto
- PrimaryMaterial: línea única de texto
- Alto: número
- Profundidad: número
- Width: Número
- Precio/cm2: Número
- ProductCategory: línea única de texto
- FileType: línea única de texto
Seleccione el tipo de columna en la lista desplegable; por ejemplo, seleccione Una sola línea de texto.

Escriba los detalles de la columna en la pestaña Crear la columna y seleccione Guardar.

Repita el mismo procedimiento para el resto de las columnas de la lista anterior.

Nota:

Después de crear una lista de SharePoint , se crea una columna Title predeterminada que puede cambiar el nombre como Nombre.
Una vez que agreguemos las columnas, tenemos que agregar los datos reales en estas columnas. Empiece a agregar datos a columnas descargando la carpeta personalizada que incluye todos los detalles del producto de las cuatro listas. Para acceder a los datos, seleccione el vínculo siguiente, seleccione el botón Más acciones de archivo (...) en la parte superior derecha de la página y seleccione Descargar.

Carpeta personalizada de Power Apps
Seleccione + Nuevo para agregar un elemento y, a continuación, rellene los detalles necesarios, tal como se proporciona en el archivo de Excel descargado. Seleccione Guardar para guardar los detalles especificados.

Nota:

La vista cuadrícula permite agregar información libremente a diferentes filas o columnas.
Empiece a agregar los datos en sus columnas respectivas, como se muestra en la ilustración:

Nota:

Si desea incluir imágenes propias, puede agregar los vínculos de imagen de imágenes públicas disponibles en Internet en la columna ImageLink . Para obtener los vínculos de imagen, haga clic con el botón derecho y seleccione la opción Copiar dirección de imagen .

Nota:

No necesitará los valores de alto, profundidad y ancho para la lista de categorías Alfombra . Esta categoría de producto aceptará el valor de área medido durante la sesión de Medir en MR y dará el precio de la alfombra después del área calculada. Sin embargo, hemos agregado la columna Price/cm2 para ayudar al proceso de cálculo.

Creación de una conexión

Ahora que todos los datos necesarios para la aplicación se almacenan en la lista de SharePoint, estableceremos una conexión en Power Apps. Una vez establecida la conexión, puede acceder fácilmente a los datos de SharePoint a través de la aplicación.

Para empezar a crear una conexión, inicie sesión en Power Apps y seleccione Conexiones en la barra de navegación izquierda. A continuación, seleccione + Nueva conexión cerca de la esquina superior izquierda.
Seleccione SharePoint. Estamos seleccionando SharePoint porque hemos almacenado los datos necesarios en listas de SharePoint .
Para conectarse a SharePoint Online, seleccione Conectar directamente (servicios en la nube) y, a continuación, seleccione Crear y, si se le solicite, proporcione las credenciales.
La conexión ha sido creada, y usted puede crear una aplicación desde cero.

Nota:

Incluso si se crea la conexión, todavía puede agregar, editar y eliminar datos almacenados en la lista de SharePoint. Todos los cambios se reflejan en la aplicación a través de la conexión.

Comencemos a compilar la aplicación Easy Sales basada en los datos de SharePoint y, a continuación, agregaremos datos de otros orígenes, si se desea. Siguiendo este procedimiento, podrá diseñar algunas de las páginas principales de la aplicación. Por ejemplo, aprenderá a diseñar una pantalla de presentación, una página de productos y una página de lista de productos. También accederemos a los datos almacenados en la lista de SharePoint a través del control galería de Power Apps.

Abrir una aplicación en blanco

Vaya a la página principal de Power Apps y seleccione Crear en el menú de la izquierda. Seleccione Aplicación en blanco y, a continuación, seleccione Crear en Aplicación de lienzo en blanco.
Especifique un nombre para la aplicación; por ejemplo, Easy-Sales. Seleccione Teléfono y, a continuación, seleccione Crear.

Power Apps Studio crea una aplicación en blanco para teléfonos.

Nota:

Aunque puedes diseñar una aplicación desde cero para varios dispositivos, este tema se centra en diseñar una aplicación para teléfonos.
Si se abre el cuadro de diálogo Bienvenido a Power Apps Studio , seleccione Omitir.

Conexión a datos

Para incluir datos en Power Apps, debe conectarse a los datos mediante los conectores de la aplicación. Dado que hemos almacenado todos los datos en una lista de SharePoint , seleccionaremos SharePoint como uno de los conectores.

A la izquierda de Power Apps Studio, seleccione la opción Datos .
Después de abrir el panel Datos , seleccione el botón Agregar datos para conectarse a los datos.
En la ventana Seleccionar un origen de datos, expanda la sección Conectores y seleccione la opción SharePoint .
En el ejercicio anterior, ya hemos creado una conexión. Seleccione la conexión creada para agregar los datos a la aplicación. Seleccione el sitio de SharePoint que se creó con el nombre Easy Sales.
Después de seleccionar el sitio de SharePoint de Easy Sales , se muestran todas las listas creadas en ese sitio. A continuación, seleccione la lista de SharePoint creada con respecto a la aplicación y haga clic en Conectar.
Todos los datos necesarios están conectados y listos para usarse en la aplicación. Ahora puede empezar a compilar la aplicación.

Creación de la pantalla de presentación

Seleccione la opción Vista de árbol a la izquierda de Power Apps Studio. Ya debería tener una pantalla en blanco en Power Apps Studio; si no es así, en la pestaña Inicio , seleccione la flecha abajo situada junto a Nueva pantalla que abre la lista de tipos de pantalla. A continuación, seleccione En blanco para crear una pantalla en blanco.
Cambie el nombre de la pantalla a Pantalla de presentación seleccionando el icono de tres puntos (...) presente junto al nombre de la pantalla y seleccionando la opción Cambiar nombre .
Seleccione la pantalla recién creada para cambiar sus propiedades en la pestaña Propiedades del lado derecho de la pantalla.
Seleccione la lista desplegable situada junto a la propiedad Imagen de fondo para agregar una imagen a la pantalla. Seleccione + Agregar un archivo de imagen para seleccionar el archivo de logotipo descargado.
Establezca la posición de la imagen en Ajustar para que toda la imagen se ajuste al tamaño especificado. La opción Ajustar escala la imagen proporcionalmente y no recorta la imagen.
En la pestaña Insertar , expanda la lista desplegable Entrada y seleccione Temporizador. A continuación, arrastre el botón en la pantalla y colóquelo donde quiera.
Para editar algunas de las propiedades del temporizador, puede usar la lista desplegable Propiedad en la esquina superior izquierda o usar el panel Propiedades . Establezca las siguientes propiedades:
- AutoStart: true
- Duración: 2000
- Visible: false
  
  Nota:
  
  De forma predeterminada, la duración se mide en milisegundos. Desde 1 segundo = 1000 milisegundos, especificamos 2000 como el valor de la duración.
Queremos que la pantalla de presentación sea visible durante solo dos segundos y, a continuación, realice la transición a la página principal. Cree una pantalla en blanco como hicimos en el paso anterior y cámbiela como página principal. Más adelante, seleccione el botón del temporizador agregado a la pantalla de presentación y configure la propiedad OnTimerEnd . Reemplace false por el siguiente contenido:
```
Navigate('Home Page',ScreenTransition.Fade)
```
Para guardar la aplicación, vaya a Guardar archivo>. A continuación, seleccione la opción Nube y seleccione Guardar.

Creación de la página principal

Seleccione la página principal creada anteriormente. Para insertar cuatro botones, vaya a la pestaña Insertar y seleccione la opción Botón para agregar botones a la pantalla. Ajuste el tamaño y la posición de estos botones según sea necesario. Cámbielos como Sofas_button, Chairs_button, Tables_button y Carpets_button, respectivamente.
Cambie el texto para mostrar de los botones para indicar categorías de productos como Sofás, Sillas, Mesas y Alfombras.
Usaremos estos botones para navegar a la lista de productos de varias categorías. Para ello, es necesario filtrar los productos de la lista de SharePoint en función de la categoría de producto. Cree dos nuevas pantallas en blanco y renómbrelas Productos y Alfombras.
Seleccione el botón Sofas_button recién creado y configure la propiedad OnSelect . Después de seleccionar el botón, debe llevarnos a la página de lista de productos creada en el paso anterior. Reemplace false por el código siguiente:
```
Navigate(Products,ScreenTransition.Cover, {ID:1});
```
Nota:

El identificador es una variable de contexto con algún valor asignado. Este valor se pasa a la página de destino mencionada en la función Navigate . El valor asignado a la variable filtra los productos en función de categoría de producto.
Repita el mismo procedimiento para los otros tres botones. De nuevo, asegúrese de proporcionar nombres de pantalla adecuados en la función Navigate ; Por ejemplo, para configurar la propiedad OnSelect de los botones Sillas, Tablas y Alfombras , use la función Navigate como se indica a continuación:
```
Navigate(Products,ScreenTransition.Cover, {ID:2});
```
```
Navigate(Products,ScreenTransition.Cover, {ID:3});
```
```
Navigate(Carpets,ScreenTransition.Cover)
```
Sugerencia

Para guardar el progreso, seleccione la pestaña Archivo en la parte superior y seleccione la opción Guardar . También puede usar Ctrl+S para guardar el progreso.
Nota:

La sintaxis predeterminada de la función Navigate es: Navigate(Screen [, Transition [, UpdateContextRecord]])
- Pantalla: Obligatorio. Pantalla que se va a mostrar.
- Transición: opcional. La transición visual usada entre la pantalla actual y la pantalla siguiente. El valor predeterminado es None.
- UpdateContextRecord: opcional. Un registro que contiene el nombre de al menos una columna y un valor para cada columna. Este registro actualiza las variables de contexto de la nueva pantalla como si se pasara a la función UpdateContext.
Sugerencia

Puede probar la aplicación presionando la tecla F5 en el teclado o haciendo clic en el botón Reproducir en la esquina superior derecha de Power Apps Studio.

Uso del control Galería

Ahora que hemos agregado las categorías de productos, mostraremos la lista de productos de cada categoría. En Power Apps, usamos el control Galería para ver un registro de datos.

En la pantalla Productos , en la pestaña Insertar , seleccione Galería>vertical para agregar el control Galería a la pantalla.
Cambie el nombre a Gallery_products. En la pestaña Propiedades del panel izquierdo, configure la propiedad Items de la siguiente manera:
```
If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))
```
Filtramos los productos almacenados en la lista de SharePoint en función de la categoría de producto. Las variables de contexto se usan para el proceso de filtrado.
Configure la propiedadCampos de la > en el panel Propiedades seleccionando Editar:
- Asigne el precio al encabezado Subtitle1 .
- Asigne el título al encabezado Title1 .
Al asignar los campos anteriores, observará que los datos se reflejan en la Galería.
Ajuste el tamaño del Gallery_products según sea necesario. Para agregar imageLink al encabezado Image1 , seleccione la imagen de la galería y configure la propiedad Image en la pestaña Propiedad agregando esta línea de código:
```
ThisItem.ImageLink
```
Ahora, vamos a insertar una etiqueta en la parte superior de la pantalla seleccionando la opción Etiqueta . A continuación, personalice la posición, el color y la presentación de texto como se muestra en la ilustración:
Agregue un icono Atrás sobre la etiqueta agregada anteriormente para ayudar al usuario a navegar a la página principal cuando sea necesario. Para agregar el icono Atrás , expanda la lista desplegable Iconos y seleccione el icono Atrás .
Coloque el icono Atrás correctamente y cambie su color de presentación, si es necesario. Configure su propiedad OnSelect agregando lo siguiente:
```
Navigate('Home Page',ScreenTransition.Cover)
```
Siga el mismo procedimiento para la página Alfombras . Configure la propiedad Items de la galería agregada a la página Alfombras de la siguiente manera:
```
Filter('Easy Sales',ProductCategory = "Carpet")
```
Sugerencia

Para guardar el progreso, seleccione la pestaña Archivo en la parte superior y seleccione la opción Guardar . También puede usar Ctrl+S para guardar el progreso.

Después de implementar los pasos anteriores, este es el aspecto que debe tener la aplicación. La aplicación incluirá una excelente pantalla de presentación, una página principal y un inventario de productos para examinar los productos.

Comentarios

¿Le ha resultado útil esta página?