Ejercicio: Usar un script de cliente para ocultar una sección de formulario

  • 9 minutos

En este ejercicio, usa un script de cliente para implementar el requisito empresarial de ocultar la sección Estado cuando no se proporciona una fecha de inicio del proyecto o en el futuro.

Importante

Use un entorno de prueba con Microsoft Dataverse aprovisionado y las aplicaciones de ejemplo habilitadas. Si no dispone de ninguno, puede suscribirse al plan de la comunidad.

Tarea 1: Preparar la solución con el formulario

En esta tarea, crea una solución, agregará una tabla existente a la solución y preparará el formulario principal de la tabla que agregó a la solución.

  1. Navegue al Power Apps Maker Portal y asegúrese de que se encuentra en el entorno correcto que tiene habilitadas las aplicaciones de ejemplo.

    Captura de pantalla del nombre del entorno

  2. Seleccione Soluciones y luego seleccione + Nueva solución.

  3. Introduzca Mejoras del desafío de innovación como Nombre para mostrar, seleccione CDS Default Publisher como Editor y luego seleccione Crear.

    Captura de pantalla de las propiedades de la nueva solución

  4. Deben abrirse las Mejoras del desafío de innovación que ha creado.

  5. Seleccione + Agregar existente y, a continuación, Tabla.

  6. Introduzca un equipo en el cuadro de texto de búsqueda, seleccione Proyecto de equipo y luego seleccione Siguiente.

    Nota

    Si no puede localizar la tabla Proyecto de equipo, es posible que no tenga las aplicaciones de ejemplo en su entorno. Seleccione otro entorno o cree uno nuevo con las aplicaciones de ejemplo instaladas.

  7. Seleccione el botón Seleccionar objetos.

    Captura de pantalla del botón de selección de componentes

  8. Seleccione la pestaña Formularios, seleccione el formulario Información del tipo de formulario Principal y luego Agregar.

    Captura de pantalla de la ventana para agregar componentes

  9. Seleccione Agregar de nuevo.

  10. Abra la tabla Proyecto de equipo que acaba de agregar a la solución.

  11. Seleccione Formularios en la tarjeta Experiencias de datos.

  12. Abra el formulario Información de Tipo de formulario Principal.

    Captura de pantalla del formulario de información

  13. Seleccione la sección Estado.

    Captura de pantalla de la sección de estado.

  14. En el panel Propiedades, cambie el Nombre de la section_status y marque la casilla Ocultar. De forma predeterminada, se asigna un GUID como el nombre de la sección. Cámbielo por un nombre más significativo al que haga referencia en sus scripts. Oculte también la sección de forma predeterminada para reducir el efecto discordante de mostrar y luego ocultar en la carga del formulario.

    Captura de pantalla de la casilla Ocultar.

  15. Vaya a la Vista de árbol y seleccione la pestaña General.

    Captura de pantalla de la pestaña General.

  16. En el panel Propiedades, cambie el Nombre de la tab_general.

  17. Seleccione la columna Inicio del proyecto.

    Captura de pantalla de la columna de inicio del proyecto

  18. Vaya al panel Propiedades y seleccione el botón (I) junto al nombre de columna de la tabla.

  19. Copie el Nombre lógico (sample_projectstart) y péguelo en un bloc de notas. Use este nombre en su script para hacer referencia a la columna de datos.

    Captura de pantalla del botón de información en el que se muestra el nombre lógico

  20. Seleccione Guardar y publicar para guardar los cambios. Espere a que se complete la publicación.

  21. Seleccione el botón Atrás.

    Captura de pantalla del botón Atrás

  22. Seleccione Todo.

  23. Seleccione Publicar todas las personalizaciones y espere a que se complete la publicación.

Tarea 2: Crear el script de cliente

En esta tarea, crea un script que muestra/oculta la sección Estado según la fecha de inicio del proyecto.

Oculte la sección Estado. Si la fecha de inicio del proyecto está vacía o en el futuro, de lo contrario se muestra la sección Estado.

  1. Inicie una nueva instancia de Visual Studio Code o use su editor de código favorito. Puede descargar e instalar Visual Studio Code.

  2. Seleccione Abrir carpeta.

    Captura de pantalla del botón de abrir carpeta

  3. Cree una carpeta en su carpeta Documentos y asígnele un nombre ClientScriptLab.

  4. Seleccione la carpeta ClientScriptLab que creó y luego Seleccionar carpeta.

    Captura de pantalla de la pantalla y el botón Seleccionar carpeta

  5. Mantenga el puntero sobre la carpeta CLIENTSCRIPTLAB y seleccione Nuevo archivo.

    Captura de pantalla del botón Archivo nuevo

  6. Asigne al archivo el nombre FormTeamProject.js.

  7. Agregue las siguientes funciones a FormTeamProject.js. Sus funciones deben tener nombres únicos o usar un espacio de nombres para garantizar la exclusividad.

    function LearnLab_handleTeamProjectOnLoad(executionContext) {

}
function LearnLab_handleProjectStatusOnChange(executionContext) {

}
function LearnLab_hideOrShowStatusSection(formContext) {

}

  8. Agregue este script a la función OnLoad. Observe aquí el nombre de la columna de inicio del proyecto sample_projectstart. Este es el nombre lógico que guardó anteriormente. Este código registra un controlador de eventos onChange y llama a una función común para mostrar/ocultar la sección. Debe gestionar On change en caso de que la entrada de la fecha de inicio del proyecto cambie el requisito de ocultar/mostrar.

    var formContext = executionContext.getFormContext();
