Updated Button Control in Power Apps

Introduction

• Microsoft has released a new feature allowing users to natively add icons to buttons.
• The new button control simplifies the process by eliminating the need for components or combining controls.

Overview

• Learn to use the updated button control to build modern power apps.
• Understand tips and tricks to maximize the feature.
• Determine when to use the classic versus modern button control.
• Announcement about a new tutorial series on the YouTube channel.

Demo App

• Example: A simple app for managing recipes, chefs, and client events.
• All app components and datasets are available to channel members on Patreon and YouTube.

Classic Button Control

• Versatile control often used in custom UIs.
• Adding icons involved multiple steps:
  1. Add a non-responsive container.
  2. Fill the container.
  3. Add a text label and icon inside the container.
  4. Overlay with a transparent button to make it clickable.

New Modern Button Control

• Simplifies the icon addition process: just add the button control.
• How to enable:
  • Enable it in app settings.
  • Once enabled, select the modern button control.
• Base Structure:
  • Looks similar to the classic button control but with extra options.

Key Properties

1. Text Property:
   • Change the button text.
2. Icon Property:
   • Select any icon to appear inside the button.
   • Options to position the icon (before or after the text, icon only, or text only).
3. Accessible Label:
   • For screen readers, e.g., label as “save button”.
4. Visible Property:
   • Turns visibility on or off.
5. Display Mode:
   • Determines interactivity (edit to interact, view to disable).
6. Alignment:
   • Horizontal (center, left, right) and vertical (top, middle, bottom) alignments.
7. Size and Position:
   • Adjust width, height, X, Y positions.
8. Padding:
   • Adjust padding similar to other controls.
9. Icon Rotation:
   • Can animate button icons (e.g., sync icon using a timer control).

Animation with Timer Control

• Demonstrates using a timer control to animate an icon on the button, e.g., a rotating sync icon.

Style and Theme

• Multiple button types: Primary, Secondary, Outline, Subtle, Transparent.
• Icon Styles: Outline and Filled icons for consistency.
• Color Palette: Similar to theme settings, font options, and border radius adjustments.
• Limitations:
  • Limited to predefined icons.
  • Cannot directly set specific color codes.
  • Requires containers for certain customization.

Limitations and Workarounds

• Workaround using containers to create buttons with specific fill colors.
• Transparent buttons can make non-clickable items clickable by clearing text and icons.

Conclusion

• Announcement of new tutorial series for quick UI/UX tips in power apps.
• Encouragement to subscribe and like the video.

Next Steps

• Look out for more tutorials on modern themes and custom SVGs.