Components in Canvas Apps

| Zoha Zulfiqar

In this blog, we are going to learn about components in canvas applications. Components are reusable elements that save time and effort of creating something again and again. Suppose we have to create a canvas application with more than five screens and we need the same header and footer for every screen, this is where components come to rescue.

Once a component is created, we can save it in component library to reuse it later in the same application or in other applications as well.

Here is how to create a component directly from an app:

Step-1: Create a new Canvas Application, go to Components -> Add a new Component.

Components in Canvas App

Step-2: In this step, I have customized the component by adding some controls in it. As this is a header component, I have added a blue rectangle box, an image control for the company log, a text label for company name and another image control for a user profile picture.

Components in Canvas App

Step-3: After adding controls, I’m going to add custom properties for each of these controls so they can act as dynamic controls and anyone can put the data as they want so that it can be reused on any screen and on any other app.

Components in Canvas App

Step-4: As Title property needs text data, so it’s data type is set to text. For other two custom properties, I’ve set image as their data type because one of them is used as company logo and another is used a a profile picture.

Components in Canvas App

Step-5: Now I’m assigning the custom properties to their respective control so that later a user can use these to put their own choice of data in these controls.

Components in Canvas App

Step-6: After customizing the header component, I’ve set its size property so to get rid of all the extra space and to make it look like an actual header.

Components in Canvas App

Step-7: After completing the component making process, let’s go back to main screen of the canvas application and go to Insert tab -> Custom -> Header (component that we just created).

Components in Canvas App

Step-8: After adding the component to the screen, their controls can be customized easily by going to component properties as setting all the controls as required.

Components in Canvas App

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.

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