formContext.getAttribute('sample_projectstart').addOnChange(LearnLab_handleProjectStatusOnChange);
LearnLab_hideOrShowStatusSection(formContext);

    Captura de pantalla de la función onload

  9. Agregue este script a la función OnChange. Este código simplemente obtiene el formContext y luego llama a la función común para ocultar/mostrar.

    var formContext = executionContext.getFormContext();
LearnLab_hideOrShowStatusSection(formContext);

  10. Agregue este script a la función hideOrShowStatusSection. Observe el nombre de la pestaña tab_general, el nombre de la sección section_status y el nombre de la columna sample_projectstart.

    var tabGeneral = formContext.ui.tabs.get('tab_general');
var sectionStatus = tabGeneral.sections.get('section_status');
var startDate = formContext.getAttribute('sample_projectstart').getValue();
var CurrentDate = new Date();
if (startDate == null || startDate > CurrentDate) {
  sectionStatus.setVisible(false);
} else {
  sectionStatus.setVisible(true);
}

  11. Ahora, el script debería tener el siguiente aspecto.

    Captura de pantalla de un script de ejemplo

  12. Seleccione Archivo y Guardar.

Tarea 3: Cargar el script

En esta tarea carga el script que creó en su entorno.

  1. Vaya a Power Apps Maker Portal y asegúrese de que se encuentra en el entorno correcto.

  2. Seleccione Soluciones y abra la solución Mejoras del desafío de innovación.

  3. Seleccione + Nuevo y luego Más | Recurso web.

    Captura de pantalla del botón de agregar nuevo recurso web

  4. Introduzca FormTeamProject.js en Nombre, FormTeamProject.js en Nombre para mostrar, seleccione Java Script (JS) en Tipo y seleccione Elegir archivo.

    Captura de pantalla del botón de elegir archivo de recurso web

  5. Seleccione el archivo FormTeamProject.js que creó anteriormente y luego seleccione Abrir.

  6. Seleccione Guardar.

  7. Su solución ahora debería tener la tabla Proyecto del equipo y el recurso web FormTeamsProject.js.

  8. No se vaya de esta página.

Tarea 4: Editar formulario

En esta tarea, agrega una biblioteca de JavaScript al formulario principal Team Project y agregará un controlador de eventos para el evento On Load.

  1. Asegúrese de que todavía está en la solución Mejoras del desafío de innovación.

  2. Expanda Tablas y luego expanda la tabla Proyecto de equipo.

  3. Seleccione Formularios y abra el formulario Información.

  4. Vaya al panel Propiedades, seleccione la pestaña Eventos y luego + Agregar biblioteca.

    Captura de pantalla del botón de agregar una nueva biblioteca al formulario

  5. Introduzca el equipo en el cuadro de texto de búsqueda y pulse Entrar. Seleccione FormTeamProject.js y seleccione Agregar.

    Captura de pantalla de la ventana de agregar una biblioteca de JavaScript

  6. Expanda la sección On Load y seleccione + Controlador de eventos.

    Captura de pantalla de la ventana Agregar controlador de eventos

  7. Introduzca LearnLab_handleTeamProjectOnLoad en Función, marque la casilla Pasar el contexto de ejecución como primer parámetro y seleccione Listo.

    Captura de pantalla en la que se muestra el cuadro de diálogo Configurar evento

  8. Seleccione Guardar y publicar y espere a que se guarden los cambios.

  9. Seleccione el botón Atrás.

  10. Seleccione Todo.

  11. Seleccione Publicar todas las personalizaciones y espere a que se complete la publicación.

Tarea 5: Probar

En esta tarea va a probar su script.

  1. Vaya a Power Apps Maker Portal y asegúrese de que se encuentra en el entorno correcto.

  2. Seleccione Aplicaciones y abra la aplicación Desafío de innovación.

  3. Seleccione Proyectos del equipo y abra el proyecto del equipo Informática en la nube.

  4. La sección Estado debe estar oculta porque la columna Inicio del proyecto está vacía.

    Captura de pantalla de la columna de inicio del proyecto vacía y la sección Estado oculta.

  5. Presione el icono de calendario junto al Inicio del proyecto y seleccione la fecha de hoy.

  6. La sección Estado debe estar visible.

    Captura de pantalla del valor de inicio del proyecto establecido en hoy con la sección Estado visible.

  7. Cambie el Inicio del proyecto a una fecha futura.

  8. La sección Estado debe estar ahora oculta.

  9. Cambie el Inicio del proyecto a una fecha del pasado.

  10. La sección Estado debe estar visible de nuevo.

Ahora ha usado JavaScript y la API del cliente para implementar requisitos empresariales que no es posible implementar mediante opciones declarativas como reglas de negocio.