Esercizio - Utilizzo delle pagine personalizzate con i comandi

  • 15 minuti

In questo esercizio si aggiungerà un pulsante della barra dei comandi che apre una pagina personalizzata in una finestra di dialogo modale.

Importante

Usare un ambiente di test o per sviluppatori con un'istanza di Microsoft Dataverse di cui si è eseguito il provisioning e le app di esempio abilitate. Se non si dispone di un ambiente di test, è possibile iscriversi al piano della community.

Attività - Creazione della pagina personalizzata

In questa attività si aggiunge una nuova pagina personalizzata all'applicazione Fundraiser.

  1. Passare a https://make.powerapps.com e verificare che l'ambiente di test sia selezionato.

  2. Selezionare App, selezionare l'applicazione Fundraiser, quindi selezionare Modifica.

    Screenshot del pulsante Modifica applicazione.

  3. Selezionare + Nuovo.

    Screenshot del pulsante Nuovo.

  4. Selezionare Pagina personalizzata.

  5. Selezionare Crea pagina personalizzata, immettere What if come nome, quindi selezionare Crea.

    Screenshot della finestra di dialogo Crea pagina personalizzata.

  6. Selezionare la scheda Dati, quindi selezionare Aggiungi dati.

    Screenshot del pulsante Aggiungi dati.

  7. Cercare "raccolta fondi", quindi selezionare la tabella Raccolta fondi.

    Screenshot della finestra di dialogo Aggiungi dati.

  8. Selezionare la scheda Visualizzazione struttura ad albero, quindi l'oggetto App.

  9. Selezionare OnStart e incollare la formula qui sotto nella barra della formula. La formula crea alcune variabili:

    1. La variabile record contiene il record corrente nel modulo.

    2. La variabile remainingAmount contiene l'importo rimanente per l'obiettivo della raccolta fondi.

    3. La variabile numberOfPeople tiene traccia del numero di persone che effettuano una donazione per raggiungere l'obiettivo della raccolta fondi. Si inizializza questa variabile sul valore 1.

    4. La variabile averageDonation tiene traccia dell'importo che ogni persona dona per raggiungere l'obiettivo della raccolta fondi. Si è inizializzata questa variabile con l'importo rimanente.

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

  10. Selezionare Screen1, quindi selezionare + Inserisci.

  11. Espandere il gruppo Layout, quindi selezionare Contenitore verticale.

    Screenshot del pulsante Inserisci contenitore verticale.

  12. Selezionare il contenitore.

  13. Andare alla barra della formula, quindi modificare il valore Width del contenitore in 1280.

  14. Modificare il valore Height del contenitore in 680.

  15. Il contenitore deve essere simile a quello mostrato nell'immagine seguente.

    Screenshot del contenitore ridimensionato.

  16. Selezionare il contenitore, quindi selezionare il pulsante + Inserisci.

  17. Selezionare Etichetta nel gruppo Popolare.

  18. Immettere Numero di persone come testo.

    Screenshot del valore di testo dell'etichetta.

  19. Selezionare il contenitore, quindi selezionare il pulsante + Inserisci.

  20. Selezionare Casella di testo nel gruppo Popolare.

  21. Rinominare la casella di testo in Numero di persone.

  22. Impostare il campo Valore della casella di testo Numero di persone su numberOfPeople.

    Screenshot del valore della casella di testo.

  23. Selezionare il contenitore, quindi selezionare il pulsante + Inserisci.

  24. Trovare e selezionare Etichetta.

  25. Immettere Importo per persona come testo.

  26. Selezionare il contenitore, quindi selezionare il pulsante + Inserisci.

  27. Trovare e selezionare Casella di testo.

  28. Rinominare la casella di testo in Importo per persona.

  29. Impostare il campo Valore della casella di testo Importo per persona su averageDonation.

    Screenshot del valore di una casella di testo.

  30. Impostare il valore OnChange della casella di testo Importo per persona sulla formula sottostante. Tale formula stabilirà il numero di persone in base a una donazione media specifica.

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

    Screenshot del valore OnChange di una casella di testo.

  31. Selezionare la casella di testo Numero di persone.

  32. Impostare il valore OnChange della casella di testo Numero di persone sulla formula sottostante. Tale formula imposta la donazione media in base a un numero di persone specifico.

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

  33. Selezionare Salva e attendere il salvataggio della pagina.

  34. Selezionare Pubblica.

  35. Selezionare Pubblica questa versione.

  36. Quando si apre la finestra di dialogo Salvataggio della pagina completato, selezionare Ignora.

  37. Chiudere la finestra o la scheda del browser dell'editor della pagina personalizzata.

  38. Si ritorna all'editor dell'applicazione basata su modello. Selezionare OK.

    Screenshot della finestra di dialogo per ripubblicare l'applicazione.

  39. Selezionare Salva e attendere il salvataggio dell'app.

  40. Selezionare Pubblica e attendere che l'app venga pubblicata.

  41. Avviare una nuova sessione del browser, passare a https://make.powerapps.com e assicurarsi che sia selezionato l'ambiente di test.

  42. Selezionare Soluzioni e aprire Soluzione predefinita.

  43. Selezionare Pagina, individuare la pagina What If e creare e copiare il nome. Salvare il nome in un blocco note per usarlo in un passaggio successivo.

    Screenshot del nome della pagina personalizzata.

  44. Dopo aver copiato il nome, si può chiudere questa sessione del browser.

