Teil 1 – Model-Driven-App Project mit Canvas-Customer-Page erweitern

Seit einiger Zeit ist es möglich, Canvas-Apps-Seiten in Model-Driven-Apps einzubinden und die Menüleiste mit eigenen Buttons zu erweitern. Dadurch erhält man eine noch freiere Gestaltungsmöglichkeit für Model-Driven-Apps, was auch die Model-Driven-App „Project“ betrifft. In diesem Blog-Beitrag möchte ich dir zeigen, wie du eine solche Custom-Page zur Model-Driven-App „Project“ hinzufügen kannst.

In meinem dargestellten Szenario möchte ich eine Custom-Page für die Erstellung von Änderungsanträgen (RFC) erstellen. Der Benutzer soll, wenn er ein Projekt geöffnet hat, ein Arbeitspaket für die Einreichung eines RFC auswählen können und dann über einen Button den RFC an den Lenkungsausschuss weiterleiten.

Da dieser Blog zu lang geworden wäre, habe ich mich dazu entschlossen, ihn in zwei Teilen zu präsentieren. In diesem Blog werde ich dir erklären, wie du eine Customer-Page für die Model-Driven-App „Project“ erstellst. Im zweiten Teil werden wir dann den Button erstellen und das benötigte JavaScript zuweisen.

Hinweis: Bitte beachte, um dieses Beispiel nachstellen zu können, benötigst du in der Umgebung die Sicherheitsrollen Environment Maker und System Customizer!

Erstellen einer Customer Page

Als erstes müssen wir eine Power Page in der Project Lösung erstellen. Eine Power Page setzt sich aus vier Komponenten zusammen. Einmal das Designer Studio zur Bearbeitung der Seite, dann der Vorlagen- und Learn-Hub, sowie der Code-Editor. Öffne die Model-Driven-App Project im Designerstudio und erstelle eine Power Page über das Power Apps Studio. Gehe hierzu wie folgt vor.

Als Erstes müssen wir eine Power Page in der Project-Lösung erstellen.

Hinweis: Ich gehe davon aus, dass du die Model-Driven-App „Project“ in einer eigenen Lösung veröffentlicht hast. Denke daran, dass in der Standard-Lösung von „Project“ keine weiteren Änderungen durchgeführt werden können

Melde dich auf make.powerapps.com an. Klicke auf der linken Seite auf den Button „Lösungen“ und öffne die Lösung, die du für „Project“ erstellt hast, indem du auf den Namen der Lösung klickst.

Klicke im oberen Bereich auf „+ Neu“. Scrolle mit der Maus über „Apps (1)“ und wähle im Kontextmenü die Option „Seite“ aus.

Anlegen einer Customer-Page

Binde zuerst die Project-Tabelle ein. Klicke hierzu auf der linken Seite auf das Datenbanksymbol und dann auf den Button „Daten hinzufügen“. Gebe im Suchfeld „Projekte“ ein und klicke dann auf die Tabelle. Die Tabelle wird nun hinzugefügt (1). Deine Ansicht sollte wie folgt aussehen.

Hinweis: Falls die Entitäten bei dir nicht übersetzt werden, lautet der Tabellenname „Projects

Project-Entität einbinden

Öffne erneut die Strukturansicht über den Button auf der linken Seite (1). Klicke unter „Strukturansicht“ auf „App (2)“ und wähle unter Funktionen die Option „OnStart (3)“. Gib dann den folgenden Code (4) ein.

Startvariable setzen

Erläuterung des Codes: Mit dem Code setze ich eine Variable namens „varRecordID“. Du kannst natürlich auch jeden anderen Namen verwenden. Danach folgt die Angabe der Tabelle. In diesem Beispiel arbeiten wir mit der zuvor eingebundenen Entität „Projects“ (auf Deutsch: Projekt). Anschließend gebe ich die referenzierte Spalte aus der Tabelle an. In diesem Fall ist es die Spalte „Project“. Mit dem späteren JavaScript übergeben wir dann die „msdyn_projectid“ an die Power Page. Die übergebene „msdyn_projectid“ steht dann in der Variable „recordID“.

