Mit der Bild und Figma-Integration in Power Apps kannst du Design-Entwürfe direkt in voll funktionsfähige Apps umwandeln – ohne manuelles Nachbauen jeder einzelnen Komponente. In diesem Blog zeige ich dir Schritt für Schritt, wie du dein Bild-Design importierst, anpasst und deine erste Power Apps–Anwendung erstellst.
Dieses Feature gibt es in Power Apps schon seit einigen Jahren, es ist nicht neu, was sich im Laufe der Zeit verändert und verbessert hat, ist die Art und Weise wie die Erstellung abläuft. Früher waren deutlich mehr Anpassungen erforderlich als heute.
Ausgangslage, um dieses Feature zu nuten kann eine lockere Gesprächsrunde als „Brainstorming“ sein, um den ersten Entwurf einer App zu entwerfen – ohne Power Apps.
Nehmen wir an, es gibt eine Skizze vom Vorhaben, siehe Screenshot:
Nach dem Meeting ist ein erster Rohentwurf auf dem Blatt Papier entstanden. Das wird im Nachfolgenden als Blaupause für die Erstellung einer App verwendet.
Schritt 1: App in der Power App mittels „Als Bild oder eine Figma-Datei“ erstellen
- Klicke im Power Apps Portal links im Menü auf “Erstellen“ -> Mit einem Seitendesign beginne
- Klicke auf die Option „Als Bild oder eine Figma-Datei“
- Klicke „Mit einem Bild beginnen“ -> „Weiter“
Schritt 2: Name, Bild und Format definieren
- Wähle einen Namen für die App aus
- Lade dein Bild, wie oben erwähnt, hoch
- Wähle ein Format aus
Schritt 3: Anpassungen vornehmen
- Definiere mittels Zuweisungen der sog. Tags, welche Objekte welchen Komponenten entsprechen.
- Wahrscheinlich ist es, dass nicht alle Objekte korrekt vom System erfasst und erkannt worden sind
- Klicke auf die Tags und weise ggf. die richtige Komponente zu, siehe Screenshot
Schritt 4: Daten einrichten
- Als nächster Schritt erfolgt optional die Erstellung einer passenden Datentabelle in Dataverse
Hinweis: hierzu ist es erforderlich, dass eine Power Apps Premium Lizenz vorhanden ist. Aus diesem Grund verzichte ich auf die Erstellung der Datenquelle. Diese kann im Nachhinein noch erstellt werden, es kann ebenso z.B. eine SharePoint-Liste sein
- Klicke auf „Vorerst überspringen“
Schritt 5: App anpassen und konfigurieren
- Nach weinigen Augenblicken sehen wir sich die App im Power Apps Studio öffnen
- Die App enthält bereits Beschreibungen und Eingabefelder
- Dennoch muss angemerkt werden, dass die App noch einiges an Anpassungen benötigt, bevor sie als fertig ausgeliefert und eingesetzt werden kann.
- Fehler sind nicht auszuschließen!
Schritt 6: App erstellen mit anhand eines Beispielbilds vom Microsoft
- Unternehme einen neuen Versuch und erstelle eine weitere App indem du die Option „Mit einem Beispielbild beginnen“ testest
- Untersuche die hierbei möglichen Arbeitsergebnisse
- Je deutlicher das Ausgangsbild ist, desto besser sind auch die Ergebnisse
- Das Bild kann auch eine getippte Datei sein, dann fallen die Ergebnisse deutlich besser aus, siehe Screenshot:
- Das Resultat lässt sich durchaus sehen:
Fazit
Diese Vorgehensweise ist dennoch ein Feature, welches den ersten Einstieg und den Erstellungsprozess etwas vereinfacht und erleichtert. Die Erstellung stellt eine Option dar, wenn weder eine Datenstruktur noch etwas anderes vorliegt und vereinfacht den gesamten Prozess, wenn eine App benutzerdefiniert erstellt werden soll.
Praxisnahe Ergänzungen
Wer das Thema strukturiert weiterdenken, praxisnah einordnen oder ähnliche Themen vertiefen möchte, findet in folgenden Trainings passende Anknüpfungspunkte: