Power Apps and Library Component

Library components in Power Apps are reusable building blocks or modules that can be created and shared across multiple apps. These components are designed to include frequently used UI elements, logic, or functionality, helping developers maintain consistency, reduce redundancy, and speed up the app development process.

Why Library Components are useful?

Here's a shorter breakdown of Library Components in Power Apps.

1. Reusability: Create once, and use in multiple apps to avoid repeating the same design or logic.
2. Consistency: Ensures a uniform look and feel across all apps using the same components.
3. Sharing: Share components within your organization for collaboration and standardization.
4. Customization: Add input properties to adjust the component's behavior for different apps.
5. Maintenance: Update a component once, and all apps using it get the update automatically.

The steps to create components inside a component library are the same as creating components inside an app. You'll create a component library and then reuse the steps for creating components and then you'll use the component library to provide the reusable components in a new app.

Step 1. Sign in to Power Apps.

Step 2. Select Component Libraries in the left navigation, and then select New Component Library. Alternatively, select More from the left navigation > select Discover all > select Component libraries from the App enhancements section.

Step 3. Name the component library as Menu components; you can also provide a different name of your choice.

Step 4. One default component will be added automatically. Rename that as Header.

Step 5. Insert label and image control from the insert. Rename the label as lblHeader and the image as imgHeader.

Step 6. Change the text property value of the label to "This is Header Text" and the Width property value to "App.ActiveScreen.Width". Fill in the color as per your choice.

Step 7. Select the image control and from edit select stock image as per your choice. Adjust the width of the image control as per the image selected.

Step 8. As per the given image, make the duplicate component and rename it as Footer and same way adjust the color and image as per your choice.

Step 9. Save and publish the component.

Step 10. Now we need to import components into the canvas app. From the left panel select Insert and click on "Get more components". Select the components and click on the Import. Both the custom components will be added to the app.

Step 11. You just need to go to the screen and from insert -> Library Components -> Click the component you want to add to the screen.