Attività - Aggiunta del pulsante di comando

In questa attività si aggiungerà un nuovo pulsante di comando al modulo principale della tabella Raccolta fondi.

  1. Aprire un editor di testo e incollare il codice JavaScript seguente per aprire una finestra di dialogo centrata.

    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. Sostituire [YOUR CUSTOM PAGE NAME] con il nome della propria pagina personalizzata copiato nell'attività 1.

    Screenshot del file JavaScript.

  3. Salvare il file in locale sul computer e denominarlo WhatIf.js. Verificare che l'estensione del file sia .js.

  4. Tornare alla finestra di progettazione app basate su modello.

  5. Selezionare il pulsante ... accanto a Fundraiser, quindi selezionare Modifica barra dei comandi.

    Screenshot del pulsante Modifica barra dei comandi.

  6. Selezionare Modulo principale, quindi Modifica.

  7. Selezionare +Nuovo, quindi selezionare Comando.

    Screenshot del pulsante Aggiungi nuovo comando.

  8. Selezionare Power Fx, quindi selezionare Continua.

  9. Immettere What if per Etichetta, selezionare Usa icona, Ricalcola e infine Esegui JavaScript per Azione.

    Screenshot dei valori dell'elenco a discesa di azioni.

  10. Selezionare + Aggiungi libreria.

    Screenshot del pulsante per aggiungere una libreria.

  11. Selezionare + Nuova risorsa Web.

    Screenshot del pulsante per aggiungere una nuova risorsa Web.

  12. Selezionare Scegli file.

  13. Selezionare il file WhatIf.js creato, quindi selezionare Apri.

  14. Immettere What If JS come Nome visualizzato e WhatIfJS come Nome, selezionare JavaScript (JS) come Tipo e quindi selezionare Salva e pubblica.

    Screenshot della finestra di dialogo per aggiungere una nuova risorsa Web.

  15. Cercare "what if", selezionare la risorsa Web What If JS aggiunta, quindi selezionare Aggiungi.

    Screenshot della finestra di dialogo per aggiungere JavaScript.

  16. Immettere calculate per Nome funzione, quindi selezionare + Aggiungi parametro.

    Screenshot del pulsante + Aggiungi parametro.

  17. Selezionare FirstPrimaryItemId per Parametro 1.

  18. Selezionare Salva e pubblica e attendere il completamento della pubblicazione.

  19. Selezionare Esegui.

  20. Selezionare Raccolte fondi e aprire uno dei record di raccolta fondi.

  21. Il pulsante della barra dei comandi What If aggiunto deve essere visibile. Selezionare il pulsante What if della barra dei comandi.

    Screenshot del pulsante What if.

  22. Viene visualizzata la finestra di dialogo What if.

    Screenshot della finestra di dialogo Pagina personalizzata.

  23. Modificare il valore Numero di persone in 5. Il valore Importo per persona dovrebbe aggiornarsi all'importo che ogni persona deve donare per raggiungere l'obiettivo della raccolta fondi.

    Screenshot della pagina di donazioni calcolate.

  24. Modificare il valore Importo per persona e vedere come viene calcolato il numero di persone.

Si è creata una pagina personalizzata, aperta successivamente come finestra di dialogo usando un pulsante della barra dei comandi. Di seguito viene fornito un rapido riepilogo degli argomenti trattati in questo modulo.