Power Apps Hacks - Power Apps Projekt auf GitHub speichern und in Visual Studio editieren

💡 Hinweis in eigener Sache

Du willst Power Apps & Power Automate von Grund auf lernen? In meinem Onlinekurs „Lisa’s Challenge – Zeiterfassung mit Power Apps & Automate“ begleite ich dich Schritt für Schritt beim Aufbau deiner ersten Business-App.

 👉 Jetzt Kurs ansehen

 🎁 Tipp: Trag dich hier ein und erhalte den Kurs kostenlos! Gilt nur bis 31.08.25!

 🔗 Kostenlosen Zugang sichern

Herzlich willkommen und Moin Moin zu diesem Beitrag in der Serie "Power Apps Hacks".

In dieser Serie behandeln wir einen bunten Blumenstrauß an Power Platform Tipps, Tricks und Funktionen.

Wenn Ihr Ideen für diese Videoreihe habt, hinterlasst uns einfach einen Kommentar unter dem Video!

Use Case: Ein Power Apps Template auf GitHub sichern

Wir wollen mithilfe von Github und der Versionsverwaltungssoftware Git ein Template für die Erstellung neuer Power Apps auf Github ablegen und den Quellcode unserer Power App in Visual Studio lokal bearbeiten. Alle Veränderungen, die wir an dem Template vornehmen, sollen gespeichert und wieder an das zentrale Github Repository übermittelt werden.

Was ist ein Power Apps Template, warum wollen wir an den Quellcode der Power App & wieso in einem GitHub Repository mit Git als Quellcodeverwaltung verwalten?

1. Die Power App soll als Designvorlage für künftige Projekte dienen, weshalb wir im Quellcode der Anwendung die statischen Werte für zum Beispiel Text- oder Füllfarben durch dynamische Werte, die wir über eine Variable auf dem App.OnStart definieren, ersetzen wollen. Das führt dazu, dass wir Steuerelemente aus dem Power Apps Studio direkt einfügen können, ohne dass wir diese hinterher anpassen müssen. Wir haben damit immer ein einheitliches Design in unserem Unternehmen.

2. Mit dem GitHub Repository & Git als Versionskontrolle können wir zeitgleich an der Vorlage arbeiten und Anpassungen vornehmen. Diese Anpassungen committen & pushen wir dann an das Repository. Durch die Versionshistorie haben wir immer einen Einblick darin, was wann und von wem geändert wurde.

3. Das Template soll künftig als Designvorlage verwendet werden, sodass wir konsistente Power Apps in unserem Unternehmen veröffentlichen, die "aus einem Guss" sind.

Was die Mehrwerte sind & wie ihr so ein Template selbst erstellt, zeigt Euch Sancho Harker in diesem Video ausführlich:

Das Template von Sancho ist frei verfügbar unter:

https://github.com/iAmManCat/PowerApps-Branding-Template

Ebenfalls ein exzellentes Template bietet Robin Rosengrün von R2PowerLernPowerApps: https://github.com/PowerRobin/LernPowerApps/tree/main/Template

Vorbereitung: Notwendige Software

Zunächst müssen wir uns die Werkzeuge herunterladen, die wir für unser Vorhaben benötigen.

Visual Studio Code

Mit diesem Tool werden wir unseren Quellcode später bearbeiten und an das Github Repository committen. Download: https://code.visualstudio.com/

Git

Dieses Werkzeug dient zur Versionsverwaltung.

Download: https://git-scm.com/

PowerApps-Language-Tooling

Mit diesem Werkzeug können wir .msapp Dateien entpacken, den Quellcode bearbeiten und später wieder verpacken und auf unserer Power Platform hochladen.

GitHub Account

Auf https://github.com/ benötigt Ihr ein Konto sowie ein Repository, in dem Eure Dateien abgelegt werden sollen.

Github Konto und Repository anlegen

