RAD und Low Code / No Code mit Power Apps

Power Apps gehört als Bestandteil zur Microsoft Power Platform – einer Sammlung folgender Dienste: Power Apps, Power Automate, Power BI und Power Pages. Während Power Apps auf die Entwicklung von Apps mittels Rapid ­Application Development (RAD) und Low-Code-/No-Code-Apps abzielt, dient Power Automate der Implementierung von Geschäftsprozessen, Power BI der Visualisierung von Daten für die Berichterstattung gegenüber dem Management und Power Pages (ehemals Power Apps Portals) dem Erstellen, Hosten und Verwalten von Websites. Ursprünglich gehörte Power Virtual Agents für die Erstellung von Chatbots ebenfalls zur Power Platform – wird allerdings seit Ende 2023 in Microsoft Copilot Studio integriert.Die Power Platform bildet zusammen mit Microsoft 365, Dynamics 365, GitHub, Microsoft Teams und Azure einen Microsoft-Tech-Stack. Alle genannten Softwaretechnologien sind inzwischen mehr oder weniger in Azure integriert, sodass die Azure-Cloud zu einer zentralen Schaltstelle wird. Während Microsoft 365 [1] die bekannten Office-Anwendungen enthält, besteht Microsoft Dynamics 365 aus Software für CRM (Customer-Relationship-Management), ERP (Enter­prise Resource Planning) und HR (Personalmanagement). Für die Versionsverwaltung und für CI/CD (Continuous Integration/Continuous Delivery) kommt GitHub zum Einsatz. Als Software für die Zusammenarbeit über das Web dient Micro­soft Teams. Für die volle Funktionsfähigkeit aller Bestandteile der Power Platform kommen noch Microsoft Dataverse, verschiedene Konnektoren und der AI Builder hinzu.

Features von Power Apps aus Sicht der Softwareentwicklung

Das Power-Apps-Tool besitzt für die Programmierung von Apps nachfolgende zentrale Eigenschaften, die gegenüber anderen professionellen Entwicklungsumgebungen besonders hervorzuheben sind:

• Low Code / No Code: Endbenutzer, hier vor allem Power User, sollen ebenso wie Programmierer in die Lage versetzt werden, selbst im Sinne der individuellen IV (Informationsverarbeitung) Apps mit nur wenig oder gar keinem Code zu erstellen.
• Visuelle Programmierumgebung: Anstatt viel Quellcode zu schreiben, setzt der Entwickler Apps mittels Komponenten zusammen und passt diese mithilfe deklarativer Vorgaben an die individuellen Anforderungen an (Bild 1). Dabei visualisiert Power Apps die Funktionalität der erstellten App.

• Microsoft Power Fx: Eine frei zugängliche Open-Source-Sprache, die angelehnt an Spreadsheet-ähnliche Formeln eine höherwertige Programmierung im Sinne einer 4th GL (Generation Language) ermöglicht [2]. Microsoft Power Fx entspricht einer GPL (General-Purpose Programming Language) mit starker Typisierung, die funktionale und deklarative Sprachkonstrukte umfasst.
• Lego-Baukasten-Prinzip: Bereitstellung weiterer technischer oder fachlicher Features für die Entwicklung von Apps durch einfache Einbindung zusätzlicher Services (Dienste), die als Komponenten passend konfiguriert werden.
• Schnittstellen für Standardsoftware: Einbettung in die beiden wichtigsten Ökosysteme von Microsofts Standardsoftware – Microsoft 365 und Dynamics 365.
• Unterstützung von Citizen Developer: Unter einem Citizen Developer versteht man einen technisch versierten Endbenutzer, der gern selbst Anwendungen mit den seitens der Unternehmens-IT bereitgestellten Entwicklungswerkzeugen programmiert.
• PCF (Power Apps Component Framework): Erstellung von Komponenten für die Wiederverwendung durch professionelle Programmierer oder Citizen Developer mittels eines Library-Konzepts auf visueller Ebene und im Quellcode.
• Überbrückung von Low Code / No Code: Verknüpfung der Low-Code-/No-Code-Entwicklungsumgebung mit den aus der professionellen Anwendungsprogrammierung bekannten Sprachen und Entwicklungs-Tools. Somit lässt sich mit Power Apps evolutionäres Prototyping realisieren und unter Umständen auch bereits vorhandener Quellcode einer herkömmlichen Programmiersprache wiederverwenden.

Vielfältige Wege für die App-­Programmierung

Für die Entwicklung einer App stehen dem Programmierer mit Power Apps mehrere Einstiegspunkte zur Verfügung [3]: Canvas-App, Model-driven App, SharePoint List Form App oder Microsoft Teams Power Apps (Data­verse for Teams). Der ausgewählte Einstiegspunkt legt fest, wie die Entwicklung und Verteilung der Software erfolgt, welche Datenquellen einbezogen werden und wie ein Benutzer auf die App zugreift. Zudem besitzt jeder Entwicklungsstrang eigene, auf seine speziellen Anforderungen ausgerichtete Anwendungsfälle. Eine Kenntnis der Unterschiede der verschiedenen Einstiegspunkte hilft dem Programmierer bei der Auswahl eines Entwicklungsstrangs, die richtige Entscheidung zu treffen.In der Mehrzahl aller Anwendungsfälle führt eine Canvas-App zum Ziel; diese ist speziell für mobile Endgeräte (Smartphone, Tablet) gedacht, sie eignet sich aber auch für die Ausführung auf einem Desktop-Rechner (Windows, macOS). Die Programmierung einer Canvas-App erfolgt mittels Drag-and-drop-Methodik – dabei steht das Layout unter vollständiger Kontrolle des Entwicklers. Fügt man einer Seite der App ­eine Komponente hinzu, so lässt sich diese anschließend passend positionieren. Logik programmiert der Entwickler über Excel-ähnliche Funktionen mittels der in Power Apps verfügbaren Sprache Power Fx. Nahezu jede Datenquelle kann mit ­einer Canvas-App verbunden werden. Zudem stehen mehr als 450 verschiedene Dienste für die Einbindung in ­eine Canvas-App zur Verfügung.Model-driven Apps unterscheiden sich vom Entwicklungsansatz her nur wenig von den Canvas-Apps. Das wesentliche Unterscheidungsmerkmal ist der Start- oder Ausgangspunkt für die Programmierung. Im Zentrum einer Model-driven App stehen die zugrunde liegenden Daten – damit bilden die zu verarbeitenden Daten und ihre Struktur den Schwerpunkt der Entwicklung. Die Daten (genauer das Datenmodell eines Unternehmens) rücken als Fundament für die App in den Mittelpunkt der Problemlösung. Eine gleichwertige Mächtigkeit, was den Funktionsumfang einer Canvas-App betrifft, kann mit einer Model-driven App ebenfalls realisiert werden. Bei einer Model-driven App handelt es sich jedoch häufig um eine Backoffice-Lösung, die bei Weitem keinen so umfangreichen Satz an Komponenten wie eine Canvas-App, dafür aber einen größeren Umfang an Daten und mehr Prozesse benötigt.Eine SharePoint List Form App zielt auf eine tiefe Integration mit SharePoint Online ab. Dabei realisiert Power Apps die standardmäßig vordefinierten Listenformulare. Die Erstellung einer SharePoint List Form App erfolgt mit der gleichen Bearbeitungsoberfläche wie eine Canvas-App. Die App reagiert auf standardmäßige Benutzerereignisse wie Erstellen, Bearbeiten oder Anzeigen von Elementen. Die Integration von Microsoft Teams und Power Apps wurde über die Jahre erheblich verbessert. Inzwischen deklariert der Entwickler über die Microsoft-Teams-Oberfläche (Power Apps app template/Power Apps canvas app template) mittels Power Apps direkt eine App. Zusätzlich stellt Dataverse for Teams in Microsoft Teams einen Zugriff auf Power Apps zur Verfügung, sodass sich auch so dessen Leistungsumfang nutzen lässt.

Per Power-Apps-Homescreen auf Power Apps Studio zugreifen

Bei Power Apps handelt es sich um eine Web-App, die als Cloud-Service über Microsoft 365 oder Dynamics 365 zur Verfügung steht. Ein direkter Zugriff auf Po­wer Apps setzt ein Microsoft-Konto mit einer Power-Apps-Lizenz voraus. Nach erfolgter Anmeldung bei Microsoft 365 befindet sich Power Apps als Eintrag im App-Startfeld (App Launcher). Wählt der Entwickler diesen Menüeintrag aus, so erscheint der Homescreen von Power Apps, der sich in zwei Hauptbestandteile aufteilt: eine linke Navigationsleiste und einen rechts davon stehenden Arbeitsbereich. Die linke Navigationsleiste erschließt eine Reihe von Ressourcen, die den Programmierer bei der Entwicklung einer eigenen App unterstützen.Die vom Arbeitsbereich bereitgestellten Features sind kontextsensitiv vom ausgewählten Eintrag der linken Naviga­tionsleiste abhängig. Für den Einstieg in die Entwicklung mit Power Apps empfiehlt sich der Eintrag Learn in der linken Navigationsleiste. Darüber stellt Microsoft eine Reihe von Lernmaterialien zur Verfügung, deren Kenntnis dem Entwickler die Programmierung von Canvas-Apps und Model-driven Apps erleichtern. Der vorletzte in der linken Navigationsleiste des Homescreens stehende Eintrag Power Platform erschließt alle weiteren Bestandteile der Power Platform. Der letzte Eintrag der Navigationsleiste öffnet einen virtuellen Agenten, der Hilfestellungen zu ausgewählten Themen über die Power Platform anbietet.Für die Neuanlage einer App klickt der Entwickler auf den Eintrag +Create in der linken Navigationsleiste. Anschließend bietet der sich öffnende Arbeitsbereich über einzelne Fensterbereiche verschiedene Optionen für die Programmierung einer App an. Der Fensterbereich Start from enthält einzelne Kacheln mit Icon-Symbolen und Bezeichnern wie Blank App, Dataverse, SharePoint, Excel, SQL, Image oder Figma(Bild 2). Unter dem Bezeichner jeder Kachel steht eine kurze inhaltliche Beschreibung der von ihr bereitgestellten Features. Für einige dieser Kacheln bietet Microsoft eine Erläuterung ihrer Funktionsweise über ein Video an, das durch Klick auf Watch video startet.

Unterhalb des Fensterbereichs Start from befindet sich der Fensterbereich Start from a template, dieser enthält ganz rechts eine Suchleiste. Dieser Fensterbereich erschließt dem Entwickler vorgefertigte Apps, aus denen man eigene Apps erzeugen und in den eigenen Arbeitsbereich übernehmen kann. Sobald die neu erzeugte App im eigenen Arbeitsbereich bereitsteht, passt man diese an eigene Anforderungen an. Derartige Anpassungen setzen beim Entwickler gewisse Kenntnisse über das Arbeiten mit Power Apps und deren Programmierung voraus. Nach Auswahl eines Templates für eine App öffnet sich der Create-Wizard/Assistent mit einer kurzen Beschreibung der Funktionsweise und einer Angabe zum Typ der App, zum Beispiel Canvas-App. Zudem kann der Entwickler den Namen der App ändern und das Format der App (Tablet, Phone) festlegen. Ein Klick auf die Create-Schaltfläche startet die Entwicklungsumgebung Power Apps Studio und öffnet die neu angelegte App.

Power Apps Studio – die zentrale Schaltstelle für die Programmierung

Power Apps Studio, auch Power Apps Designer genannt, bildet die Schaltzentrale für Entwicklung, Wartung, Test und Verteilung einer Canvas-App. Grundsätzlich benötigt ein Entwickler Grundkenntnisse zu dieser integrierten Entwicklungsumgebung (IDE), um produktiv und effizient mit Power Apps Studio zu arbeiten. Die Ausführung der IDE erfolgt im Unterschied zu vielen gängigen IDEs immer vollständig im Browser. Alle erledigten Arbeiten werden standardmäßig innerhalb der Power Platform gespeichert. Ein Entwickler muss sich nie selbst um die Konsistenz von Quellcode oder die Kopplung mit dem dahinterliegenden Repository kümmern.Sobald der Entwickler mit der Neuanlage einer App beginnt oder eine bereits vorhandene App öffnet, startet Power Apps Studio automatisch und zeigt die App an [4]. Der Home-Bildschirm besteht im Wesentlichen aus den folgenden sechs Fenster-Abschnitten (Bild 3): 1. Obere Menüzeile/Toolbar, 2. Eingabezeile für Formeln, 3. Linke Menüleiste/Toolbar, 4. Strukturansicht/Treeview, 5. Anzeigebereich zur Visualisierung/Arbeitsbereich und 6. Eigenschaftsfenster.

