Navigationsleiste

So erstellst du eine ausklappbare und dynamische Navigationsleiste in Power Apps

In diesem Tutorial zeige ich dir, wie du in PowerApps eine ausklappbare und dynamische Navigationsleiste erstellst. Diese Navigationsleiste kann flexibel in jede App integriert werden und funktioniert sowohl auf Desktop- als auch auf Smartphone-Anwendungen. Die fertige Navigationsleiste kannst du kostenlos herunterladen.

Was bedeutet "ausklappbar"?

Eine ausklappbare Navigationsleiste ist besonders praktisch, da sie bei Bedarf vergrößert oder verkleinert werden kann. Wenn die Navigationsleiste eingeklappt ist, nimmt sie wenig Platz ein. Bei einem Klick auf das Hamburger-Menü breitet sie sich aus und zeigt alle Navigationsoptionen an. Du kannst die Navigationsleiste so gestalten, dass sie entweder über dem restlichen Inhalt der App liegt oder diesen nach rechts verschiebt.

Schritt 1: App erstellen

Starte Power Apps und erstelle eine leere Canvas App im Tablet-Format. Gib deiner App einen passenden Namen, z.B. "Navigationsleiste".

Schritt 2: Komponente erstellen

Gehe zur Strukturansicht und klicke auf Komponenten. Erstelle eine neue Komponente, die du z.B. "Navigationsleiste" nennst. Die Breite der Navigationsleiste legst du zunächst auf 70 Pixel fest, wenn sie eingeklappt ist. Die Höhe machst du abhängig von der Höhe der App, damit die Navigationsleiste responsive bleibt.

Komponente
Height = App.DesignHeight

Schritt 3: Hamburger Menü hinzufügen

Füge das Hamburger Menü als Symbol in die obere linke Ecke der Navigationsleiste ein. Dies wird der Button, der die Navigationsleiste ausklappt.

Hamburger Icon
OnSelect = Set(varAusgeklappt;!varAusgeklappt)

Schritt 4: Breite der Navigationsleiste dynamisch gestalten

Verwende eine benutzerdefinierte Eigenschaft, um die Breite der Navigationsleiste abhängig davon zu machen, ob das Hamburger-Menü geklickt wurde. Mit einer globalen Variablen kannst du steuern, ob die Leiste ausgeklappt (z.B. 1/4 der Bildschirmbreite) oder eingeklappt (70 Pixel) ist.

Komponente Navigationsleiste
NavBreite = If(varAusgeklappt;App.DesignWidth/4;70)

Schritt 5: Vertikale Navigation einfügen

Erstelle eine vertikale Galerie unterhalb des Hamburger Menüs, die die Navigationsoptionen darstellt. In dieser Galerie kannst du die Symbole für die verschiedenen App-Bildschirme hinzufügen, z.B. "Home", "Einstellungen" oder "Shopping".

Schritt 6: Rechteck für ausgewählte Navigation

Füge ein schmales Rechteck hinzu, das anzeigt, welcher Menüpunkt gerade aktiv ist. Dieses Rechteck soll nur sichtbar sein, wenn der entsprechende Menüpunkt ausgewählt wurde. Außerdem soll die Farbe des ausgewählten Menüpunkts angepasst werden.

Rechteck
Visible = ThisItem.IsSelected

Icon
Color = If(ThisItem.IsSelected;RGBA(135; 100; 184; 1);Color.Black)

Schritt 7: Beschriftung für Navigation hinzufügen

Direkt neben den Symbolen kannst du auch die Beschriftung der jeweiligen Seite (z.B. "Home", "Einstellungen") einfügen. Diese soll nur angezeigt werden, wenn die Navigationsleiste ausgeklappt ist.

lbl_Titel
X = 70
Width = Parent.TemplateWidth-70

Schritt 8: Benutzerdefinierte Eigenschaften für dynamische Menüpunkte

Damit du die Navigationsleiste flexibel in verschiedene Apps integrieren kannst, legst du eine benutzerdefinierte Eigenschaft für die Menü-Items an. So kann jede App ihre eigenen Menüpunkte in die Navigationsleiste einfügen.

Schritt 9: Navigation zwischen Bildschirmen

Wenn ein Menüpunkt angeklickt wird, soll die App zu einem neuen Bildschirm navigieren. Dies kannst du durch die Funktion Navigate() steuern. Dabei wird die Navigationsleiste automatisch eingeklappt.

ico_NavSteuerung
OnSelect =
Set(varAusgeklappt;false);;
Navigate(ThisItem.Bildschirm;ScreenTransition.Fade)

Schritt 10: Integration in andere Apps

Du kannst die Navigationsleiste in jede beliebige Power App einfügen. Nachdem du die Navigationsleiste exportiert hast, gehst du in die App, in der du sie verwenden möchtest, und importierst die Komponente. Passe die Menüpunkte an die jeweiligen Bildschirme der App an und schon kannst du die Navigationsleiste flexibel verwenden.

Ich hoffe dieses Tutorial hilft dir dabei, deine Business Apps benutzerfreundlicher und effektiver zu gestalten.

Wenn du mehr über Power Apps erfahren möchtest, dann melde dich gerne für meinen Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps zusende.

 Schaue dir gerne auch mein Detailvideo an: