Crear una aplicación de lienzo integrada con SharePoint desde cero para ver, editar, agregar y eliminar elementos en una lista usando Microsoft Lists

  • Artículo

En este artículo de escenario, aprenderá a crear una aplicación con la funcionalidad de formularios de SharePoint desde cero. La aplicación demostrará cómo ver, editar, agregar y eliminar elementos de lista de SharePoint utilizando una aplicación de lienzo sin visitar un sitio de .

Nota

Para obtener más detalles sobre los diferentes escenarios para trabajar con formularios de SharePoint y ejemplos adicionales, vaya a Descripción general de los escenarios de SharePoint.

Requisitos previos

  • Debe tener acceso a un sitio de SharePoint para crear una lista y elementos de lista.
  • Debes tener conocimientos sobre la creación y preparación de listas.

Detalles del escenario

El propósito de este escenario es demostrar cómo crear una aplicación de lienzo desde cero para trabajar con una lista. Al final de esta demostración de ejemplo, podrá realizar las siguientes tareas desde la aplicación de lienzo sin necesidad de acceder a la lista o su artículo:

  • Ver todos los elementos de la lista.
  • Buscar elementos en una lista según el valor de texto de una columna específica.
  • Seleccionar un elemento de lista.
  • Editar un elemento de lista.
  • Crear un nuevo elemento de lista.
  • Eliminar un elemento de lista.

El escenario es una ilustración básica de las capacidades de la aplicación de lienzo cuando se integra con SharePoint. Para mejorar el diseño con un diseño mejorado o pantallas adicionales, consulte los siguientes artículos:

Importante

El ejemplo de este escenario crea una aplicación de muestra para ver, editar, agregar y eliminar elementos de lista. Puede cambiar el enfoque para personalizar la aplicación de manera diferente en función de sus elecciones o el objetivo comercial. Cuando personalice su aplicación con nombres personalizados para controles, asegúrese de utilizar los nombres de control correctos en la fórmula cuando siga los pasos de este ejemplo.

Ejemplo

Este ejemplo de escenario le guía a través de los pasos para crear una aplicación y conectarla a una lista para ver, editar, agregar y eliminar elementos de lista.

Paso 1: crear una lista usando Microsoft Lists

Crear una lista con columnas y elementos de lista. En este escenario, hemos utilizado una lista con las siguientes columnas y elementos de lista:

Estructura de lista.

Nota

Ambas columnas son Una sola línea de texto.

Paso 2: Crear una aplicación de lienzo en blanco

Cree una aplicación de lienzo en blanco.

Paso 3: Conectar la aplicación a SharePoint

  1. Seleccione Orígenes de datos en el panel izquierdo.

    Seleccionar orígenes de datos.

  2. Seleccione el origen de datos SharePoint. También puede buscar el nombre en el cuadro de búsqueda.

    Seleccionar origen de datos de SharePoint.

  3. Seleccione Agregar una conexión.

    Agregar la conexión de SharePoint.

  4. Seleccione un tipo de una conexión. Puede conectarse a SharePoint Online o a un sitio local de SharePoint con una puerta de enlace de datos cuando esté configurado. Este escenario se conecta a un sitio de SharePoint Online.

    Crear una conexión a SharePoint.

  5. Seleccione el sitio de SharePoint que tiene la lista que creó anteriormente.

    Seleccionar el sitio de SharePoint.

  6. Seleccione la lista que ha creado. Este escenario usa una lista llamada Formas.

    Seleccionar lista.

  7. Seleccione Conectar. El origen de datos se agrega a la aplicación.

    Origen de datos agregado.

Paso 4: Agregar la tabla de datos para ver los elementos de lista

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

    Seleccionar insertar.

  2. Expanda Diseño.

  3. Seleccione Tabla de datos.

    Seleccionar la tabla de datos.

  4. Seleccione el origen de datos como la conexión a SharePoint.

    Seleccionar el origen de la tabla de datos.

  5. Mueva la tabla de datos hacia la parte inferior derecha dentro de la pantalla para dejar espacio para componentes adicionales.

    Mover la tabla de datos.

