Laboratorio de práctica 6: Formularios

En este laboratorio, usará formularios para crear y editar registros en un origen de datos.

Aprendizaje

  • Cómo agregar pantallas
  • Cómo navegar entre pantallas
  • Cómo usar un formulario para crear un registro en un origen de datos
  • Cómo usar un formulario para editar un registro en un origen de datos
  • Cómo eliminar un registro de un origen de datos
  • Cómo vincular un formulario a una galería

Pasos de alto nivel del laboratorio

  • Crear nuevas pantallas
  • Vaya a una pantalla cuando se seleccione un registro en una galería
  • Navegar entre pantallas
  • Mostrar un registro con un formulario
  • Eliminar un registro
  • Editar un registro con un formulario
  • Crear un nuevo registro con un formulario

Requisitos previos

  • Debe de haber completado la práctica Laboratorio 5: Datos externos

Pasos detallados

Ejercicio 1: Adición de pantallas y navegación

Tarea 1.1: Edición de la aplicación

  1. Vaya al portal de Power Apps Maker https://make.powerapps.com.

  2. Asegúrese de que está en el entorno Dev One.

  3. Seleccione la pestaña Aplicaciones en el menú de navegación de la izquierda.

  4. Seleccione la aplicación Solicitud de reserva, los comandos (…) y Editar > Editar en una pestaña nueva.

Tarea 1.2: Agregar pantallas

  1. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  2. En la barra de acciones de Power Apps Studio, seleccione Nueva pantalla.

    Captura de pantalla de la nueva pantalla.

  3. Seleccione En blanco.

  4. Cambie el nombre de la pantalla a EditScreen.

  5. En la barra de acciones de Power Apps Studio, seleccione Nueva pantalla.

  6. Seleccione Encabezado y pie de página.

  7. Cambie el nombre de la pantalla a DetailScreen.

Tarea 1.3: Agregar navegación

  1. En la Vista de árbol, expanda BookingRequestList en MainScreen.

  2. Seleccione NextArrow en BookingRequestList.

  3. Establezca la propiedad OnSelect de NextArrow en la barra de fórmulas como:

     Collect(colRequests, ThisItem);Navigate(DetailScreen, ScreenTransition.Cover);

  4. Seleccione EditarScreen.

  5. En el menú de creación de aplicaciones, seleccione Insertar (+).

  6. Expanda Iconos.

  7. Seleccione Flecha de retroceso.

  8. Establezca la propiedad OnSelect del icono en:

     Back()

  9. En la vista de árbol, seleccione el icono y seleccione Comandos (…) y seleccione Copiar.

  10. Expanda DetailScreen.

  11. Expanda ScreenContainer.

  12. Seleccione HeaderContainer y seleccione Comandos (…) y Pegar.

Ejercicio 2: Pantalla Detalles

Tarea 2.1: Agregar formulario para mostrar

  1. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  2. Expanda DetailScreen.

  3. Expanda ScreenContainer1.

  4. Seleccione MainContainer1.

  5. En el menú de creación de aplicaciones, seleccione Insertar (+).

  6. Expanda Entrada.

  7. Seleccione Mostrar formulario.

    Captura de pantalla de la adición de un formulario para mostrar.

  8. En las propiedades de FormViewer, seleccione Solicitudes de reserva para Origen de datos.

  9. Seleccione 8 seleccionados junto a Campos.

    Captura de pantalla de los campos de formulario predeterminados.

  10. Agregar o eliminar los campos para que se organicen en el orden siguiente:

    1. Nombre de la mascota
    2. Nombre del propietario
    3. Correo electrónico del propietario
    4. Fecha de inicio
    5. Fecha de finalización
    6. Decisión
    7. Costee

    Captura de pantalla de la ordenación de los campos del formulario.

  11. Cierre el panel Campos.

  12. Establezca la propiedad Item del control del visor de formularios en la barra de fórmulas:

     BookingRequestList.Selected

