Übung – Ein Clientskript verwenden, um einen Formularabschnitt auszublenden

In dieser Übung verwenden Sie Clientskript, um die Geschäftsanforderung zum Ausblenden des Statusabschnitts zu implementieren, wenn kein Projektstartdatum angegeben ist oder es in der Zukunft liegt.

Aufgabe 1 – Lösung mit dem Formular vorbereiten

In dieser Aufgabe erstellen Sie eine Lösung, fügen eine vorhandene Tabelle hinzu und bereiten das Hauptformular Tabellen vor, die sie der Lösung hinzugefügt haben.

1. Navigieren Sie zum Power Apps-Entwicklerportal, und überprüfen Sie, ob Sie sich in der richtigen Umgebung befinden, in der die Beispiel-Apps aktiviert sind.

2. Wählen Sie Lösungen und dann + Neue Lösung aus.

3. Geben Sie Innovation Challenge Enhancements für Anzeigename ein, wählen Sie CDS Default Publisher für Herausgeber und dann Erstellen aus.

   

4. Die von Ihnen erstellte Lösung Verbesserungen der Innovationsherausforderung sollte geöffnet werden.

5. Wählen Sie Vorhandenes hinzufügen und dann Tabelle aus.

6. Geben Sie Team in das Suchtextfeld ein, und klicken Sie auf Teamprojekt und Weiter.

   Hinweis

   Wenn Sie die Tabelle Teamprojekt nicht finden können, sind die Beispiel-Apps eventuell nicht in Ihrer Umgebung vorhanden. Wählen Sie eine andere Umgebung aus, oder erstellen Sie mithilfe der installierten Beispiel-Apps eine neue.

7. Wählen Sie die Schaltfläche Objekte bearbeiten aus.

   

8. Wählen Sie zuerst die Registerkarte Formulare, danach das Formular Informationen vom Formulartyp Haupt und schließlich Hinzufügen aus.

   

9. Wählen Sie erneut Hinzufügen aus.

10. Öffnen Sie die Tabelle Teamprojekt, die Sie gerade der Lösung hinzugefügt haben.

11. Wählen Sie auf der Karte Datenerfahrungen die Option Formulare aus.

12. Öffnen Sie das Formular Informationen des Formulars vom Formulartyp Haupt.

    

13. Wählen Sie den Abschnitt Status aus.

    

14. Ändern Sie im Abschnitt Eigenschaften den Namen zu section_status. Als Abschnittsname wird standardmäßig eine GUID zugeordnet. Ändern Sie ihn in einen aussagekräftigeren Namen, auf den Sie in Ihren Skripten verweisen. Aktivieren Sie als Nächstes das Kontrollkästchen Ausblenden. Sie werden den Abschnitt auch standardmäßig ausblenden, um den störenden Effekt des Anzeigens und anschließenden Ausblendens beim Laden des Formulars zu verringern.

    

15. Wechseln Sie zur Strukturansicht, und wählen Sie die Registerkarte Allgemein aus.

    

16. Ändern Sie im Eigenschaftsbereich den Namen zu tab_general.

17. Wählen Sie Spalte Projektstart aus.

    

18. Wechseln Sie zum Abschnitt Eigenschaften, und klicken Sie auf die Schaltfläche (i) neben dem Namen Tabellenspalte.

19. Kopieren Sie den Logischen Namen (sample_projectstart), und fügen Sie es in einen Editor ein. Sie verwenden diesen Namen in Ihrem Skript, um auf diese Spalte zu verweisen.

    

20. Wählen Sie Speichern und veröffentlichen aus, um Ihre Änderungen zu speichern und zu veröffentlichen. Warten Sie darauf, bis die Veröffentlichung abgeschlossen ist.

21. Wählen Sie die Schaltfläche Zurück aus.

    

22. Wählen Sie Alle aus.

23. Wählen Sie Alle Anpassungen veröffentlichen aus, und warten Sie, bis die Veröffentlichung abgeschlossen ist.

Aufgabe 2 – Das Client-Skript erstellen

In dieser Aufgabe erstellen Sie ein Skript, das den Abschnitt „Status“ basierend auf dem Projektstartdatum ein‑ oder ausblendet.

Sie blenden den Statusbereich aus, wenn das Startdatum des Projekts leer ist oder in der Zukunft liegt. Andernfalls wird der Statusabschnitt angezeigt.

1. Starten Sie eine neue Instanz von Visual Studio Code, oder verwenden Sie Ihren bevorzugten Code-Editor. Sie können Visual Studio Code herunterladen und installieren.

2. Wählen Sie Ordner öffnen aus.

   

3. Erstellen Sie einen Ordner in Ihrem Dokumentenordner, und nennen Sie ihn ClientScriptLab.

4. Wählen Sie den von Ihnen erstellten Ordner ClientScriptLab, und klicken Sie auf Ordner auswählen.

   

5. Bewegen Sie den Mauszeiger über den Ordner CLIENTSCRIPTLAB und klicken Sie dann auf Neue Datei.

   

6. Nennen Sie die Datei FormTeamProject.js.

7. Fügen Sie FormTeamProject.js die folgenden Funktionen hinzu. Ihre Funktionen sollten eindeutige Namen haben oder die Eindeutigkeit durch einen Namespace sicherzustellen.

   function LearnLab_handleTeamProjectOnLoad(executionContext) {
   
   }
   function LearnLab_handleProjectStatusOnChange(executionContext) {
   
   }
   function LearnLab_hideOrShowStatusSection(formContext) {
   
   }
   

8. Fügen Sie der Funktion OnLoad des Codes das Skript hinzu. Beachten Sie den Namen der Projektstartspalte, hier sample_projectstart. Dies ist der logische Name, den Sie zuvor gespeichert haben. Dieser Code registriert einen onChange-Ereignishandler und ruft eine allgemeine Funktion auf, um den Abschnitt anzuzeigen/auszublenden. Sie müssen mit Änderungen arbeiten, falls eine Eingabe des Projektstartdatums die Ausblenden-/Einblenden-Anforderung ändert.

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

   

9. Fügen Sie der Funktion OnChange das Skript hinzu. Dieser Code ruft einfach den formContext ab und dann die allgemeine Funktion zum Ausblenden/Einblenden auf.

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

10. Fügen Sie der Funktion hideOrShowStatusSection dieses Skript hinzu. Beachten Sie den Registerkartennamen tab_general, den Abschnittsnamen section_status und den Spaltennamen 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. Ihr Skript sollte nun wie in diesem Bild aussehen.

    

12. Wählen Sie Datei und Speichern aus.

Aufgabe 3 – Das Skript hochladen

In dieser Aufgabe laden Sie das von Ihnen erstellte Skript in Ihre Umgebung hoch.

1. Navigieren Sie zum Power Apps Maker Portal, und überprüfen Sie, ob Sie sich in der richtigen Umgebung befinden.

2. Wählen Sie Lösungen aus, und öffnen Sie die Lösung Verbesserungen der Innovationsherausforderung.

3. Klicken Sie auf + Neu, und wählen Sie dann Weitere | Webressource aus.

   

4. Geben Sie FormTeamProject.js als Name sowie FormTeamProject.js als Anzeigename ein, wählen Sie dann Java script (JS) als Typ aus, und klicken Sie auf Datei auswählen.

   

5. Wählen Sie die von Ihnen zuvor erstellte Datei FormTeamProject.js aus, und klicken Sie dann auf Öffnen.

6. Wählen Sie Speichern aus.

7. Ihre Lösung sollte nun über die Tabelle Teamprojekt und die Webressource FormTeamsProject.js verfügen.

8. Navigieren Sie nicht von dieser Seite weg.

Aufgabe 4 – Das Formular bearbeiten

In dieser Aufgabe fügen Sie dem Hauptformular für das Team Project eine JavaScript-Bibliothek und einen Ereignishandler für das On Load-Ereignis hinzu.

1. Stellen Sie sicher, dass Sie sich immer noch in der Lösung Verbesserungen der Innovationsherausforderung befinden.

2. Erweitern Sie zunächst Tabellen und dann die Tabelle Teamprojekt.

3. Wählen Sie die Formulare aus, und öffnen Sie das Formular Informationen.

4. Wechseln Sie zum Bereich Eigenschaften, und wählen Sie die Registerkarte Ereignisse aus. Erweitern Sie OnLoad, wenn es reduziert ist, und wählen Sie + Ereignishandler aus. Wählen Sie unter Ereignis konfigurieren die Option + Bibliothek hinzufügen aus.

   

5. Geben Sie in das Suchtextfeld Team ein, und drücken Sie die Eingabetaste. Klicken Sie auf FormTeamProject.js und dann auf Hinzufügen.

   

6. Geben Sie LearnLab_handleTeamProjectOnLoad unter Funktion ein, markieren Sie das Kontrollkästchen Ausführungskontext als ersten Parameter übergeben, und wählen Sie dann Fertig aus.

   

7. Wählen Sie Speichern und veröffentlichen aus, und warten Sie, bis Ihre Änderungen gespeichert sind.

8. Sobald Ihre Änderungen gespeichert und veröffentlicht wurden, wählen Sie die Schaltfläche Zurück aus.

9. Wählen Sie Alle aus.

10. Wählen Sie Alle Anpassungen veröffentlichen aus, und warten Sie, bis die Veröffentlichung abgeschlossen ist.

Aufgabe 5 – Testen

In dieser Aufgabe testen Sie Ihr Skript.

1. Navigieren Sie zum Power Apps Maker Portal, und überprüfen Sie, ob Sie sich in der richtigen Umgebung befinden.

2. Klicken Sie auf Apps, um die Anwendung Innovation Challenge zu öffnen.

3. Wählen Sie Teamprojekte aus, und öffnen Sie das Teamprojekt Cloud Computing.

4. Der Statusbereich sollte versteckt werden, weil die Spalte Projektstart leer ist.

   

5. Drücken Sie das Kalendersymbol neben dem Projektstart, und wählen Sie das heutige Datum aus.

6. Der Abschnitt Status sollte sichtbar werden.

   

7. Ändern Sie den Projektstart auf ein zukünftiges Datum.

8. Der Abschnitt Status sollte jetzt ausgeblendet werden.

9. Ändern Sie den Projektstart auf ein vergangenes Datum.

10. Der Abschnitt Status sollte wieder sichtbar werden.

Sie haben nun JavaScript und die Client-API verwendet, um Geschäftsanforderungen zu implementieren, die mit deklarativen Optionen wie Geschäftsregeln nicht implementiert werden können.