Esercizio - Uso dello script client per nascondere una sezione del modulo

  • 9 minuti

In questo esercizio si userà uno script client per implementare il requisito aziendale di nascondere la sezione Stato quando non viene specificata una data di inizio del progetto oppure viene specificata una data futura.

Importante

Usare un ambiente di test 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à 1 - Preparazione della soluzione con il modulo

In questa attività si creerà una soluzione, le si aggiungerà una tabella esistente e si preparerà il modulo principale della tabella aggiunta alla soluzione.

  1. Andare a Power Apps Maker Portal e assicurarsi di essere nell'ambiente corretto con le app di esempio abilitate.

  2. Selezionare Soluzioni, quindi + Nuova soluzione.

  3. Immettere Innovation Challenge Enhancements nel campo Nome visualizzato, selezionare CDS default publisher nel campo Autore e selezionare Crea.

    Screenshot delle proprietà della nuova soluzione.

  4. La soluzione Innovation Challenge Enhancements creata dovrebbe aprirsi.

  5. Selezionare + Aggiungi esistente, quindi selezionare Tabella.

  6. Nella casella di testo di ricerca immettere team, selezionare Progetto team, quindi selezionare Avanti.

    Nota

    Se non si riesce a individuare la tabella Progetto team, è possibile che le app di esempio non siano presenti nell'ambiente in uso. Selezionare un altro ambiente oppure crearne uno nuovo con le app di esempio installate.

  7. Selezionare il pulsante Modifica oggetti.

    Screenshot del pulsante Seleziona componenti.

  8. Selezionare la scheda Moduli, selezionare il modulo Informazioni il cui tipo di modulo è Principale, quindi fare clic su Aggiungi.

    Screenshot della finestra per l'aggiunta del componente.

  9. Selezionare nuovamente Aggiungi.

  10. Aprire la tabella Team Project appena aggiunta alla soluzione.

  11. Selezionare Moduli nella scheda Esperienze con i dati.

  12. Aprire il modulo Informazioni di tipo Principale.

    Screenshot del modulo Informazioni.

  13. Selezionare la sezione Stato.

    Screenshot della sezione Stato.

  14. Nel riquadro Proprietà modificare il Nome in section_status. Per impostazione predefinita, viene assegnato un GUID come nome della sezione. Sostituirlo con un nome più significativo da usare come riferimento nei propri script. Quindi, selezionare la casella di controllo Nascondi. Questa operazione nasconderà inoltre la sezione per impostazione predefinita per evitare l'effetto disorientante di comparsa e scomparsa durante il caricamento del modulo.

    Screenshot della casella di controllo Nascondi.

  15. Andare alla visualizzazione struttura ad albero e selezionare la scheda Generale.

    Screenshot della scheda Generale.

  16. Nel riquadro Proprietà modificare il Nome in tab_general.

  17. Selezionare la colonna Avvio progetto.

    Screenshot della colonna di avvio progetto.

  18. Andare al riquadro Proprietà e selezionare il pulsante (i) accanto al nome in Colonna tabella.

  19. Copiare il Nome logico (sample_projectstart) e incollarlo nel Blocco appunti. Si userà questo nome nello script per fare riferimento a questa colonna.

    Screenshot del pulsante Informazioni con il nome logico visualizzato.

  20. Selezionare Salva e pubblica per salvare le modifiche. Attendere il completamento della pubblicazione.

  21. Selezionare il pulsante Indietro.

    Screenshot del pulsante Indietro.

  22. Selezionare Tutto.

  23. Selezionare Pubblica tutte le personalizzazioni e attendere il completamento della pubblicazione.

Attività 2. Creare lo script client

In questa attività si procederà a creare uno script che mostra/nasconde la sezione Stato in base alla data di inizio del progetto.

