Custom Components In Canvas Apps

| Hafsa Farooqui

CUSTOM-COMPONENTS-P0

CUSTOM COMPONENTS IN CANVAS APPS

Components are reusable canvas app building pieces that allow app developers to design unique controls to use within an app or across apps by using a component library. Advanced features like as custom properties are available to components. Components can be very helpful for creating larger programs with similar control patterns. When you alter a component definition inside the app, your changes are reflected in all occurrences.

Consider the following scenario:

We need to display a header in our app, and we have more than 10 screens. In this scenario, if we do not use components, it will be tough to preserve that header on every screen, and if there is any change, such as font size, title, or logo, we will need to browse all screens and make those changes there. To prevent these repeated changes, we may create this as a widget that can then be reused on several screens.

Here’s how you can create custom component.

  1. Create a new blank canvas app.
  2. Select ‘Components’ then ‘+ New Component’
    CUSTOM-COMPONENTS-P0
  3. After creating component, select ‘Insert’ and add a Rectangle.
    CUSTOM-COMPONENTS-P0
  4. Now add a label and image control on top of that rectangle.
    CUSTOM-COMPONENTS-P0
  5. Now create the custom properties for the header.
    CUSTOM-COMPONENTS-P0
  6. Create a property of type TEXT to set header value.
    CUSTOM-COMPONENTS-P0
  7. Add another property of type IMAGE for the logo.
    CUSTOM-COMPONENTS-P0
  8. Now select image control, from property select Image property and set it to HeaderComponent.Logo and do the same for Text Label.
    CUSTOM-COMPONENTS-P0
  9. Set the required size for component.
    CUSTOM-COMPONENTS-P0
    CUSTOM-COMPONENTS-P0
  10. Go to Screen and add component to screen. Then add image and title from right sidebar.
    CUSTOM-COMPONENTS-P0
    CUSTOM-COMPONENTS-P0

A new custom component is added.

Join us next time, as we continue our journey of learning canvas apps.Click here to learn more about Imperium's Power Apps Services. We hope this information was useful, and we look forward to sharing more insights into the Power Platform world.


M
Chief Architect, Founder, and CEO - a Microsoft recognized Power Platform solution architect.

About The Blog

Stay updated with what is happening in the Microsoft Business Applications world and initiatives Imperium is taking to ease digital transformation for customers.


More About Us

We provide guidance and strategic oversight to C-Suite and IT Directors for on-going implementations. Feel free to give us a call.

1 331 250 27 17
Send A Message

Ready to Start?

Get a personalized consultation for your project.

Book a Meeting