Lista de SharePoint como origen de datos Parte 2 (de 3): Vamos a crear una Power App!

Esta es una traducción de inglés a español de mi artículo de LinkedIn publicado el 21 de abril de 2021 (SharePoint List as Data Source Part 2 (of 3) – Let’s Make a Power App! | LinkedIn)

Gracias Ana Ines Urrutia de Souza (@Ana Inés Urrutia de Souza | LinkedIn) por su evaluación y editar sugerencias ya que mi español es no bueno.

El 12 de abril compartí un artículo que narra cómo configurado una lista de SharePoint como fuente de datos para una Power App ((Power App Building with SharePoint List as data source – Part 1 | LinkedIn). Este es el artículo de seguimiento donde caminaré a través del proceso de creación de Power App.

Con la lista de SharePoint creada en el artículo mencionado anteriormente, crearemos una aplicación de seguimiento de actividad de la comunidad (Community Activity Tracking app). He añadido entradas a la lista para empezar. Y dentro de la propia lista de SharePoint podemos iniciar el proceso de creación de aplicaciones. Haga clic en Power Apps (en la cinta de opciones) y seleccione Create una aplicación. 

Una vez que haya hecho clic en la opción Crear una aplicación, se le pedirá que asigne un nombre a la aplicación. Usaremos el nombre "Community Activity Tracker" para la aplicación. Una vez que la aplicación es "Creada", Power Apps Studio guarda automáticamente la aplicación por ti usando el nombre que decidiste usar.

 Nota: dado que estamos iniciando el proceso de creación de la aplicación desde la lista de SharePoint, Power Apps Studio asoció (y conectó) automáticamente esta lista de SharePoint como origen de datos de la aplicación. 

Power Apps Studio ha creado una aplicación de tres pantallas con la que trabajar. Las tres pantallas son: BrowseScreen1 que es una vista de resumen de los datos; DetailScreen1 – información detallada de cada elemento de línea de datos del origen de datos (nuestra lista de SharePoint); y EditScreen1 – esto permite al usuario la capacidad de editar datos por campo.

 Hay varias otras características de Power Apps Studio agregadas a la aplicación. Aunque no voy a pasar por aquellos que quiero señalar el botón vista previa (Preview Button ). Esto permite al creador de aplicaciones probar y obtener una vista previa de la aplicación. Si eres como yo, usarás mucho el botón vista previa (Preview Button).

Al abrir Detailscreen1 y Detailform1 vemos todos los campos de datos de partidas de línea asociados a cada actividad. En la columna de extrema derecha de esta pantalla se encuentra la sección Propiedades (Properties) de la pantalla. Puede ver que el origen de datos aparece como Actividad comunitaria 2 (Community Activity 2) que el nombre de la lista de SharePoint que estamos usando como origen de datos. Si faltan campos de datos o si desea eliminar campos de datos de esta pantalla simplemente haga clic en Editar (Edit) campos. Esto proporcionará una lista de todos los campos y le permitirá personalizar a medida que se sienta necesario.

De forma similar al aspecto de DetailScreen1, EditScreen1 proporciona al usuario la capacidad de editar información dentro de cada campo de datos. Me gustaría señalar los campos de Actividad (Activity) y Trabajo Comunitario (CommunityWork). Como puede recordar cuando creamos la lista de SharePoint, estos campos se configuraron con funcionalidad desplegable. Esta misma funcionalidad desplegable y texto utilizado pasado a nuestra aplicación.

Desde BrowseScreen queremos dar al usuario final la capacidad de filtrar por actividad específica de la comunidad. Es decir, proporcionar la capacidad de mirar todas las entradas que son un tipo específico de actividad de la comunidad - entrada de blog, participación de voz, publicación vlog, respuesta del foro. Para ello vamos a agregar un cuadro desplegable y agregar una instrucción IF/Then/Filter. Para ello vamos a añadir primero un poco de espacio en la pantalla de exploración mediante (BrowseScreen) la eliminación del texto de búsqueda archivado (Search).

 En primer lugar, haga clic en BrowseGallery1. A continuación, haga clic en los puntos suspensivos de TextSearchBox1 y haga clic en eliminar.

Tenga en cuenta que cuando eliminemos el cuadro Search box, perderemos los datos en BrowseGallery. Esto se debe a que BrowseGallery está vinculado al cuadro Search box: haga referencia a la barra de funciones de la diapositiva siguiente. Podemos resolver esto fácilmente haciendo lo siguiente. En primer lugar, vamos a eliminar la tarjeta SearchIcon1 - haga clic en SearchIcon1 y luego elipsis y luego eliminar. En segundo lugar, haga clic en BrowseGalery1 y elimine el texto dentro de la barra de funciones. En tercer lugar, en la sección Propiedades, haga clic en el menú desplegable Origen de datos y vuelva a seleccionar Actividad de comunidad2 (Community Activity 2). Sus datos deben estar de vuelta en BrowseGallery1.

En este momento debemos agregar la lista de SharePoint actividades 2 (Activities 2) como un origen de datos adicional para la aplicación. Esta lista se aprovechará cuando construyamos nuestra instrucción If/Then/Filter. Para agregar este origen de datos (data source) primero haga clic en el icono del origen de datos en la columna izquierda de la pantalla. A continuación, haga clic en "+Agregar datos" (+Add Data) y escriba SharePoint en el campo de texto y haga clic en SharePoint (NO sitios de SharePoint{SharePointSites})

A continuación, haga clic en el nombre del nombre del inquilino (tenant name). Esto extraerá el vínculo a su sitio de SharePoint: conéctese al sitio de SharePoint.

Una vez conectado al sitio de SharePoint, se representará una lista de todos los archivos disponibles (dentro de ese sitio). Seleccione el archivo (origen de datos) que desea asociar a la aplicación. En esto elegiremos el archivo "Activites2". Haga clic en el cuadro situado junto al nombre del archivo y, a continuación, haga clic en Conectar. 

El segundo origen de datos ahora está conectado. 

Ahora que ambas listas de SharePoint están conectadas a la aplicación vamos a agregar el cuadro desplegable (Dropdown box). Dentro de la cinta de opciones, haga clic en Insertar y, a continuación, en desplegable. Power Apps Studio agregará un cuadro desplegable a la aplicación, así como agregará una tarjeta desplegable dentro de la estructura de vista de árbol (Tree View) de la aplicación (columna izquierda)

Con el menú desplegable añadido ahora necesitamos agregar funcionalidad a esta herramienta. En primer lugar, queremos asociar el origen de datos de Activities2 a la lista desplegable.

 1)    Haga clic en Desplegable1 (Dropdown1) en la vista de árbol (Tree View).

