Personal Components

Save and organize your custom Power Apps components in your own personal library.

Overview

Personal Components is a powerful feature that allows you to save your own custom Power Apps YAML code alongside optional screenshots. This creates your own personal library of reusable components that you can access anytime.

Available for: Legacy users and users with active Pro+ subscription

Why Use Personal Components?

Building Power Apps often means creating custom components that don't exist in the standard library. With Personal Components, you can:

• Save custom YAML code you've built
• Store component screenshots for quick reference
• Organize all your custom work in one place
• Quickly find and reuse your own components across projects
• Build your own component library tailored to your needs

Creating a Personal Component

Step 1: Navigate to Personal Components

1. Go to the Component Library
2. In the left sidebar under "Tools", click Personal Components
3. You'll see your personal component library (empty if you haven't saved any yet)

Step 2: Create New Component

Click the New Component button in the top right corner. This opens the component creation form.

Step 3: Fill in Component Details

Required Fields:

• Title - Give your component a descriptive name (e.g., "Custom Login Form", "Dashboard Header")
• YAML Code - Paste your Power Apps YAML code

Optional Fields:

• Description - Add notes about what the component does or how to use it
• Screenshot - Upload an image showing what the component looks like
  • Supported formats: PNG, JPEG, JPG, WEBP
  • Maximum size: 5MB
  • Tip: Take a screenshot from Power Apps Studio for accurate reference

Step 4: Save Your Component

Click Save Component and your component will be added to your personal library.

Managing Your Components

Viewing Components

Your personal components are displayed in a grid layout, similar to other category pages. Each component shows:

• Component title
• Description (if provided)
• Screenshot preview (if uploaded)
• YAML code tab for copying

Copying YAML Code

1. Click on any saved component to expand it
2. Switch to the YAML tab
3. Click the Copy YAML button
4. Paste directly into Power Apps Studio

No access checks are required for your own components - you always have full access to copy your saved YAML.

Deleting Components

Single Component Deletion:

1. Click the Select button in the top right
2. Checkboxes appear next to each component
3. Click on components to select them
4. A floating Delete Selected button appears at the bottom
5. Click to delete (you'll see a confirmation dialog)
6. Click Cancel to exit selection mode

Bulk Deletion:

You can select multiple components at once and delete them all together using the same selection mode.

Best Practices

Naming Your Components

Use clear, descriptive names that help you quickly identify what each component does:

• ✅ Good: "User Profile Card - Horizontal Layout"
• ✅ Good: "Custom Search Bar with Filters"
• ❌ Poor: "Component 1", "Test"

Adding Descriptions

Include helpful notes about:

• What the component does
• Where you use it in your apps
• Any special configuration needed
• Variables or data sources required

Taking Screenshots

For best results:

• Use Power Apps Studio's screenshot feature
• Show the component in context when possible
• Ensure the screenshot is clear and readable
• Keep file sizes reasonable (under 1MB is ideal)

Organizing YAML Code

Before saving:

• Format your YAML code properly
• Test it in Power Apps first
• Remove any sensitive data or test values
• Add comments if helpful for future reference

Common Use Cases

Custom Form Layouts

Save specialized form layouts you use across multiple apps:

• Multi-step wizards
• Dynamic form sections
• Custom validation patterns

Brand-Specific Components

Store components customized to your organization's branding:

• Company headers and footers
• Branded buttons and cards
• Custom color schemes

Reusable Templates

Keep templates for recurring patterns:

• Data table layouts
• Dashboard widgets
• Navigation patterns specific to your workflow

Experimental Components

Test new ideas and save working prototypes:

• New interaction patterns
• Custom animations
• Innovative UI solutions

Tips & Tricks

Version Your Components

Add version numbers to titles when you make significant changes:

• "Dashboard Header v1"
• "Dashboard Header v2 - Mobile Optimized"

Group Related Components

Use consistent naming prefixes to group related components:

• "Login - Form"
• "Login - Header"
• "Login - Footer"

Keep a Component Changelog

In the description field, note when you last updated the component and what changed.

Regular Cleanup

Periodically review your personal library and delete components you no longer use to keep things organized.

Troubleshooting

Can't Access Personal Components

Solution: Personal Components requires either:

• Legacy account (lifetime access), OR
• Active Pro+ subscription

If you don't have access, you'll be redirected to the pricing page.

Upload Failed

If image upload fails:

• Check file size (must be under 5MB)
• Verify file format (PNG, JPEG, JPG, WEBP only)
• Try compressing the image
• Check your internet connection

Component Not Saving

Ensure both required fields are filled:

• Title cannot be empty
• YAML code cannot be empty

Can't See My Components

Try refreshing the page. If components still don't appear, check:

• You're logged in to the correct account
• You have an active subscription or legacy access

Access Requirements

Who Can Use Personal Components:

• Legacy users (lifetime access to all features)
• Users with active Pro+ subscription

What's Included:

• Unlimited component storage
• Image uploads up to 5MB per component
• Full CRUD operations (Create, Read, Update, Delete)
• Instant YAML code access

Next Steps

• Browse the Component Library for inspiration
• Learn about Settings Customization
• Explore YAML Code Export techniques

Need help? Contact support through the chat widget in the bottom right corner.