🔁 Controls That Should Be Reusable Components in Power Apps
1️⃣ Header/App Bar Component (MOST COMMON)
Controls inside:
• Label (Title)
• Icons (Back, Home, Refresh, Profile)
• User photo
Why make it reusable?
✔ Same header across all screens
✔ Easy branding
✔ Centralized updates
Inputs:
• TitleText
• ShowBackIcon
• OnBack
⸻
2️⃣ Footer/Bottom Navigation Component
Controls inside:
• Icons + labels (Home, Add, Search, Profile)
Why reusable?
✔ Same navigation on every screen
✔ Mobile-friendly
✔ One navigation logic
⸻
3️⃣ Custom Button (Fluent Button)
Controls inside:
• Button / Rectangle
• Icon
• Label
Why reusable?
✔ Consistent button styling
✔ Easy Fluent UI look
Examples:
• Primary button
• Secondary button
• Icon button
⸻
4️⃣ Confirmation Popup / Dialog Component
Controls inside:
• Label (message)
• Yes / No buttons
• Overlay background
Why reusable?
✔ Avoid duplicate popups
✔ Safer delete / submit actions
Inputs:
• Message
• OnConfirm
• OnCancel
⸻
5️⃣ Status Badge / Pill Component
Controls inside:
• Label
• Rounded rectangle
Use case:
• Pending
• Approved
• Rejected
• Completed
Why reusable?
✔ Clean galleries
✔ Visual clarity
✔ Used everywhere
⸻
6️⃣ Gallery Row Template (Advanced & Powerful)
Controls inside:
• Labels
• Icons
• Status badge
• Arrow icon
Why reusable?
✔ Consistent list design
✔ Easier Fluent UI adoption
💡 Note:
You don’t replace the gallery itself — you embed the component inside the gallery.
⸻
7️⃣ Search Bar Component
Controls inside:
• Text input
• Search icon
• Clear icon
Why reusable?
✔ Same search UX everywhere
✔ Clean filters
Inputs:
• SearchText
• OnSearch
⸻
8️⃣ Filter Panel Component
Controls inside:
• Dropdowns
• Toggles
• Date pickers
Why reusable?
✔ Repeated filtering logic
✔ Cleaner screens
⸻
9️⃣ Loader/Spinner Component
Controls inside:
• Spinner icon
• Overlay
Why reusable?
✔ Same loading experience
✔ Easy to show/hide
⸻
🔟 Empty State Component
Controls inside:
• Icon
• Message
• Action button
Use case:
• No records found
• No search results
⸻
1️⃣1️⃣ User Profile Card Component
Controls inside:
• Image
• Name
• Role
• Email
Why reusable?
✔ Same profile view everywhere
⸻
1️⃣2️⃣ Notification / Toast Component
Controls inside:
• Label
• Icon
• Background
Why reusable?
✔ Centralized success/error messages
⸻
1️⃣3️⃣ Form Section Component
Controls inside:
• Section title
• Grouped input controls
Why reusable?
✔ Large forms become manageable
⸻
1️⃣4️⃣ KPI / Summary Card Component
Controls inside:
• Count
• Icon
• Label
Examples:
• Completed: 204
• Pending: 14
Perfect for dashboards.
⸻
🧠 Rule of Thumb (Very Important)
Create a component if:
✔ It appears on more than one screen
✔ It has repeating UI or logic
✔ It needs consistent styling
✔ You may need to change it later
⸻
❌ What NOT to Make a Component
❌ Entire screens
❌ Highly app-specific logic
❌ One-time controls
❌ Heavy data operations
⸻
⭐ Pro Tip for Fluent UI Apps
To build Fluent UI apps in Power Apps, your first reusable components should be:
1. Header
2. Footer navigation
3. Button
4. Status badge
5. Popup dialog
These 5 alone will transform your app quality.