2)    Borrar el texto en la barra de herramientas de la función : el texto lee DropdownSample.

3)    Comience a escribir Activities2 en la barra de herramientas: Power Studio representará una lista; haga clic en Activites2.

Activites2 SharePoint List ahora está asociado con el menú desplegable que necesitará para identificar la columna (de la lista de SharePoint) que necesita representar. En la sección Propiedades (Properties section) de la pantalla (columna derecha) haga clic en el menú desplegable Valor y haga clic en Título. El título es el nombre de la columna a la que desea hacer referencia en el menú desplegable. Haga clic en la vista previa (Preview) para confirmar que el menú desplegable contiene la información de la lista de SharePoint de Activities2.

Ahora comienza la diversión. Queremos que el cuadro desplegable filtre BrowseGallery en función de los criterios seleccionados. Para ello, crearemos una instrucción If/Then que incluye la capacidad de texto Filtrar (Filter). Para empezar, haga clic en BrowseGallery1. Escribiremos la instrucción If/Then en la barra de funciones. 

Nota: a medida que empecemos a escribir la instrucción IF/Then/Filter, los datos de BrowseGallery desaparecerán pero solo temporalmente. Este es un comportamiento esperado, no te asustes como lo hice la primera vez que hice esto. 

La declaración que vamos a escribir es la siguiente:

 If(Dropdown1.Selected.Title = “All”, ‘Community Activity 2’, Filter(‘Community Activity 2’, CommunityWork.Value = Dropdown1.Selected.Title))

¿Qué significa esto?

1)    If(Dropdown1.Selected.Title = "All", 'Community Activity 2' - si todo (“All”) está seleccionado en el menú desplegable, la Galería representará todas las actividades dentro de la Lista de SharePoint actividad comunitaria 2 (Community Actitivity 2 SharePoint List)

2)    Filter('Community Activity 2', CommunityWork.Value = Dropdown1.Selected.Title)) – si se selecciona algo distinto de "todo" en el menú desplegable, filtrar la galería en función de lo seleccionado es el mismo que la actividad dentro de la columna CommunityWork de la lista de SharePoint de actividad comunitaria 2 ((Community Actitivity 2 SharePoint List)

Toma un poco de tiempo pensar a través de la lógica, pero espero que mi explicación anterior ayude en el proceso de pensamiento.

Aunque esta es una aplicación relativamente básica, los escenarios de uso son numerosos , en mi opinión. Algunos ejemplos son:

 Caso de uso empresarial:

 1)    Seguimiento del inventario empresarial: a medida que aumentan los datos, puede vincularlo a Power BI para ayudar a comprender el uso y ayudar con la presupuestación anual.

2)    Actividades/planificación de proyectos de miembros del grupo/equipo: estructura el menú desplegable en función de los nombres de los miembros del equipo para comprender quién está haciendo qué en el proceso. Ata esto a Power Automate para enviar notificaciones de equipo a medida que se agrega o completa el trabajo.

 Caso de uso personal:

1)    Fitness – aprovechar la estructura de esta aplicación para entender y administrar sus actividades y objetivos de fitness.

2)    Cataloga tus coleccionables/recetas favoritas/ etc.

3)    Administra tus expensas

 Espero que haya encontrado útil esta explicación paso a paso de la creación de aplicaciones eléctricas. No dudes en enviarme un mensaje si te quedas atascado o tienes preguntas. ¡Gracias por leer e ir a crear algo!