Se la data di inizio del progetto non è specificata o è nel futuro, la sezione Stato sarà nascosta. In caso contrario, verrà visualizzata.

  1. Avviare una nuova istanza di Visual Studio Code oppure usare l'editor di codice preferito. È possibile scaricare e installare Visual Studio Code.

  2. Selezionare Apri cartella.

    Screenshot del pulsante Apri cartella.

  3. Creare una cartella nella cartella Documenti e assegnarle il nome ClientScriptLab.

  4. Selezionare la cartella ClientScriptLab creata e fare clic su Seleziona cartella.

    Screenshot della schermata e del pulsante di selezione della cartella.

  5. Andare il puntatore del mouse sulla cartella CLIENTSCRIPTLAB e selezionare Nuovo file.

    Screenshot del pulsante Nuovo file.

  6. Assegnare il nome FormTeamProject.js al file.

  7. Aggiungere le funzioni riportate di seguito a FormTeamProject.js. È consigliabile che le funzioni abbiano nomi univoci o usino uno spazio dei nomi per garantire l'univocità.

    function LearnLab_handleTeamProjectOnLoad(executionContext) {

}
function LearnLab_handleProjectStatusOnChange(executionContext) {

}
function LearnLab_hideOrShowStatusSection(formContext) {

}

  8. Aggiungere questo script alla funzione OnLoad del codice. Notare il nome della colonna di inizio progetto qui, sample_projectstart. Questo è il nome logico salvato in precedenza. Questo codice registra un gestore eventi OnChange e chiama una funzione comune per mostrare/nascondere la sezione. È necessario gestire l'evento OnChange nel caso in cui la data di inizio del progetto inserita cambi il requisito nascondi/mostra.

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

    Screenshot della funzione OnLoad.

  9. Aggiungere questo script alla funzione OnChange. Questo codice recupera semplicemente formContext, quindi chiama la funzione comune per nascondere/mostrare.

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

  10. Aggiungere questo script alla funzione hideOrShowStatusSection. Si noti il nome della scheda tab_general, il nome della sezione section_status e il nome della colonna 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. Lo script dovrebbe avere un aspetto simile all'immagine seguente.

    Screenshot di uno script di esempio.

  12. Selezionare File, quindi Salva.

Attività 3. Caricare lo script

In questa attività si carica lo script creato nell'ambiente in uso.

  1. Andare a Power Apps Maker Portal e verificare di trovarsi nell'ambiente corretto.

  2. Selezionare Soluzioni e aprire la soluzione Innovation Challenge Enhancements.

  3. Selezionare + Nuovo, quindi selezionare Altro | Risorsa Web.

    Screenshot del pulsante per aggiungere una nuova risorsa Web.

  4. Immettere FormTeamProject.js in Nome, immettere FormTeamProject.js in Nome visualizzato, selezionare Java script (JS) in Tipo, quindi selezionare Scegli file.

    Screenshot del pulsante per scegliere il file della risorsa Web.

  5. Selezionare il file FormTeamProject.js creato in precedenza e selezionare Apri.

  6. Selezionare Salva.

  7. La soluzione dovrebbe ora disporre della tabella Progetto team e della risorsa Web FormTeamsProject.js.

  8. Non uscire da questa pagina.

Attività 4. Modificare il modulo

In questa attività si procederà ad aggiungere al modulo principale Team Project la libreria JavaScript e un gestore eventi per l'evento On Load.

  1. Assicurarsi di essere ancora nella soluzione Innovation Challenge Enhancements.

  2. Espandere Tabelle, quindi espandere la tabella Progetto team.

  3. Selezionare Moduli, quindi aprire il modulo Informazioni.

  4. Andare al riquadro Proprietà e selezionare la scheda Eventi. Espandere OnLoad (se è compresso), quindi selezionare + Gestore eventi. In Configura evento selezionare + Aggiungi libreria.

    Screenshot del pulsante per aggiungere una nuova libreria al modulo.

  5. Immettere team nella casella di testo di ricerca e premere INVIO. Selezionare FormTeamProject.js, quindi selezionare Aggiungi.

    Screenshot della finestra per l'aggiunta della libreria javascript.

  6. Immettere LearnLab_handleTeamProjectOnLoad in Funzione, selezionare la casella di controllo Passa il contesto di esecuzione come primo parametro, quindi scegliere Fatto.

    Screenshot che mostra la finestra di dialogo Configura evento.

  7. Selezionare Salva e pubblica e attendere che le modifiche vengano salvate.

  8. Una volta che le modifiche sono state salvate e pubblicate, selezionare il pulsante Indietro.

  9. Selezionare Tutto.

  10. Selezionare Pubblica tutte le personalizzazioni e attendere il completamento della pubblicazione.

Attività 5 - Esecuzione del test

In questa attività si eseguirà il test dello script.

  1. Andare a Power Apps Maker Portal e verificare di trovarsi nell'ambiente corretto.

  2. Selezionare App e aprire l'applicazione Innovation Challenge.

  3. Selezionare Progetti team e aprire il progetto team Cloud computing.

  4. La sezione Stato dovrebbe essere nascosta in quanto la colonna Avvio progetto è vuota.

    Screenshot della colonna Avvio progetto vuota e della sezione Stato nascosta.

  5. Selezionare l'icona di calendario accanto ad Avvio progetto e selezionare la data odierna.

  6. La sezione Stato dovrebbe diventare visibile.

    Screenshot del valore di Avvio progetto impostato sulla data odierna con la sezione Stato visibile.

  7. Impostare Avvio progetto su una data futura.

  8. La sezione Stato dovrebbe ora diventare nascosta.

  9. Impostare Avvio progetto su una data passata.

  10. La sezione Stato dovrebbe diventare di nuovo visibile.

Si sono usati JavaScript e l'API client per implementare requisiti aziendali che non è possibile implementare usando opzioni dichiarative come le regole di business.