Icon Buttons

Erstelle deinen animierten Icon Button in Power Apps

Heute zeige ich dir, wie du in Power Apps den neuen Icon Button nutzt und mit dem Timer Steuerelement kombinierst. Damit kannst du dann deinen Icon Button animieren.

Schritt 1: Moderne Steuerelemente aktivieren

Starte damit, die modernen Steuerelemente deiner App zu aktivieren. Diese sind aktuell in der Testphase und noch nicht automatisch in Power Apps integriert. Eventuell sind diese zu einem späteren Zeitpunkt bereits in der Standard Power Apps Oberfläche vorhanden.

Schritt 2: Icon Button einfügen

Jetzt kannst du deiner App einen Icon Button hinzufügen. Du kannst aktuell nur aus den vorgegebenen Icons wählen und diese im Button integrieren.

In meinem Beispiel füge ich einen Speichern Button inkl. Diskettensymbol ein.

Schritt 3: Layout und Ausrichtung des Icons

 Für das Icon stehen dir verschiedene Optionen zur Verfügung. Du kannst dieses links oder rechts vom Text anzeigen lassen, nur das Icon darstellen oder nur den Text.

Damit kannst du z.B. eine dynamische Navigationsleiste erstellen und je nach Status dieser den Text, das Icon oder auch beides anzeigen lassen. (Hier findest du Details dazu, wie du eine dynamische Navigationsleiste erstellen kannst – Hier kannst du kostenlos eine dynamische Navigationsleiste herunterladen)

Schritt 4: Icon Animation

Mithilfe des Timer Steuerelements kannst du deinem Icon Button eine Animation hinzufügen.

In diesem Beispiel wird bei Klick auf den Icon Button das Symbol von der Diskette auf den Kreispfeil geändert sowie der Timer gestartet. Der Ausgabewert des Timers wird für die Rotation des Icons verwendet. Nachdem der Timer beendet ist, wird wieder das Disketten Icon angezeigt.

Icon Button
OnSelect = UpdateContext({varStartTimer:true}) //Bei Klick auf den Button, wird die Variable varStartTimer auf true gesetzt
Icon = If(varStartTimer;"ArrowClockwise";"Save") //Solange varStartTimer true ist, wird das Icon "ArrowClockwise" angezeigt
IconRotation = If(varStartTimer;Timer1.Value/3;0) //Der Wert des Timers wird für die Rotation des Icons verwendet

Timer
Duration = 1500 //Der Timer läuft 1500 Millisekunden = 1,5 Sekunden
Start = varStartTimer //Der Timer wird gestartet, sobald varStartTimer auf true gesetzt wird
OnTimerEnd = UpdateContext({varStartTimer:false}) //Wenn der Timer durchgelaufen ist, wird varStartTimer auf false gesetzt

Ich hoffe diese Schritt für Schritt Anleitung hilft dir dabei, deine Apps professioneller und benutzerfreundlicher zu gestalten.

Melde dich gerne für meinen Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps & Power Automate zusende.

Hier gehts zum Detailvideo: