Teil 2 – Model-Driven-App Project mit Canvas-Power-Page erweitern

In dieser Blogreihe möchte ich dir zeigen, wie du eine Customer-Page der Project Model-Driven-App hinzufügst. Nachdem wir im ersten Teil diesen Blogs eine Customer-Page erstellt und die Funktion OnStart sowie ein Label integriert haben, das uns beim späteren Öffnen den aktuellen Projektnamen anzeigen soll, sind wir nun bereit für den nächsten Schritt. In diesem zweiten Teil werden wir einen Button dem Menü hinzufügen und das erforderliche JavaScript für das Öffnen der Seite implementieren.

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

Button dem Hauptformularmenü hinzufügen

Als nächstes fügen wir den benutzerdefinierten Button dem Menü hinzu. Dafür musst du die Model-Driven-App Project im App-Designer erneut öffnen. Melde dich auf Power Apps an. Klicke im Menü auf der linken Seite auf die Option „Lösungen“. Wähle dann die Lösung aus, in der du die Model-Driven-App Project veröffentlicht hast. Klicke dann auf der linken Seite auf „Apps (1)“. Anschließend klicke mit der Maus auf das erweiterte Menü (2) und wähle im Kontextmenü die Option „Bearbeiten (3)„ aus.

Model-Driven-App Project im Designer önnen

Klicke im Navigationsbereich auf „Ansicht Projekte (1)“, dann auf das erweiterte Menü und wähle im Kontextmenü die Option „Befehlsleiste bearbeiten (2)“. Sollten noch Änderungen existieren, die noch nicht veröffentlicht wurden, zeigt Power Apps dies an. Klicke auf „Speichern und öffnen“.

Model-Driven-App Project – Befehlsleiste öffnen

Ich möchte meinen Button zum Öffnen der benutzerdefinierten Seite dem Hauptformularmenü hinzufügen. Natürlich kannst du den Button an jeder beliebigen Stelle hinzufügen. Wähle das gewünschte Menü aus, in meinem Szenario „Hauptformular (1)“, und klicke auf „Bearbeiten (2)“.

Hauptformular zum bearbeiten öffnen

Bestehende Buttons aus der Project-Anwendung können von dir nicht bearbeitet werden, da sie von Microsoft geschützt sind. Du kannst jedoch neue Buttons dem Menü hinzufügen. In meinem Fall erstelle ich den Button „RFC“, der dazu dient, die benutzerdefinierte Seite zu öffnen.

Um einen Button anzulegen, gehst du wie folgt vor: Klicke im oberen Bereich auf „Neu“ und wähle die Option „Befehl“. Hier wähle ich die Option „JavaScript (1)“. Schließe das Fenster, indem du auf „Fortsetzen“ klickst.

Komponentenbibliothek JavaScript auswählen

Der neue Button „NewCommand“ wurde dem Menü hinzugefügt. Vergebe als nächstes dem Button einen Namen. Gib dazu auf der rechten Seite unter der Option „Beschriftung“ den gewünschten Namen ein. In meinem Fall „RFC“.

Angepasste Menü inkl. Beschriftung

JavaScript-Code in der Bibliothek hinterlegen

Lade die Datei von meiner GitHub-Seite herunter. Gehe dazu auf meine GitHub Seite. Klicke auf die Datei „Power App FX Button.js“. Wähle im Kontextmenü „Weitere Dateiaktionen“ die Option „Download“. Speichere die Datei auf deinem Rechner und passe den Code entsprechend deiner Umgebung an.

Hinweis: Es kann sein, dass eine Sicherheitswarnung erscheint, da es sich bei der Datei um eine JavaScript-Datei handelt. Erlaube dennoch den Download, nachdem du dich auf meiner GitHub-Seite von der Sicherheit überzeugt hast.

Nun müssen wir eine kleine Änderung am JavaScript vornehmen. Für dich sind im Code folgende Zeilen wichtig, einmal der Funktionsname. Dieser wird zu einem späteren Zeitpunkt benötigt, um das Skript über den Button aufzurufen.

Name der Funktion

Ebenfalls musst du jetzt den Namen, den wir beim Anlegen unserer Seite in einer Textdatei gespeichert haben, in der Zeile 16 unter „name“ im Skript eintragen. Gebe die Änderungen passend zu deiner Umgebung ein und speichere die Aktualisierungen in der Textdatei.

Name zum Aufruf der Customer-Page

Nun können wir eine Bibliothek erstellen. Klicke dazu auf der rechten Seite auf den Menüpunkt „+ Bibliothek hinzufügen (1)“. Klicke dann im oberen Bereich auf den Button „+ Neue Webressource (2).

Anlegen der JavaScript Bibliothek

Auf der rechten Seite öffnet sich nun ein Menü. Klicke auf den Button „Datei auswählen (1)“. Wähle die zuvor geänderte Datei aus. Vergib einen Anzeigenamen (2) und einen Namen (3). Füge noch eine Beschreibung ein (4), damit du später immer noch erkennen kannst, wofür dieses Skript existiert. Klicke abschließend auf „Speichern und veröffentlichen (5)“

Anlegen der JavaScript Bibliothek

Tipp: Ich habe mir angewöhnt, immer eine eigene Syntax für die Benennung von Bibliotheken, Webressourcen, etc. zu verwenden. Ich setze immer ein kleines „tb_“ davor. Dadurch kann ich später über die Suche schnell meine Anpassungen finden.

Suche über das obere Suchfeld die gerade erstellte Bibliothek (1) und markiere diese im Suchergebnis (2). Klicke dann auf den Button „Hinzufügen (3)“.

Zuweisen der JavaScript Bibliothek

Jetzt musst du den Funktionsnamen aus dem JavaScript eintragen. Gebe diesen unter Funktionsnamen ein (1).

Als nächstes fügen wir noch den Parameter „PrimaryControl“ hinzu. Klicke dazu auf der rechten Seite auf den Button „+ Parameter hinzufügen“ und wähle im Auswahlmenü die Option „PrimaryControl (1)“ aus. Der Parameter wird entsprechend hinzugefügt.

Klicke abschließend im oberen Bereich auf „Speichern und veröffentlichen“. Dies kann einige Zeit dauern. Wir können als nächstes prüfen, ob unsere Seite sich jetzt öffnet. Öffne die Model-Driven-App Project. Wechsel in das Project Center und öffne ein Projekt. Im oberen Bereich erscheint jetzt unser Button „RFC“. Klicke auf den Button. Unsere Seite wird geöffnet und auch der Projektnamen des entsprechenden Projektes wird richtig ausgelesen.

Ergebnis nach drücken des Buttons

Zusammenfassung

Damit schließen wir auch diese Blogreihe ab. Im ersten Teil haben wir die Customer-Page erstellt und unserer Model-Driven-App hinzugefügt. In diesem Blog haben wir nun die letzten Schritte unternommen und den Button dem Menü zugeordnet sowie den benötigten JavaScript-Code zugewiesen. Falls du Fragen zur Einführung von Microsoft Project hast, stehe ich gerne zur Verfügung.