Speed Dial for Power Apps

Add floating action buttons (FABs) with expandable quick actions to your Power Apps. Speed dials provide quick access to common actions without cluttering your interface.

When to use speed dial

Speed dials work great for apps where users need fast access to 3-5 frequent actions. The main button floats in a corner, and when tapped, it expands to reveal additional action buttons.

Choose your speed dial style

Animated Speed Dial

Floating action button with smooth plus-to-X animation. When expanded, circular action buttons appear in a vertical stack.

Best for: Modern apps that want subtle, professional animations. The circular buttons work well for icon-only actions.

Settings you can customize:

• Primary button color
• Action items (icons, labels, actions)
• Animation duration
• Position (bottom-right, bottom-left, etc.)
• Button size and spacing

Square Speed Dial

Same animation and functionality as Animated Speed Dial, but with square-styled action buttons instead of circular.

Best for: Apps with a more angular, modern design language. Works well when you want a bolder, more geometric look.

Settings you can customize:

• Primary button color
• Action items (icons, labels)
• Button size and border radius
• Position on screen
• Animation timing

Labeled Speed Dial

Floating action button with text labels next to each action icon. Labels make it clear what each action does.

Best for: Apps where users might not immediately understand what icons mean, or when you have actions that need explanation. Great for new users.

Settings you can customize:

• Action items with custom labels
• Label alignment (left or right)
• Label font and weight
• Icon and label colors
• Button sizing and spacing

Implementation steps

1. Select your speed dial style

Go to Speed Dial and choose the variant that fits your app's design.

2. Configure your actions

Click on your chosen component and use the Settings tab to set up:

• Action items - Define each quick action with icon and label
• Icons - Choose clear icons that represent each action
• Position - Usually bottom-right for right-handed users
• Colors - Match your app's color scheme

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect speed dial actions

After pasting, connect each action item to your app logic:

Toggle speed dial open/closed

// Variable to track open/closed state
Set(varSpeedDialOpen, !varSpeedDialOpen)

Navigate to different screens

// Home action
Navigate(HomeScreen, ScreenTransition.Fade)

// Settings action  
Navigate(SettingsScreen, ScreenTransition.SlideLeft)

// Profile action
Navigate(ProfileScreen, ScreenTransition.Cover)

Trigger app actions

// Create new item
Set(varShowNewItemForm, true);
Set(varSpeedDialOpen, false)

// Refresh data
Refresh(MyDataSource);
Notify("Data refreshed!", NotificationType.Success)

Open modal or form

// Quick add action
Set(varShowQuickAdd, true);
Set(varSpeedDialOpen, false)

Common use cases

Task management app

Use speed dial with actions like "New Task", "Quick Note", "Set Reminder", and "View Calendar".

Data entry app

Provide quick actions for "Add Record", "Scan Barcode", "Take Photo", and "View Recent".

Communication app

Add actions for "New Message", "Start Call", "New Contact", and "Search".

Document app

Include actions like "New Document", "Upload File", "Take Photo", and "Scan".

Best practices

• Limit to 3-5 actions - Too many actions defeat the purpose of quick access
• Use recognizable icons - Home, Settings, Add (+), Person are universally understood
• Position consistently - Bottom-right is standard, stick with it unless you have a reason not to
• Include a primary action - The most important action should be obvious
• Close after action - Automatically close the speed dial after user selects an action
• Consider accessibility - Make sure buttons are large enough to tap easily (44px minimum)

Troubleshooting

Speed dial not expanding

Check that your open/close variable is toggling correctly on the main button tap. The visibility of action items should be tied to this variable.

Actions not triggering

Verify each action button has an OnSelect property with your navigation or action code.

Animation not smooth

Ensure animation duration is set appropriately (300-500ms is typical). Very fast or slow animations can feel broken.

Position issues on different screens

Speed dial should use absolute positioning relative to the screen. Check X and Y properties are using Parent.Width and Parent.Height calculations.