Paso 5: Agregar la capacidad de buscar y seleccionar un elemento

  1. Inserte un control Entrada de texto al lienzo y muévalo bajo la lista desplegable.

    Insertar un control Entrada de texto.

  2. Actualice la propiedad Predeterminado del cuadro de búsqueda al valor Buscar por forma.

    Propiedad predeterminada para text input.

  3. Inserte un control Cuadro de lista en el lienzo y muévalo debajo del control Entrada de texto agregado en el paso anterior.

    Insertar un control de cuadro de lista.

  4. Desde el lado derecho de la pantalla de Studio, configure la propiedad Items del control de cuadro de lista para la lista Formularios de este ejemplo.

    Elementos de cuadro de lista.

  5. Establezca la propiedad Valor para el control de cuadro de lista Forma en vez de Color para este ejemplo.

    Valor de cuadro de lista.

  6. Actualice la propiedad Items del cuadro de lista agregado en el paso anterior a la siguiente fórmula:

    Filter([@Shapes], StartsWith(Shape, TextInput1.Text))

    Propiedad de elementos del cuadro de búsqueda.

    La fórmula contiene las funciones siguientes:

    • Filter(): se utiliza en esta fórmula para filtrar elementos en el cuadro de lista según los parámetros definidos. [@Shapes] en esta función define qué origen de datos filtrar.
    • StartsWith(): se usa en esta fórmula para filtrar los elementos de lista según la columna Forma que comienzan con los caracteres introducidos en el control TextInput1 agregado anteriormente.

Paso 6: Agregar la capacidad para editar el elemento

  1. Inserte el control Editar formulario.

    Agregar Editar formulario.

  2. Desde el lado derecho de la pantalla de Studio, configure la propiedad origen de datos del control Editar formulario como Formas.

    Origen de datos de Editar formulario.

  3. Seleccione Editar campos para el control Editar formulario y elimine cualquier otro campo, como Datos adjuntos, si está presente.

    Eliminar campo de archivos adjuntos.

  4. Asegúrese de que los campos Forma y Color están presentes. Si no, agréguelos usando Agregar campo.

    Agregar campos de forma y color.

  5. Reorganice el diseño de la pantalla para garantizar que el control Editar formulario es visible y no se superpone con otros controles.

    Pantalla reorganizada.

  6. Establezca la propiedad OnSelect del control de cuadro de lista en la función siguiente:

    Set(TextSelected,1)

    OnSelect para cuadro de lista.

    La función Set() establece una nueva variable llamada TextSelected en el valor de 1 cuando se selecciona un valor en el cuadro de lista. La variable TextSelected se usa en este escenario como una bandera para controlar las acciones y el comportamiento de las capacidades de agregar, editar y eliminar, como verá en las siguientes secciones.

  7. Establezca la propiedad Item del control Editar formulario en la siguiente fórmula:

    If(TextSelected=1,ListBox1.Selected,DataTable1.Selected)

    Propiedad de elemento para la edición de formulario.

    La función If() comprueba primero si el valor de la variable TextSelected es 1 o no. Si es así, el formulario de edición muestra el elemento seleccionado del cuadro de lista. Si no es así, el formulario de edición muestra el elemento seleccionado de la tabla de datos.

  8. Inserte un botón.

    Insertar un botón.

  9. Desde el lado derecho de la pantalla de Studio, configure la propiedad Text del botón agregado en el paso anterior como Guardar.

    Botón Guardar.

  10. Establezca la propiedad OnSelect del botón Guardar en la fórmula siguiente:

    SubmitForm(Form1);