Abhängig vom in der Strukturansicht aktuell ausgewählten Element macht die obere Menüzeile/Toolbar (mit „1.“ ausgezeichnet) dem Programmierer eine Reihe verschiedener Kommandos verfügbar. So erscheinen bei Auswahl des Hauptbildschirms der App rechts in der oberen Menü­zeile/Toolbar verschiedene Icon-Symbole, um die App zu speichern, zu testen, sie auszuführen oder zu veröffentlichen. Dort fügt der Entwickler auch neue Bildschirme der App hinzu oder verbindet Datenquellen wie SQL-Datenbanken, SharePoint-Listen und Excel-Dateien mit der App.Die mit „2.“ ausgezeichnete Eingabezeile für Formeln dient dazu, eine Formel für das in der Treeview ausgewählte Element zu erstellen oder eine vorhandene Formel zu bearbeiten – zum Beispiel eine oder mehrere Funktionen in die Formel aufzunehmen. Über „3.“ Linke Menüleiste/Toolbar schaltet der Entwickler zwischen verschiedenen Datenquellen oder Eingabeoptionen um. Anhand von „4.“ Strukturansicht (Treeview) wählt der Programmierer ein konkretes Element aus, das sich als Bestandteil in der App befindet. Dieser Bereich umfasst die Registerkarten Bildschirme und Komponenten. Um mit den Features der in Power Apps integrierten Komponentenbibliothek zu arbeiten, genügt ein Klick auf die Registerkarte Komponenten.Der Anzeigebereich zur Visualisierung/Arbeitsbereich („5.“) zeigt eine visuelle Darstellung des in der Treeview selektierten Elements der App an. In diesem Arbeitsbereich setzt ein Entwickler die Hauptbestandteile der App jeweils zu einer eigenständigen Einheit zusammen oder verändert diese entsprechend den Anforderungen. Das Eigenschaftsfenster („6.“) zeigt eine Liste aller Eigenschaften/Properties eines aktuell in der Treeview ausgewählten Objekts an. Dort lässt sich zwischen den drei Registerkarten von den Eigenschaften auf Erweitert oder Ideen umschalten. So legt der Entwickler für die App passende Vorgaben fest beziehungsweise passt die Einstellungen des ausgewählten Objekts an.

Bereitstellen des UI-Kits von Figma für die Entwicklung mit Power Apps

Das UI-Kit von Microsoft für das Design einer App in Figma basiert auf dem eigenen Design-System Fluent (siehe [5]). Microsoft macht dieses UI-Kit auf der Webseite der Figma-Community [6] für Power-Apps-Entwickler zugänglich. Die Eingabe von „Microsoft Power Apps“ (mit Leerzeichen!) in der ganz oben stehenden Suchleiste der Figma-Community-Homepage zeigt in der Trefferliste über die Kategorie Files den Eintrag Microsoft Power Apps – Create Apps from … an. Nach Auswahl dieses Listeneintrags öffnet die zugehörige Figma-Community-Seite im Browser eine Kurzbeschreibung des Figma-UI-Kits. Jetzt empfiehlt es sich, die Desktop-App von Figma auf dem jeweiligen Betriebssystem zu starten und sich anzumelden. Ein Klick auf die Schaltfläche Open in Figma im Browser öffnet dann das UI-Kit in der Desktop-App für das Design von Power-Apps-Anwendungen.Grundsätzlich sollte aus Performancegründen das Arbeiten mit dem Power-Apps-UI-Kit für das UI-Design einer App immer in der Desktop-App von Figma erfolgen. Im Unterschied dazu eignet sich die Web-App von Figma vor allem für das Prototyping und die Zusammenarbeit im Team über das Web.In der Desktop-App von Figma erzeugt das beim Dateinamen befind­liche Kontextmenü durch Auswahl des Eintrags Duplicate eine Kopie des geöffneten UI-Kits. Der dortige Menü­eintrag Rename vergibt für das Projekt einen eigenen Dateinamen. Um das UI-Kit näher zu erkunden, befinden sich im linken Fensterbereich unterhalb der Toolbar zwei Registerkarten (Bild 4):

• Layers: Macht dem Endbenutzer die Dokumentation mit Erläuterungen zum UI-Kit zugänglich.
• Assets: Zeigt alle über das UI-Kit bereitgestellten Figma-Komponenten an. Diese teilt das UI-Kit in die zwei Gruppen Phone und Tablet ein.

Ein Klick auf den Eintrag Read this first im Bereich Pages der Layer-Registerkarte öffnet im Arbeitsbereich von Figma eine Anleitung für den Einsatz des UI-Kits. Wichtigste Voraussetzung bildet die Installation des Segoe-UI-Fonts, den das Design-Kit Fluent 2 verwendet. Dessen Installation überprüft man im Ordner Windows/Fonts, dort muss der gleichnamige Font-Name vorhanden sein. Ansonsten lädt ein Klick auf den Link in der UI-Kit-Dokumentation die Schriftart als ZIP-Datei herunter. Anschließend startet ein Klick auf die zugehörige Schriftartendatei *.ttf oder *.otf die Installation des benötigten Fonts. Die Seite Read this first der UI-Kit-Dokumentation in Figma weist darauf hin, dass es sich um eine Preview-Version handelt.Das UI-Kit von Figma unterstützt das UI/UX-Design eines Prototyps für Power Apps; leider eignet es sich derzeit nur für Testzwecke. Deshalb bietet auch Microsoft zurzeit für eine damit programmierte App noch keinen kommerziellen Support für die Produktion an. Grundsätzlich verfolgt Microsoft mit dem UI-Kit in Figma das Ziel, ein spezifiziertes Design direkt in eine Anwendung für Power Apps zu überführen. Dazu kommt ein Generator zum Einsatz – dieser unterstützt für das UI/UX-Design der App nur die im UI-Kit enthaltenen Komponenten mit den dort aufgeführten Schriften. Zudem müssen die Namen und auch alle Layer der Komponenten des UI-Kits unverändert beibehalten werden. Für aktuell noch fehlende Komponenten empfiehlt Microsoft dem Designer, ein Bild als Platzhalter mit erläuterndem Kommentar aufzunehmen.

User-Interface einer App für Power Apps mit dem UI-Kit entwerfen

Das in Figma von Microsoft bereitgestellte UI-Kit für das UI/UX-Design einer Power-Apps-Anwendung befindet sich noch in der Entwicklungsphase. Derzeit bietet das UI-Kit nur eine kleinere Auswahl der mit Power Apps verfügbaren Komponenten für das UI/UX-Design an. Eine Liste aller vom UI-Kit unterstützten Komponenten findet sich in der Dokumentation des UI-Kits über die Registerkarte Layers beim Listeneintrag Supported components. Um diesen Eintrag in der Liste zu sehen, muss eventuell der aktuell angezeigte Bereich anhand der Trennlinie nach unten vergrößert werden.Dort steht in dieser Liste auch der Eintrag Sample app; dabei handelt es sich um ein von Microsoft fertig erstelltes UI/UX-Design für eine Power-Apps-Anwendung. Diese Beispiel-App lässt sich mittels einer von Power Apps für Figma bereitgestellten Funktion als App in Power Apps Studio importieren. Ein so importierter Prototyp eignet sich für evolu­tionäres Prototyping, indem Programmierer ihn schrittweise in der Entwicklungsumgebung Power Apps Studio erweitern und Endbenutzern präsentieren. Vor dem eigentlichen UI/UX-Design in Figma muss sich der Designer für einen der beiden App-Typen Phone oder Tablet entscheiden.Anschließend beginnt das UI/UX-Design mit dem UI-Kit über die Registerkarte Assets. Dort wählt der Designer in der angezeigten Liste zunächst den Eintrag Local components aus. Diese Liste zeigt die innerhalb des UI-Kits verfügbaren Komponenten an; sie unterteilt sich in zwei Gruppen: Phone und Tablet. Jede dieser Gruppen enthält die aktuell für das UI-Design von Microsoft in Figma bereitgestellten Komponenten. Das UI/UX-Design beginnt generell mit einer Screen-Komponente, die der Designer mittels Drag-and-drop auf eine Seite in die aktuelle Projektdatei positioniert.Im ganz rechts stehenden Eigenschaftsfenster einer UI-Komponente erhält der Designer zusätzliche Hilfestellungen. Klickt er dort unterhalb des Namens der UI/UX-Komponente auf das Icon mit den drei Punkten oder auf die Beschriftung Show more neben deren Erläuterungstext, so öffnet sich die zugehörige Dokumentation. Diese enthält die empfohlene Vorgehensweise beim Einsatz der Komponente innerhalb des UI/UX-Designs. Somit erhält der Entwickler direkten Einblick in die Properties einer Komponente und über deren verfügbaren Funktionen. Im Unterschied zu den Komponenten der Sample-App fehlt dort leider der Link auf die zugehörige Dokumentation von Microsoft für die jeweilige Power-Apps-Komponente (Bild 5).

App mit Komponenten schrittweise gemäß ­dem Lego-Prinzip zusammensetzen

Das Design einer App beginnt mit der Entscheidung, ob diese für ein Phone oder Tablet zu gestalten ist. Nach dieser Festlegung des App-Typs wählt der Designer aus der Liste der vorhandenen Komponenten die jeweils benötigte aus. Den Anfang macht in der Regel eine Screen-Komponente; in diese nimmt der Designer dann sukzessive die zur App gemäß den Anforderungen passenden weiteren Komponenten als Bestandteile auf. Am effizientesten arbeitet der Designer, indem im Arbeitsbereich von Figma eine Komponente positioniert wird. Im linken Fensterbereich von Figma öffnet die Registerkarte Assets eine Liste mit allen im UI-Kit verfügbaren Local Components.Abhängig vom festgelegten App-Typ (Phone, Tablet) klickt der Designer die nächste gewünschte Komponente an. Anschließend öffnet sich rechts neben dieser ausgewählten Komponente ein Fenster mit der Titelzeile Details; darunter steht der Name des aktuellen Projekts. In den beiden anderen Bereichen des Details-Fensters zeigt Figma ein Beispiel der ausgewählten Komponente als visuelle Grafik an und gibt im weiteren Fensterbereich eine kurze Dokumentation aus. Die Dokumentation nennt den von Microsoft vergebenen Namen der Power-Apps-Komponente und beschreibt kurz die Funktionsweise der jeweiligen Komponente.Zusätzlich verdeutlicht die Dokumentation zur Power-Apps-Komponente deren Einsatzgebiete und ihre Verwendungszwecke. So erhält der Designer quasi eine Hilfestellung und nähere Erläuterungen zu den Voraussetzungen, die eine App-Seite für die Aufnahme einer Instanz der Komponente erfüllen muss. Liegen die genannten Vo­raussetzungen noch nicht vor, sollte der Designer zunächst diese in der App schaffen. Diese Vorgehensweise stellt eine konsistente Verwendung der Komponente sicher. Eine Fehlermeldung bei einer Inkonsistenz während des UI/UX-Designs erfolgt derzeit leider nicht. Sobald alle Konventionen für die Wiederverwendung der Power-Apps-Komponente vorhanden sind, genügt ein Klick auf die Schaltfläche Insert instance(Bild 6).

Danach übernimmt Figma die ausgewählte Komponente auf die im Arbeitsbereich angezeigte Seite der App. Sobald der Designer eine neue Komponente übernommen hat, gilt es zu prüfen, ob diese eine eigenständige Instanz in der App bilden soll. Nur eine eigenständige Instanz in Figma erlaubt es, alle Einstellungen individuell und völlig unabhängig von eventuell später vorgenommenen Änderungen in der zugrunde liegenden Komponente vorzunehmen (siehe [5]). Kommt es später zu Änderungen in der Ursprungskomponente, so bleiben diese in allen eigenständigen Instanzen unberücksichtigt. Die Definition einer eigenständigen Instanz erfolgt über deren Kontextmenü durch Auswahl des Eintrags Detach instance.

Mit Figma spezifiziertes Design in eine Power-Apps-Anwendung überführen

Nach der Anmeldung bei Power Apps wählt der Entwickler in der linken Toolleiste die Schaltfläche mit dem kleinen Plus-Icon + Create aus. Daraufhin öffnet Power Apps den Arbeitsbereich Create your app von Power Apps Studio; dort befindet sich die Kachel Figma mit dem Erläuterungstext Start from our Figma UI kit and convert it into an app. Sobald der Entwickler diese Kachel anklickt, öffnet sich das Fenster Canvas app from Figma(Bild 7). Dessen rechter Bereich enthält drei Eingabefelder und den Radiobutton Format:

• App name: Dient der Vergabe eines eigenen, individuellen Namen für die neu anzulegende Power-Apps-Anwendung.
• Link to Figma page or frame: Diesen Link erhält der Entwickler im UI/UX-Design von Figma über den dortigen Button Share in der Toolbar. Dabei muss die gewünschte Page oder der Frame im UI/UX-Design in Figma ausgewählt sein und dort einem definierten Layer entsprechen. Der Link selbst kann sich auch auf eine Gruppe mehrerer ausgewählter Pages oder Frames beziehen. Nach Klick auf den Share-Button in Figma erscheint das Fenster mit der Titelzeile Invite Publish. Dort kopiert ein Klick auf die Schaltfläche Copy link ganz links unten in diesem Dialogfenster den benötigten Link in die Zwischenablage. Danach gibt Figma die Erfolgsmeldung Link copied to clipboard aus.
• �  Figma personal access token: Der Zugriff auf die Figma-Datei mit dem UI/UX-Design erfordert ein individuelles und
• �  persönliches Zugriffstoken. Die Menü­kaskade Help and account | Account settings in Figma zeigt im sich öffnenden Dialogfenster den Fensterbereich Personal access tokens an. Die dortige Schaltfläche Generate new token öffnet das gleichnamige Dialogfenster und vergibt, falls notwendig, einen neuen Token name und eine Expiration. Danach erzeugt ein Klick auf die Schaltfläche Generate token das benötigte persönliche Zugriffstoken. Im nun erscheinenden gelb hinterlegten Ausgabefeld übernimmt ein Klick auf Copy this token in Figma das Zugriffstoken in die Zwi­schen­ablage von Windows.
• �  Format: Hier wählt der Entwickler den im Design festgelegten App-Typ (Tablet, Phone) aus, wobei gilt, dass dieser mit dem App-Typ des UI/UX-Designs identisch sein muss.

�  �  �  Sobald alle oben genannten Eingabefelder befüllt und der passende Radio-Button gemäß dem in Figma definierten App-Typ ausgewählt ist, aktiviert das Dialogfenster Canvas app from Figma in Power Apps Studio die Schaltfläche Create(Bild 7). Ein Klick auf diese Create-Schaltfläche startet den Generator, der aus dem UI/UX-Design in Figma eine Canvas-App für Power Apps erzeugt. Dabei überprüft der Generator, ob das UI/UX-Design für die enthaltenen UI/UX-Elemente alle Konventionen gemäß den Vorgaben des UI-Kits erfüllt. Sind die Konventionen nicht eingehalten, so stoppt der Generator mit einem Hinweis, welche Vorgaben im UI/UX-Design noch einzurichten sind.

Creator Kit – ein Toolkit mit Fluent-UI-Controls basierend auf dem PCF

Das PCF (Power Apps Component Framework) unterstützt professionelle Entwickler oder Citizen Developer bei der Programmierung eigener Komponenten und deren Bereitstellung als Library zur Wiederverwendung in Power Apps. Als IDE kommt Visual Studio Code (VS Code) mit der Marketplace-Erweiterung Power Platform Tools zum Einsatz. Für die Entwicklung mit PCF benötigt der Programmierer zusätzlich Kenntnisse in TypeScript/JavaScript, Node.js, NPM, .NET Framework sowie dem Power Platform CLI (Command Line Interface). Das Power Platform CLI (kurz: PAC) steht für VS Code über die Power Platform Tools und für die Betriebssysteme Linux, macOS, WSL und Windows zur Verfügung.Das Microsoft Power CAT (Customer Advisory Team) und die Power-Apps-Community haben mittels des PCF das Creator Kit für Power Apps entwickelt [7]. Beim Creator Kit handelt es sich um eine Sammlung von Code-Components, eine Reihe von Beispielen für Canvas-Apps und vorgefertigte, mit dem Fluent UI [8] programmierte UI/UX-Komponenten. Um die mittels PCF entwickelten Code-Components in Power Apps zu verwenden, muss zunächst im Admin Center von Power Apps die gewünschte Umgebung ausgewählt werden. Dazu klickt man in deren Toolbar auf Einstellungen/Settings und wählt anschließend Produkt | Funktionen an. Dort schaltet man im Fensterbereich Power Apps component framework für Canvas-Apps den Schalter Veröffentlichen von Canvas Apps mit Codekomponenten zulassen(Bild 8) ein und klickt die Schaltfläche Speichern an.

Die Installation des Creator Kits erfolgt am einfachsten, wie nachfolgend erläutert, innerhalb von Power Apps – die von Microsoft beschriebene Dokumentation gestaltet sich im Vergleich dazu wesentlich aufwendiger. Nach Auswahl des Eintrag Solutions in der linken Toolbar von Power Apps genügt ein Klick in der sich öffnenden oberen Toolbar auf Open AppSource, und es erscheint das Microsoft AppSource-Fenster. Dessen Suchleiste zeigt nach Eingabe von Creator Kit im AppSource-Fenster den gleichnamigen Fensterbereich an. Die dortige Schaltfläche Get it now startet das Power Platform Admin Center und verzweigt in den Ressourcen-Bereich der Dynamics-365-Apps.Im Dialogfenster Installieren Creator Kit wählt man in der Auswahlliste die gewünschte Power-Apps-Umgebung aus und stimmt den beiden Checkboxen Rechtliche Bedingungen und Datenschutzbestimmungen zu. Ein Klick auf die Installieren-Schaltfläche stellt in der Power-Apps-Umgebung das Creator Kit zur Verfügung. Das Power Platform Admin Center gibt die Informationsmeldung Installation von Creator Kit gestartet um … aus. Der im Hintergrund laufende Installa­tionsvorgang dauert einige Minuten. Sobald in der Ressourcen-Liste der Dynamics-365-Apps beim Eintrag von Creator Kit im Statusfeld Installiert erscheint, steht dieses für die Programmierung bereit.

Eigene App mit Fluent-UI-Controls in Power Apps Studio programmieren

Das Creator Kit besteht selbst aus drei eigenständigen Solutions: CreatorKitCore, CreatorKitReference (MDA) und CreatorKitReference (Canvas). Die Solution-Seite in Power Apps zeigt die enthaltenen Solutions des Creator Kits nach Auswahl von Managed und alphabetischer Sortierung untereinander an:

• CreatorKitCore: Enthält Code- und Canvas-Komponenten, wobei einige davon auf Fluent UI basieren.
• CreatorKitReference (MDA): Eine Referenz-App als Beispiel für eine Model-driven App (MDA) mit angepassten Seiten und einem Custom-Page-Template.
• CreatorKitReference (Canvas): Eine Referenz-App als Beispiel für eine Canvas-App, ein Theme-Editor und eine Canvas-Template-App. Der Theme-Editor hilft beim konsistenten Styling der Komponenten; er erzeugt Themes als JSON-Datenstruktur.

