Power Apps Hacks - Power Apps Projekt auf GitHub speichern und in Visual Studio editieren
- kim
- 26. Sept. 2022
- 5 Min. Lesezeit
Aktualisiert: 31. Mai
đĄ 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?
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.
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.
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:
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/
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:
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
.NET Core 3.1 SDK in aktueller Version installieren https://dotnet.microsoft.com/download/dotnet/3.1
Power Apps Language Tooling downloaden https://github.com/microsoft/PowerApps-Language-Tooling
Am gewĂŒnschten Ort entpacken. z.B. C:\Users\Username\Documents\GitHub
build.cmd als Administrator ausfĂŒhren....1-2 Minuten warten
Checken, ob der Ordner "bin" erstellt wurde: C:\DeinSpeicherplatz\PowerApps-Language-Tooling\bin\Debug\PASopa
Die Power App, die Du bearbeiten willst, downloaden ĂŒber "Save as / Speichern unter" als .msapp-File
Eingabekonsole aufrufen
In den Ordner navigieren, wo die Datei PASopa liegt. cd C:\DeinSpeicherplatz\PowerApps-Language-Tooling\bin\Debug\PASopa
AusfĂŒhren von PASopa mit folgendem Kommando: pasopa - unpack C:\DeinSpeicherplatzWoDiePowerAppAlsDownloadLiegt\DeinePowerApp.msapp âC:\DeinSpeicherplatzWoDiePowerAppEntpacktWerdenSoll
C:\DeinSpeicherplatzWoDiePowerAppEntpacktWerdenSoll aufrufen
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:
Comments