top of page

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

  • Autorenbild: kim
    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!



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:


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

  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:




 
 
 

Comments


bottom of page