Tarea 2.2: Agregar etiqueta

  1. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  2. Expanda DetailScreen.

  3. Expanda ScreenContainer1.

  4. Seleccione FooterContainer1.

  5. Seleccione + en el contenedor Pie de página.

    Captura de pantalla de cómo agregar un control al contenedor.

  6. Seleccione Etiqueta de texto

  7. Establezca la propiedad Text de la etiqueta en:

     BookingRequestList.Selected.'Pet Name'

Tarea 2.3: agregar botón Eliminar

  1. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  2. Expanda DetailScreen.

  3. Expanda ScreenContainer1.

  4. Seleccione FooterContainer1.

  5. En el menú de creación de aplicaciones, seleccione Insertar (+).

  6. Seleccione Botón.

  7. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  8. Cambie el nombre del botón a Deletebtn.

  9. Establezca la propiedad Text del botón en:

     "Delete"

  10. Establezca la propiedad OnSelect del botón como:

     Remove('Booking Requests', BookingRequestList.Selected); Back();

Ejercicio 3: Editar pantalla

Tarea 3.1: Agregar formulario de edición

  1. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  2. Seleccione EditarScreen.

  3. En el menú de creación de aplicaciones, seleccione Insertar (+).

  4. Seleccione Editar formulario.

  5. En las propiedades del formulario, seleccione Solicitudes de reserva para Origen de datos.

  6. Seleccione 8 seleccionados junto a Campos.

  7. Agregar o eliminar los campos para que se organicen en el orden siguiente:

    1. Nombre de la mascota
    2. Nombre del propietario
    3. Correo electrónico del propietario
    4. Fecha de inicio
    5. Fecha de finalización
    6. Costee

  8. Cierre el panel Campos.

  9. Establezca la propiedad Item del control de formulario en:

     BookingRequestList.Selected

  10. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  11. Cambie el nombre del formulario a BookingRequestForm.

  12. Establezca las propiedades del formulario de la manera siguiente:

    1. X=0
    2. Y=125
    3. Altura=500
    4. Ancho=Parent.Width
    5. Columnas=1
    6. Diseño=Horizontal

    Captura de pantalla del formulario de solicitud de reserva configurado.

Tarea 3.2: Agregar botón Enviar

  1. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  2. Seleccione EditarScreen.

  3. En el menú de creación de aplicaciones, seleccione Insertar (+).

  4. Seleccione Botón.

  5. Arrastre el botón debajo del formulario.

  6. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  7. Cambie el nombre del botón a Submitbtn.

  8. Establezca la propiedad Text del botón en:

     "Submit"

  9. Establezca la propiedad OnSelect del botón como:

     SubmitForm(BookingRequestForm)

  10. Seleccione BookingRequestForm.

  11. Establezca la propiedad OnSuccess del formulario en:

     Navigate(MainScreen, ScreenTransition.UnCover)

Tarea 3.3: Agregar navegación a la pantalla de edición

  1. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  2. Expanda DetailScreen.

  3. Expanda ScreenContainer.

  4. Seleccione HeaderContainer.

  5. En el menú de creación de aplicaciones, seleccione Insertar (+).

  6. Expanda Iconos.

  7. Seleccione Editar.

  8. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  9. Cambie el nombre del icono a EditIcon.

  10. Establezca la propiedad OnSelect del icono en:

     Navigate(EditScreen, ScreenTransition.Cover)

Tarea 3.4: Nuevo registro

  1. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  2. Seleccione MainScreen.

  3. En el menú de creación de aplicaciones, seleccione Insertar (+).

  4. Expanda Iconos.

  5. Seleccione Agregar.

  6. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  7. Cambie el nombre del icono a NewIcon.

  8. Establezca las propiedades del icono de la manera siguiente:

    1. X=0
    2. Y=0
    3. Altura=80
    4. Ancho=80
    5. Color=Color.White

  9. Establezca la propiedad OnSelect del icono en:

     NewForm(BookingRequestForm);Navigate(EditScreen, ScreenTransition.Cover)

  10. Seleccione Guardar en la parte superior derecha de Power Apps Studio.

  11. Seleccione el botón <- Atrás en la parte superior izquierda de la barra de comandos y seleccione Salir para salir de la aplicación.