Ejercicio: Usar páginas personalizadas con comandos

  • 15 minutos

En este ejercicio, agregará un botón de la barra de comandos que mostrará una página personalizada en un cuadro de diálogo modal.

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: Crear una página personalizada

En esta tarea, agregará una nueva página personalizada a la aplicación Recaudación de fondos.

  1. Vaya a https://make.powerapps.com y asegúrese de haber seleccionado su entorno de prueba.

  2. Seleccione Aplicaciones, elija la aplicación Recaudación de fondos y luego seleccione Editar.

    Captura de pantalla del botón para editar aplicación

  3. Seleccione + Nuevo.

    Captura de pantalla de

  4. Seleccione Página personalizada y, después, Siguiente.

  5. Seleccione Crear una nueva página personalizada, introduzca What if para Nombre y seleccione Agregar.

    Captura de pantalla del cuadro de diálogo para crear página personalizada

  6. Seleccione la pestaña Datos y luego Agregar datos.

    Captura de pantalla del botón Agregar datos

  7. Busque Recaudación de fondos y seleccione la tabla Recaudación de fondos.

    Captura de pantalla del diálogo Agregar datos

  8. Seleccione la pestaña Vista de árbol y luego seleccione el objeto Aplicación.

  9. Seleccione OnStart y pegue la fórmula a continuación en la barra de fórmulas. Esta fórmula creará variables:

    1. La variable de registro mantendrá el registro actual en el formulario.

    2. La variable remainingAmount contendrá el importe restante para el objetivo de la recaudación de fondos.

    3. La variable numberOfPeople hará un seguimiento de cuántas personas donarán para alcanzar el objetivo de la recaudación de fondos. Inicializamos esta variable con 1.

    4. La variable averageDonation hará un seguimiento de la cantidad que cada persona donará para alcanzar el objetivo de la recaudación de fondos. Inicializamos esta variable con el importe restante.

    Set(record,LookUp(Fundraisers,Fundraiser=GUID(Substitute(Substitute(Param("recordId"),"{",""),"}",""))));Set(remainingAmount,record.'Fundraiser Goal'-record.'Total Donations');Set(numberOfPeople,1);Set(averageDonation,remainingAmount)

    Captura de pantalla de la fórmula de la aplicación al inicio

  10. Seleccione Screen1 y, a continuación, + Insertar.

  11. Expanda el grupo Diseño y seleccione Contenedor vertical.

    Captura de pantalla del botón para insertar el contenedor vertical

  12. Seleccione el contenedor.

  13. Vaya a la barra de fórmulas y cambie el valor Ancho del contenedor a 1280.

  14. Cambie el valor Largo del contenedor a 680.

  15. El contenedor ahora debería asemejarse a la imagen siguiente.

    Captura de pantalla del contenedor redimensionado

  16. Seleccione el contenedor y luego el botón + Insertar.

  17. Seleccione Etiqueta del grupo Popular.

  18. Introduzca Número de personas para Texto.

    Captura de pantalla de valor del texto de la etiqueta

  19. Seleccione el contenedor y luego el botón + Insertar.

  20. Seleccione Cuadro de texto del grupo Popular.

  21. Cambien el nombre del cuadro de texto a Número de personas.

  22. Establezca el Valor del cuadro de texto Número de personas en numberOfPeople.

    Captura de pantalla de valor del cuadro de texto

  23. Seleccione el contenedor y luego el botón + Insertar.

  24. Seleccione Etiqueta del grupo Popular.

  25. Introduzca Importe por persona para Texto.

  26. Seleccione el contenedor y luego el botón + Insertar.

  27. Seleccione Cuadro de texto del grupo Popular.

  28. Cambie el nombre del cuadro de texto a Importe por persona.

  29. Establezca el Valor del cuadro de texto Importe por persona en averageDonation.

    Captura de pantalla del valor del cuadro de texto

  30. Establezca el valor OnChange del cuadro de texto Importe por persona en la fórmula siguiente. Esta fórmula establecerá el número de personas en función de una donación promedio determinada.

    If(Value('Amount per person'.Value) > 0, Set(numberOfPeople, remainingAmount /'Amount per person'.Value), Set(numberOfPeople, 1))

    Captura de pantalla del valor OnChange del cuadro de texto

  31. Seleccione el cuadro de texto Número de personas.

  32. Establezca el valor OnChange del cuadro de texto Número de personas en la fórmula siguiente. Esta fórmula establecerá la donación media en función de un número de personas determinado.

    If(Value('Number of people'.Value) > 0, Set(averageDonation, remainingAmount / 'Number of people'.Value), Set(numberOfPeople, 1);Set(averageDonation, remainingAmount))

  33. Seleccione Guardar y espere a que se guarde la página.

  34. Seleccione Publicar.

  35. Seleccione Publicar esta versión y espere a que se complete la publicación.

  36. Cierre la ventana o pestaña del navegador del editor de páginas personalizadas.

  37. Ahora debería estar de nuevo en el editor de la aplicación basada en modelo. Seleccione Aceptar.

    Captura de pantalla del diálogo para volver a publicar la aplicación

  38. Seleccione Guardar y espere a que se guarde la aplicación.

  39. Seleccione Publicar y espere a que se publique la aplicación.

  40. Inicie una nueva sesión del navegador, vaya a https://make.powerapps.com y asegúrese de haber seleccionado su entorno de prueba.

  41. Seleccione Soluciones y abra la Solución predeterminada.

  42. Seleccione Páginas, busque la página What if que ha creado y copie el Nombre. Guarde este nombre en un bloc de notas; lo necesitará para futuros pasos.

    Captura de pantalla del nombre de página personalizada

  43. Puede cerrar esta sesión del navegador después de copiar el nombre.