Die oben genannten Apps aus den Solutions des Creator Kits erscheinen nach Auswahl von My apps auch in der Apps-Liste von Power Apps: Creator Kit Reference App, Fluent Theme Designer und Canvas Template. Dabei kommt Creator Kit Reference App zweimal in der Apps-Liste vor, einmal als MDA und ein anderes Mal als Canvas-App. Die Fluent-Theme-Designer-App entspricht dem zuvor genannten Theme-Editor. Jede App lässt sich in Power Apps öffnen und wie üblich mittels Vorschau der App anzeigen und mit [F5] ausführen. Um innerhalb einer eigenen App die Komponenten des Creator Kits (Code- und Fluent-UI-Komponenten) zu verwenden, muss zuvor die gewünschte Komponente der PCF-Library mittels Import zugänglich gemacht werden [9].Im Editor von Power Apps Studio öffnet ein Klick auf das +/Einfügen-Icon in der linken Toolbar den gleichnamigen Dialogbereich. Dort startet ein Klick auf Weitere Komponenten abrufen den Programmassistenten Komponenten importieren. Die Einträge der Code-Liste zeigen alle verfügbaren Komponenten an – eine Sortierung anhand des Namens erleichtert die konkrete Auswahl der gewünschten Komponente. Alle Fluent-UI-Komponenten enthalten am Anfang ihres Namens die Kennung Fluent. Nach Auswahl einer Fluent-UI-Komponente aktiviert sich die Schaltfläche Importieren. Sobald der Import erfolgt ist, befindet sich die Fluent-UI-Komponente in der Liste Codekomponenten(Bild 9) im Einfügen-Bereich von Power Apps Studio.

Mit Power Apps und Fluent 2 Anwendungen schneller bereitstellen

Fluent 2 [10] stellt dasjenige von Microsoft mit Figma entwickelte Design-System dar, das sich besonders für die Entwicklung strategischer, unternehmensweiter Apps eignet (siehe [5]). In Kombination mit Power Apps, der Low-Code-/No-Code- und RAD-IDE von Microsoft, beginnt die Entwicklung einer App bereits im UI/UX-Design. Dazu kommt das UI-Kit für Power Apps zum Einsatz, das Microsoft für Fluent 2 in Figma verfügbar macht. Ein von Microsoft in Power Apps bereitgestellter Generator überführt eigene Design-Ergebnisse in Power Apps Studio, die Programmierumgebung von Power Apps. Zusätzlich sind diverse Fluent-UI-Con­trols im Creator Kit von Microsoft und der Power-Apps-Community verfügbar.Power Apps unterstützt aufgrund seiner oben besprochenen Features sowohl eine Softwareentwicklung für professionelle Programmierer als auch für Citizen-Development und die individuelle Datenverarbeitung (IDV). Alle Entwicklungsstränge zusammen in einem oder mehreren Vorgehensmodellen implementiert erhöhen wesentlich die Produktivität in der Anwendungsbereitstellung, sodass sich der Anwendungsrückstau schneller bewältigen lässt. Vorausgesetzt natürlich, das Unternehmen priorisiert seine Geschäftsanforderungen und installiert ein proaktives Management zum Abbau des Anwendungsrückstaus. Dabei wirkt sich auch die Integration von Power Apps in Microsoft 365, Dynamics 365, Microsoft Teams und Azure positiv aus.

Fussnoten

1. [1] Zugriff auf Microsoft 365, http://www.office.com
2. [2] GitHub-Repository von Microsoft Power Fx, http://www.dotnetpro.de/SL2405FluentUI1
3. [3] Jetzt einsteigen mit Power Apps – Kostenlose Test­version, http://www.dotnetpro.de/SL2405FluentUI2
4. [4] Starten der Power-Apps-Entwicklungsumgebung, https://make.powerapps.com
5. [5] Frank Simon, Design-Systeme für UI-Komponenten, dotnetpro 4/2024, Seite 21 ff., http://www.dotnetpro.de/A2404FluentUI
6. [6] Homepage der Figma-Community, http://www.figma.com/community
7. [7] GitHub-Repository des Creator Kits, http://www.dotnetpro.de/SL2405FluentUI3
8. [8] Homepage von Fluent UI, http://www.dotnetpro.de/SL2405FluentUI4
9. [9] GitHub-Repository der Codekomponenten des Creator Kits, http://www.dotnetpro.de/SL2405FluentUI5
10. Homepage von Fluent 2, http://www.dotnetpro.de/SL2405FluentUI6