Set(TextSelected,0)

    Propiedad OnSelect para el botón Guardar.

    La fórmula contiene las funciones siguientes:

    • SubmitForm(): se utiliza en esta fórmula para enviar el formulario de edición y guardar los valores en la lista.
    • Set(): reinicia la variable TextSelected de nuevo en o para que se pueda seleccionar un nuevo elemento del cuadro de lista.

  11. Inserte un control de Etiqueta de texto.

    Etiqueta de texto.

  12. Actualice la propiedad Text para el control Etiqueta de texto agregado en el paso anterior en Para editar los valores de un elemento, selecciónelo en la tabla o busque.

    Texto de la etiqueta actualizado.

  13. Reorganice los controles en la pantalla para ordenar los controles de edición.

    Reorganizar los controles de edición.

Paso 7: Agregar la capacidad para agregar el elemento

  1. Inserte un botón.

  2. Reorganice los controles en la pantalla para asegurarse de que el botón esté visible.

  3. Actualice la propiedad Text del botón agregado en el paso anterior en Agregar.

  4. Establezca la propiedad OnSelect del botón Agregar en la fórmula siguiente:

    NewForm(Form1)

    Propiedad OnSelect para el botón Agregar.

    La función NewForm() borra el control Editar formulario agregado en el formulario llamado Formulario1 para que pueda agregar un nuevo elemento de lista.

Paso 8: Agregar la capacidad para eliminar el elemento

  1. Inserte un botón.

  2. Mueva el botón agregado en el paso anterior debajo del botón Guardar.

  3. Actualice la propiedad Text del botón agregado en el paso anterior en Eliminar.

  4. Establezca la propiedad OnSelect del botón Eliminar en la fórmula siguiente:

    Remove([@Shapes], If(TextSelected=1,ListBox1.Selected,DataTable1.Selected));
Set(TextSelected,0)

    Propiedad OnSelect para el botón Eliminar.

    La fórmula contiene las funciones siguientes:

    • Remove(): se usa en esta fórmula para borrar el elemento de lista seleccionado.
    • If(): comprueba primero si el valor de la variable TextSelected es 1 o no. Si es así, el botón Eliminar elimina el elemento seleccionado del cuadro de lista. Si no es así, el botón Eliminar elimina el elemento seleccionado del control de tabla de datos.
    • Set(): reinicia la variable TextSelected de nuevo en o para que se pueda seleccionar un nuevo elemento del cuadro de lista.

Ahora que tiene todos los componentes de la aplicación configurados, asegúrese de que la pantalla se vea como el siguiente ejemplo:

Aplicación después de agregar todos los componentes.

Paso 9: Guardar la aplicación

Ahora que la aplicación tiene la funcionalidad de ver, editar, agregar y eliminar agregada, guarde la aplicación.

  1. Seleccione el menú Archivo.

  2. Seleccione Guardar.

  3. Al guardar por primera vez, la opción Guardar le lleva a Guardar como. Seleccione Guardar para guardar la aplicación en la nube.

    Guardar la aplicación.

  4. Cierre el Power Apps Studio.

Paso 10: Probar la aplicación

  1. Vaya a Power Apps.

  2. Seleccione Aplicaciones.

  3. Seleccione la aplicación creada.

    Reproduzca la aplicación.

  4. Pruebe los compoenentes de la aplicación.

    Reproducir la animación de la aplicación.

    Sugerencia

    Puede obtener una vista previa rápida del comportamiento de un componente utilizando la tecla Alt y haciendo clic con el botón izquierdo al editar la aplicación dentro de Power Apps Studio.

    Por ejemplo, en lugar de seleccionar Vista previa de la aplicación desde la parte superior derecha, o F5 desde el teclado que ejecuta la aplicación en vista previa, mantenga Alt presionada y, a continuación, seleccione una fila de la tabla de datos para cambiar el control Editar formulario a la fila seleccionada como si la aplicación se estuviera ejecutando en vista previa.

    Alt + clic con el botón izquierdo en el menú desplegable para obtener una vista previa.

    Además, mantenga presionada la tecla Alt para continuar ejecutando la vista previa en Power Apps Studio. Por ejemplo, seleccione varios componentes para diferentes acciones o comprobaciones.

Pasos siguientes

Si edita la apilcación, debe publicar los cambios para que los demás los vean.

Una vez que la aplicación esté lista para usarse, comparta la aplicación.

Vea 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).