Tarea: Agregar un botón de comando

En esta tarea, agregará un nuevo botón de comando al formulario principal de la tabla Recaudación de fondos.

  1. Abra un bloc de notas y pegue el JavaScript a continuación. Este JavaScript abrirá un cuadro de diálogo centrado.

    function calculate(itemId)
{
// Centered Dialog
var pageInput = {
    pageType: "custom",
    name: "[YOUR CUSTOM PAGE NAME]",
	recordId: itemId
};
var navigationOptions = {
    target: 2, 
    position: 1,
    width: {value: 50, unit:"%"},
    title: "What if"
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
    .then(
        function () {
            // Called when the dialog closes
        }
    ).catch(
        function (error) {
            // Handle error
        }
    );
}

  2. Reemplace [YOUR CUSTOM PAGE NAME] con el nombre de su página personalizada que copió en la tarea 1.

    Captura de pantalla del archivo JavaScript

  3. Guarde el archivo localmente en su ordenador y asígnele el nombre WhatIf.js. Asegúrese de que la extensión del archivo sea .js.

  4. Vuelva al diseñador de aplicaciones basadas en modelo.

  5. Seleccione el botón ... de Recaudación de fondos y seleccione Editar barra de comandos.

    Captura de pantalla del botón Editar barra de comandos

  6. Seleccione Formulario principal y después elija Editar.

  7. Seleccione + Nuevo y luego seleccione Comando.

    Captura de pantalla del botón para agregar nuevo comando

  8. Seleccione Power Fx y luego Continuar.

  9. Introduzca What if para Etiqueta, seleccione Usar icono, luego Volver a calcular y, por último, Ejecutar JavaScript para la acción.

    Captura de pantalla de los valores desplegables de acciones

  10. Seleccione + Agregar biblioteca.

    Captura de pantalla del botón Agregar biblioteca

  11. Seleccione + Nuevo recurso web.

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

  12. Seleccione Elegir archivo.

  13. Seleccione el archivo WhatIf.js que creó y elija Abrir.

  14. Introduzca What If JS en Nombre para mostrar, luego WhatIfJS para Nombre, seleccione JavaScript (JS) para tipo y luego elija Guardar y publicar.

    Captura de pantalla del diálogo de agregar nuevo recurso web

  15. Busque What if, seleccione el recurso web What If JS que acaba de agregar y luego seleccione Agregar.

    Captura de pantalla del diálogo de agregar biblioteca JavaScript

  16. Introduzca calcular para Nombre de la función y seleccione + Agregar parámetro.

    Captura de pantalla del botón Agregar parámetro

  17. Seleccione FirstPrimaryItemId para el parámetro 1.

  18. Seleccione Guardar y publicar y espere a que se complete la publicación.

  19. Seleccione Reproducir.

  20. Seleccione Recaudaciones de fondos y luego abra uno de los registros de recaudación de fondos.

  21. Debería ver el botón de la barra de comandos What If que agregó. Seleccione el botón de la barra de comandos de What If.

    Captura de pantalla del botón What if

  22. El cuadro de diálogo de What If debería aparecer.

    Captura de pantalla del cuadro de diálogo página personalizada

  23. Cambie el valor de Número de personas a 5. El Importe por persona debe actualizarse para indicar cuánto deberá donar cada persona para alcanzar el objetivo de la recaudación de fondos.

    Captura de pantalla de la donación calculada

  24. Cambie el valor Importe por persona y vea cómo calcula el número de personas.

  25. Enhorabuena, ha creado una página personalizada y la ha abierto como un cuadro de diálogo con un botón de la barra de comandos.