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

  • 9 minutos

En este ejercicio, usará un script de cliente para implementar un requisito empresarial que consiste en ocultar la sección Estado cuando no hay una fecha de inicio del proyecto o cuando dicha fecha está 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, creará 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. Vaya al Power Apps Maker Portal y compruebe que está en el entorno correcto, el entorno que tiene habilitadas las aplicaciones de ejemplo.

  2. Seleccione Soluciones y + Nueva solución.

  3. Introduzca Innovation Challenge Enhancements 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 Editar 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 Team Project que acaba de agregar a la solución.

  11. Seleccione Formularios en la tarjeta Experiencias de datos.

  12. Abra el formulario Información, cuyo Tipo de formulario es 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 a section_status. De forma predeterminada, se asigna un GUID como el nombre de la sección. Cámbielo por un nombre más significativo que vaya a poder usar en los scripts. A continuación, marque la casilla Ocultar. Esto ocultará la sección de forma predeterminada y así evitaremos que los elementos aparezcan y desaparezcan al cargarse el formulario, algo que puede resultar confuso.

    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. Usará este nombre en el script para hacer referencia a esta columna.

    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, creará un script que muestra/oculta la sección Estado según la fecha de inicio del proyecto.

Si no hay fecha de inicio del proyecto o si la fecha está en el futuro, la sección Estado quedará oculta. De lo contrario, se mostrará.

  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. Las 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. Añada este script a la función OnLoad del código. Como puede ver, el nombre de la columna de inicio del proyecto es 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 compruebe 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, añadirá una biblioteca de JavaScript al formulario principal Team Project, así como 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 y seleccione la pestaña Eventos. Expanda OnLoad si está contraído y seleccione + Controlador de eventos. En Configurar evento, seleccione + Agregar biblioteca.

    Captura de pantalla del botón para 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 Agregar.

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

  6. 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

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

  8. Cuando haya guardado y publicado los cambios, seleccione el botón Atrás.

  9. Seleccione Todo.

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

Tarea 5: Probar

En esta tarea, probará el script.

  1. Vaya a Power Apps Maker Portal y compruebe que se encuentra en el entorno correcto.

  2. Seleccione Aplicaciones y abra la aplicación Innovation Challenge.

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

  4. La sección Estado debería estar oculta, ya que 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.