Im ersten Schritt erstellen wir uns ein Konto und Repository auf Github, um dort unsere Dateien später zu speichern.

Erstellt Euch zunächst mit der gewünschten E-Mail-Adresse ein neues Benutzerkonto

Im Anschluss erstellt Ihr Euch ein Repository. Ihr könnt dabei festlegen, ob dieses öffentlich sein soll, sodass jeder darauf Zugriff hat, oder privat, wenn Ihr es z. B. nur mit bestimmten Personen oder überhaupt nicht teilen wollt.

Git Bash aufrufen und Benutzer anlegen

Sobald Ihr Git heruntergeladen und installiert habt, startet Ihr die Git Eingabeaufforderung, indem ihr in die Suchleiste "Git Bash" eingebt.

Im nächsten Schritt legen wir einen neuen Benutzer an. Dafür führen wir in der Git Bash folgende Zeilen aus und bestätigen diese mit einem Enter:

(Achtung: Hier müsst ihr Euren Github Benutzernamen und die E-Mail, mit der Ihr Euch angemeldet habt, verwenden)

git config --global user.email "<E-MAIL>"

git config --global user.name "<USERNAME>"

Als nächstes könnt Ihr mit dem folgenden Kommando prüfen, ob Euer Nutzer erfolgreich angelegt wurde:

git config --list

Wie Ihr Euren Benutzername ändern könnt, wird in diesem Beitrag gezeigt:

https://alvinalexander.com/git/git-show-change-username-email-address/

Power Apps Quellcode erzeugen und auf Github ablegen

Im nächsten Schritt wollen wir unserer .msapp Datei in einzelne Files zerlegen, um den Quellcode der Anwendung anpassen zu können.

Wie Ihr Eure .msapp Datei entpackt erklärt April Dunnum sehr gut und detailliert in diesem Video:

Einen ausführlichen Blogbeitrag von Microsoft dazu findet Ihr hier: https://powerapps.microsoft.com/en-us/blog/source-code-files-for-canvas-apps/

Kurzanleitung

1. .NET Core 3.1 SDK in aktueller Version installieren https://dotnet.microsoft.com/download/dotnet/3.1

2. Power Apps Language Tooling downloaden https://github.com/microsoft/PowerApps-Language-Tooling

3. Am gewünschten Ort entpacken. z.B. C:\Users\Username\Documents\GitHub

4. build.cmd als Administrator ausführen....1-2 Minuten warten

5. Checken, ob der Ordner "bin" erstellt wurde: C:\DeinSpeicherplatz\PowerApps-Language-Tooling\bin\Debug\PASopa

6. Die Power App, die Du bearbeiten willst, downloaden über "Save as / Speichern unter" als .msapp-File

7. Eingabekonsole aufrufen

8. In den Ordner navigieren, wo die Datei PASopa liegt. cd C:\DeinSpeicherplatz\PowerApps-Language-Tooling\bin\Debug\PASopa

9. Ausführen von PASopa mit folgendem Kommando: pasopa - unpack C:\DeinSpeicherplatzWoDiePowerAppAlsDownloadLiegt\DeinePowerApp.msapp ​C:\DeinSpeicherplatzWoDiePowerAppEntpacktWerdenSoll

10. C:\DeinSpeicherplatzWoDiePowerAppEntpacktWerdenSoll aufrufen

11. src-Ordner öffnen

Im Ergebnis muss Eure Power App entpackt in dem von Euch angegebenen Ordner abgelegt sein.

In unserem Fall sieht das folgendermaßen aus:

Dateien auf GitHub Repository hochladen

Als nächstes wollen wir die soeben entpackten Dateien in unser erstelltes Github Repository hochladen. Das können wir über die Kommandozeile, wir verwenden hierfür jedoch den Dateiexplorer als grafische Oberfläche.

Am einfachsten funktioniert es unserer Meinung nach mit Drag & Drop, um die Ordnerstruktur zu übernehmen.