Um zu einem späteren Zeitpunkt zu überprüfen, ob die Seite wie gewünscht funktioniert, fügen wir ein Label hinzu. Dieses soll den Text „Projektnamen“ anzeigen und dahinter den aktuellen Projektnamen des geöffneten Projekts ausgeben.

Hierzu müssen wir ein Label der Seite hinzufügen. Klicke hierzu auf der linken Seite auf das „+“. Klicke auf die Option „Beschriftung“. Die Beschriftung wird der Page hinzugefügt. Füge in der Code-Spalte, unter der Funktion „Text“, den folgenden Code ein.

Erläuterung des Codes: Der Code „Projektname“ gibt an, dass es sich um eine Textausgabe handelt. Das kaufmännische „und“-Zeichen zeigt an, dass wir eine weitere Anweisung an den Code anhängen wollen. Da wir bei Start die Werte aus dem Projekt in die Variable „varRecordID“ schreiben, fügen wir den Projektnamen direkt hinter den Text ein (1).

Label setzen

Speichere die Seite, indem du auf der rechten Seite auf „Speichern“ (Diskettensymbol) klickst. Gib einen Namen für die App ein, in meinem Fall „RFC“, und klicke anschließend auf „Speichern“. Zum Abschluss veröffentliche die Seite. Klicke dazu auf der oberen, rechten Ecke auf den Button „Veröffentlichen“. In dem sich öffnenden Fenster klicke auf den Button „Diese Version veröffentlichen (1)“.

Customer-Page veröffentlichen

Zu einem späteren Zeitpunkt in meinem zweiten Teil benötigen wir den Namen der Seite. Dieser wird dir jetzt unter der Spalte ‚Namen‘ angezeigt (new_rfc_ff53f). Speichere dir diesen Namen in einer Textdatei.

Namen der Seite

Customer-Page der Model-Driven-App Project hinzufügen

Gehe wieder zurück in die Lösung. Klicke dazu in der oberen linken Ecke auf „Zurück“. Bestätige das nächste Fenster, indem du auf „Verlassen“ klickst. Öffne nun die Project App im Power App Studio. Klicke dazu auf der linken Seite auf „Apps (1)“. Klicke dann mit der Maus auf das erweiterte Menü (2) und wähle im Kontextmenü die Option „Bearbeiten (3)“.

Model-Driven-App Project im Designer öffnen

Wichtig: Als Erstes musst du die gerade erstellte Seite zur App hinzufügen, da sonst der Zugriff von der Model-Driven-App auf die Seite nicht möglich ist.

Um die Seite zur Model-Driven-App „Project“ hinzuzufügen, klickst du im Power App Designer im oberen Bereich auf den Button „Neu (1)“. Wähle im ersten Fenster des Assistenten die Option „Inhalte für die Seite auswählen“ und klicke auf „Weiter“. Wähle dann die Option „Eine vorhandene benutzerdefinierte Seite verwenden (2)“ und wähle die zuvor erstellte Seite aus (3). Deaktiviere die Option „In Navigation anzeigen (4)“ und klicke abschließend auf „Hinzufügen (5)“.

Customer-Page der Model-Driven-App Project hinzufügen

Zusammenfassung

Das soll es mit diesem Blog gewesen sein. Wir haben nun eine Customer-Page erstellt und die Funktion OnStart sowie ein Label hinzugefügt, das uns beim späteren Öffnen den aktuellen Projektnamen ausgeben soll. Ebenfalls haben wir die Seite der Model-Driven-App hinzugefügt. In meinem zweiten Teil werden wir jetzt den Button dem Menü hinzufügen und das JavaScript zum Öffnen der Seite hinterlegen.