Bestätigt den Upload mit "Commit changes".

Visual Studio öffnen, Extensions installieren & Repository klonen

Als nächstes öffnen wir Visual Studio Code. Je nachdem, ob Ihr vorher bereits ein anderes Projekt geöffnet hattet, wählt Ihr unter "Datei" -> "Neues Fenster öffnen".

Prüft zunächst, ob Ihr in der linken Menüleiste die Quellcodeverwaltung angezeigt bekommt und installiert außerdem die Extension "GitHub Pull Request and Issues".

Im nächsten Schritt wollen wir nun unser GitHub Repository auf unseren lokalen Rechner klonen. Klickt dafür "Repository klonen".

Ihr werdet jetzt aufgefordert, Euch mit Euren GitHub Anmeldedaten anzumelden. Führt diese Anmeldung durch.

Nachdem Ihr Euch erfolgreich angemeldet habt, könnt Ihr das Repository Eures GitHub Accounts klonen.

Nach einigen Sekunden erscheinen die Dateien, die Ihr in dem Repository abgelegt habt. In unserem Fall die entpackte Power Apps zum freien Editieren.

Jetzt wollen wir noch testen, ob unsere Versionsverwaltung arbeitet und fügen in die App.fx.yaml Datei einen Kommentar ein. Anschließend speichern wir die Änderung mit STRG + S.

In diesem Moment muss im linken Bereich bei der Quellcodeverwaltung eine 1 auftauchen.

Die Quellcodeverwaltung hat mit unserem Speichervorgang eine Änderung registriert, die wir jetzt in unser zentrales GitHub Repository committen / übermitteln können.

Jede weitere Änderung, die ich in den einzelnen Dateien durchführe, wird von der Quellcodeverwaltung registriert.

In meinem Beispiel habe ich in zwei Dateien einen einfachen Kommentar eingefügt.

Bevor ich diese Änderungen nun an mein Repository committe, kann ich sie in die sogenannte Staging Area legen. In der Staging Area befinden sich, einfach gesagt, alle Änderungen, die ich beim nächsten Commit übermitteln will. Ich kann meine Änderungen also bündeln und gesammelt übermitteln. Mehr Informationen zu den Zuständen in Git

Nachdem sich meine Änderungen alle in der Staging Area befinden, habe ich folgende Möglichkeiten, dessen Auswirkung vereinfacht erläutert werden soll

• Commit - Mit dem Commit übermittle ich meine gestageten Änderungen an das lokale Repository

• Commit & Push - Ich committe die gestageten Änderungen und übermittle sie nicht nur an mein lokales, sondern auch mein remote Repository auf GitHub

• Commit & Synchronisieren - Drei Aktionen werden ausgeführt. Erstens wird ein Commit durchgeführt. Zweitens führt es einen Pull-Vorgang durch. Dieser holt sich die Aktualisierungen aus dem Remote Repository, wenn z.B. ein Kollege während meiner Bearbeitungszeit etwas geändert hat und führt schließlich ein Push durch.

In meinem Fall wähle ich "Commit & Push". Wichtig ist hierbei vor der Aktion immer einen Kommentar anzugeben. Dieser wird später in der Historie in GitHub angezeigt.

Nach wenigen Sekunden kann ich mein GitHub Repository durch einen Refresh der Seite aktualisieren und sehe, dass meine Änderung an der remote Repository übertragen wurde.

Solltet Ihr bei dieser Aktion eine Fehlermeldung bekommen, dass Ihr nicht die Berechtigung zum Ausführen habt, kann das daran liegen, dass eventuell noch falsche Anmeldedaten hinterlegt sind. Das kann passieren, wenn Ihr zwischen Konten wechselt.

Wie ihr dieses Problem löst, wird in diesem Blogbeitrag schnell & einfach erklärt:

https://carldesouza.com/wrong-user-when-pushing-to-github-from-visual-studio-code/