Canvas component overview (contains video) - Power Apps (2023)

  • Article
  • 6 minutes to read


  • This section explains canvas components that encompasses low-code UI extensibility capabilities. Professional developers can also use the Power Apps component framework to build code components.
  • Canvas components can also be used in model-driven apps using custom pages and component library. More information: Add canvas components to a custom page in a model-driven app

Components are reusable building blocks for canvas apps so that app makers can create custom controls to use inside an app, or across apps using a component library. Components can use advanced features such as custom properties and enable complex capabilities. This article introduces component concepts and some examples.

Components are useful in building larger apps that have similar control patterns. If you update a component definition inside the app, all instances in the app reflect your changes. Components also reduce duplication of efforts by eliminating the need to copy/paste controls and improve performance. Components also help create collaborative development and standardizes look-and-feel in an organization when you use a component library.

Watch this video to learn how to use components in canvas apps:

Components in canvas apps

You can create a component from within an app as explained in this article, or by creating a new component inside a component library. A component library should be used for requirements to use components across multiple app screens. You can also copy the existing components into an existing or a new component library.

To create a component within an app, go to Tree View, select the Components tab, and then select New component:

Canvas component overview (contains video) - Power Apps (1)

Selecting New component opens an empty canvas. You can add controls as part of the component definition on the canvas. If you edit a component in the canvas, you'll update instances of the same component in other app screens. Apps that reuse an already created component can also receive component updates after you publish component changes.

You can select a component from the list of existing components in the left pane after you select a screen. When you select a component, you insert an instance of that component onto the screen, just as you insert a control.

Components available inside the app are listed under the Custom category in a list of components inside the tree view. Components imported from component libraries are listed under the Library components category:

Canvas component overview (contains video) - Power Apps (2)


Components discussed in this article are different from the Power Apps component framework that enables developers and makers to create code components for model-driven and canvas apps. For more information, go to Power Apps component framework overview.

Custom properties

A component can receive input values and emit data if you create one or more custom properties. These scenarios are advanced and require you to understand formulas and binding contracts.

Input property is how a component receives data to be used in the component. Input properties appear in the Properties tab of the right-hand pane if an instance of the component is selected. You can configure input properties with expressions or formulas, just as you configure standard properties in other controls. Other controls have input properties, such as the Default property of a Text input control.

Output property is used to emit data or component state. For example, the Selected property on a Gallery control is an output property. When you create an output property, you can determine what other controls can refer to the component state.

The following walk-through further explains these concepts.

(Video) Canvas Components Overview - Power Apps

Create an example component

In this example, you'll create a menu component that resembles the following graphic. And you can change the text later to use it in multiple screens, apps, or both:

Canvas component overview (contains video) - Power Apps (3)


We recommend that you use a component library when creating components for reuse. Updating components inside an app only makes the component updates available inside the app. When using a component library, you get prompted to update components if components inside a library are updated and published.

Create a new component

  1. Create a blank canvas app.

  2. In the Tree View, select Components and then select New component to create a new component.

    Canvas component overview (contains video) - Power Apps (4)

  3. Select the new component in the left pane, select the ellipsis (...), and then select Rename. Type or paste the name as MenuComponent.

  4. In the right-hand pane, set the component's width as 150 and its height as 250, and then select New custom property. You can also set the height and width to any other value as appropriate.

    Canvas component overview (contains video) - Power Apps (5)

  5. In the Display name, Property name, and Description boxes, type or paste text as Items.

    Canvas component overview (contains video) - Power Apps (6)

    Don't include spaces in property name because you'll refer to the component by this name when you write a formula. For example, ComponentName.PropertyName.

    The display name appears on the Properties tab of the right-hand pane if you select the component. A descriptive display name helps you and other makers understand the purpose of this property. The Description appears in a tooltip if you hover over the display name of this property in the Properties tab.

  6. In the Data type list, select Table, and then select Create.

    Canvas component overview (contains video) - Power Apps (7)

    The Items property is set to a default value based on the data type that you specified. You can set it to a value that suits your needs. If you specified a data type of Table or Record, you might want to change the value of the Items property to match the data schema that you want to input to the component. In this case, you'll change it to a list of strings.

    You can set the property's value in the formula bar if you select the name of the property on the Properties tab of the right-hand pane.

    Canvas component overview (contains video) - Power Apps (8)

    As the next graphic shows, you can also edit the property's value on the Advanced tab of the right-hand pane.

    (Video) Power Apps Creator Kit Overview

  7. Set the component's Items property to this formula:


    Canvas component overview (contains video) - Power Apps (9)

  8. In the component, insert a blank vertical Gallery control and select Layout on the property pane as Title.

  9. Make sure that the property list shows the Items property (as it does by default). And then set the value of that property to this expression:


    This way, the Items property of the Gallery control reads and depends on the Items input property of the component.

  10. Optional - set the Gallery control's BorderThickness property to 1 and its TemplateSize property to 50. You can also update values for border thickness and template size to any other value as appropriate.

Add component to a screen

Next, you'll add the component to a screen and specify a table of strings for the component to show.

  1. In the left pane, select the list of screens, and then select the default screen.

    Canvas component overview (contains video) - Power Apps (10)

  2. On the Insert tab, open the Components menu, and then select MenuComponent.

    Canvas component overview (contains video) - Power Apps (11)

    The new component is named MenuComponent_1 by default.

  3. Set the Items property of MenuComponent_1 to this formula:

    Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})

    This instance resembles this graphic, but you can customize the text and other properties of each instance.

    Canvas component overview (contains video) - Power Apps (12)

Create and use output property

So far, you've created a component and added it to an app. Next, you'll create an output property that reflects the item that the user selects in the menu.

  1. Open the list of components, and then select MenuComponent.

  2. In the right-hand pane, select the Properties tab, and then select New custom property.

  3. In the Display name, Property name, and Description boxes, type or paste Selected.

  4. Under Property type, select Output, and then select Create.

    Canvas component overview (contains video) - Power Apps (13)

    (Video) Introduction to Power Apps Canvas App | What is Standalone Power Apps Canvas App?

  5. On the Advanced tab, set the value of the Selected property to this expression, adjusting the numeral in the gallery name if necessary:


    Canvas component overview (contains video) - Power Apps (14)

  6. On the default screen of the app, add a label, and set its Text property to this expression, adjusting the numeral in the component name if necessary:


    MenuComponent_1 is the default name of an instance, not the name of the component definition. You can rename any instance.

  7. While holding down the Alt key, select each item in the menu.

    The Label control reflects the menu item that you selected most recently.


Input and output properties clearly define the interface between a component and its host app. By default, the component is encapsulated so that it's easier to reuse the component across apps, requiring the use of the properties to pass the information in and out of the component. Scope restrictions keep the data contract of a component simple and cohesive, and it helps enable component-definition updates—especially across apps with component libraries.

But there are times when a component may want to share a data source or a variable with its host. Especially when the component is only intended for use in one particular app. For these cases, you can directly access app level information by turning on the Access app scope switch in the component's property pane:

Canvas component overview (contains video) - Power Apps (15)

When Access app scope is turned on, the following are accessible from within a component:

  • Global variables
  • Collections
  • Controls and components on screens, such as a TextInput control
  • Tabular data sources, such as Dataverse tables

When this setting is turned Off, none of the above are available to the component.Set and Collect functions are still available but the resulting variables and collections are scoped to the component instance and not shared with the app.

Non-tabular data sources, such as Azure Blob Storage or a custom connector, are available whether this setting is turned on or off.Think of these data sources more like referencing an environment resource rather than an app resource.When a component is brought into an app from a component library, these data sources from the environment are also brought in.

Components in a component library can never have access to app scope, as there's no single app scope to refer to. So, this setting isn't available in this context, and is effectively off.Once imported into an app, and if customization was allowed by the component maker, the switch can be enabled, and the component can be modified to use the app scope.


  • You can insert instances of components into a screen within a component library, and preview that screen for testing purposes.
  • Component library doesn't display when using Power Apps Mobile.

Import and export components (retired)


This feature is retired. Component libraries are the recommended way to reuse the components across the apps. When using component library, an app maintains dependencies on the components it uses. The app maker will be alerted when the updates to dependent components become available. Hence, all new reusable components should be created within the component libraries instead.

The ability to import and export of components is disabled by default since this feature is retired. While recommended method to work with components is to use component libraries, you can still enable this feature on a per-app basis as an exception until the feature is removed. To do this, edit your app in Power Apps Studio and then, go to Settings > Upcoming features > Retired > Set Export and import components to On.

Canvas component overview (contains video) - Power Apps (16)

After you enable this feature, you can use the following capabilities to import and export components.

(Video) PowerApps Code Components For Canvas Apps

Import components from another app

To import one or more components from one app into another, select Import components from the Insert menu and then use the Custom drop-down menu. Or use Components in the tree view on the left pane.

A dialog box lists all apps that contain components that you have permission to edit. Select an app, and then select Import to import the most recent published version of all of the components in that app. After you import at least one component, you can edit your copy and delete any that you don’t need.

Canvas component overview (contains video) - Power Apps (17)

You can save an app with existing components to a file locally and then reuse the file by importing it. You can use the file to import components to another app.

If the app contains a modified version of the same component, you're prompted to decide whether to replace the modified version or cancel the import.

After you create components in an app, other apps can consume the components from this app by importing them.


If a component that you imported from another app is modified in the original app, you must manually import the component again in the consuming app to receive latest component changes. Use component libraries instead to work with component updates more efficiently.

Export components from your app

You can export components to a file and download them for import to another app.

Select the Export components option from the Components section in the tree view on the left pane:

Canvas component overview (contains video) - Power Apps (18)

You can also use the Insert menu and then select the Custom drop-down menu instead.

Canvas component overview (contains video) - Power Apps (19)

Selecting Export components downloads the components to a file:

Canvas component overview (contains video) - Power Apps (20)

The downloaded component file uses the .msapp file name extension.

Import components from exported components file

To import components from an exported components file, select Import components from either Insert menu and then use the Custom drop-down menu or use Components in the tree view on the left pane. From the components dialog box, select Upload file instead of selecting any other components or apps:

Canvas component overview (contains video) - Power Apps (21)

From the Open dialog box, browse to the location of the component file and select Open to import components inside the app.

Import components from exported app

You can save an app locally using the File > Save As option:

(Video) 👍 Build Your First Canvas Power Apps Tutorial [Hands-On Course]

Canvas component overview (contains video) - Power Apps (22)

Once you save the app, you can reuse the components of this app using the same method of importing components from a file. Follow the steps in the previous section on import components from exported components file.

Known limitations

  • A custom input property can't be configured to a custom output property value across same or different instances when you have two or more instances of same component in an app. This action will result in a circular reference warning message. To work around this limitation, you can create a copy of the component inside your app.
  • Adding and running Power Automate flows in component libraries is not supported.
  • You can't save data sources or controls that include data from those data sources (such as forms, fluid grids, or data tables) with components.
  • You can't insert a component into a gallery or a form (including SharePoint form).
  • Components don't support the UpdateContext function, but you can create and update variables in a component by using the Set function. The scope of these variables is limited to the component, but you can access them from outside the component through custom output properties.

Next steps

Learn to use a component library to create a repository of reusable components.

See also

  • Component library
  • Component library application lifecycle management (ALM)
  • Map input fields of a component
  • Add multimedia to a component
  • Behavior formulas for components
  • Power Apps component framework
  • Add canvas components to a custom page in a model-driven app


How do I embed a video in PowerApps? ›

Add media from a file or the cloud
  1. Select Media from the left pane.
  2. Select Upload from the media panel.
  3. Select the file(s) that you want to add, and then select Open.
  4. Select the file from the media pane to insert into the screen.
  5. Save and publish your app.
  6. Share app with others.
Dec 15, 2022

What are the limitations of PowerApps? ›

Limitations of Microsoft Power Apps
  • Limited Customization. Unlike open-source software, Power Apps is the proprietary platform owned by the tech giant Microsoft, which simply means, it is not possible to customize the application endlessly. ...
  • Not Compatible With External Systems. ...
  • Runs Only on PowerApps App Player.
Jun 15, 2022

What are components in power apps canvas? ›

Components are reusable building blocks for canvas apps so that app makers can create custom controls to use inside an app, or across apps using a component library. Components can use advanced features such as custom properties and enable complex capabilities.

What is the difference between component and component library in PowerApps? ›

Difference between an app and a component library

The Insert pane on the left navigation defaults to a components tab if you create a component library. When you create an app, this view shows screens instead of components. The screens inside a component library are available for testing only.

How do I embed a video in canvas app? ›

How do I embed a video in Canvas?
  1. Open Your Page. Select Pages from the Course Navigation. ...
  2. Edit. Click the Edit button in the page.
  3. Add Your Video. ...
  4. Create or Find your Video. ...
  5. View Embedded Video. ...
  6. Save.
Apr 22, 2022

How do I add an embedded video to canvas? ›

Place your cursor where you want to video, then select the Insert/edit media icon within your editor, which will open a pop-up. Select the Embed tab and paste your custom code block into the field. Click OK to complete this process. Save your edits in Canvas.

What are the three core concepts of PowerApps? ›

In this article we are going to learn about creating Canvas App in PowerApp. On the first screen you can see there are 3 options: Canvas App, Model Driven and Portal.

What are the 4 components that are included in the Power Platform? ›

Power platform has 4 primary components - Power BI, Power Apps, Power Automate and Power Virtual Agents. The other components that are often used with Power Platform are - Dataflex Pro (Common Data Services), AI Builder, and UI Flow (part of Automate).

What are the two main types of components in an app *? ›

There are two main types of components: visible and non-visible. Visible components such as Button, TextBox, Label, etc. are part of the User Interface.

How do you add components to a canvas app? ›

Add components to a canvas app
  1. Go to Power Apps Studio.
  2. Create a new canvas app, or edit an existing app to which you want to add the code component. ...
  3. On the left pane, select Add (+), and then select Get more components.
  4. Select the Code tab, select a component from the list, and then select Import.
Sep 20, 2022

What should be included in a component library? ›

In the domain of web apps, components typically contain the three main ingredients: HTML, CSS, and JavaScript. They have defined inputs (including user actions like mouse clicks and data inputs called props) and outputs (including rendered HTML markup and browser events).

What is the advantage of component based apps? ›

The benefits are reduced development and testing time, enhanced reliability (because components are pre-tested), and the flexibility to change applications by adding or replacing components without major disruption.

Should you use a component library? ›

Using component libraries is a well-established norm in web development. They offer a wide range of highly-customizable UI elements that guarantee great effects as well as a rich developer experience.

Why is my video not working on canvas? ›

Make sure your web browser is fully up to date. Check the browser's microphone and webcam settings to make sure the correct input is selected and that VoiceThread has not been blocked. Clear your browser's cache. Make sure your browser allows third-party cookies.

Why are my videos not uploading to canvas? ›

Although Canvas Studio has a file size limit of 10GB, you could encounter upload issues with smaller file sizes. Most upload problems are related to the time it takes to transfer the file from your computer to the Canvas Studio. If it takes too long, there can be disruptions and eventually, the upload will fail.

Why is my video not loading on canvas? ›

Some browsers, especially Safari, might block the video or pop-ups in your program. If you're using Google Chrome, please try the following: Try clearing your browser's cache and cookies.

How long does it take for a video to embed in canvas? ›

Wait for the video to upload and process.

Tip: The larger the video file, the longer it will take to upload and process. If your video is several GigaBytes, then you may have to wait up to 20 or 30 minutes for the video to finish processing. A short video should upload and process within a few minutes.

How do I enable video on canvas? ›

Canvas - How to Record a Webcam Video in Canvas Studio

Open Canvas and select Studio in the bottom-left in the blue Global Navigation menu. Click Record in the top right corner. Click Webcam Capture. Give access to your computer's microphone and camera, then click Allow.

How to use components in canvas apps input output parameters? ›

Add An Output Property To A Power Apps Component

Select new custom property from the right-menu. Set the custom property Display Name and the Name to Value, choose the Property Type Output and make the Data Type Number. Then click Create. The new output property will appear in the right-side menu.

What is canvas app in Power Apps? ›

Canvas apps are exactly what they sound like: PowerApps provides you with a blank canvas onto which you can drag and drop components in any formation to design a user interface. Once everything is in its proper place, you can make additional adjustments to the size and formatting of each of these components.

Which of the following are the components of Power Apps? ›

Following are some of the main components in PowerApps.
  • Gallery: A gallery is one way to visualize data within the application. ...
  • Screen: It is a way to view a specific dataset or a record on the screens such as Desktop, iPad, mobile. ...
  • Card: A screen includes cards. ...
  • Control: ...
  • Property: ...
  • Function:

How many types of apps are there in PowerApps? ›

Using Power Apps, you can create Three types of apps: Canvas apps, Model-driven apps, and Portal Apps.

What are the two types of power apps? ›

There are two main types of Power Apps: Canvas apps and Model-driven apps. Previously, Power Apps Portals would have fallen under this category. Microsoft have since released Power Pages, a standalone product that has evolved from the functionality of Power Apps Portals.

What is the difference between a model-driven app and a canvas app? ›

That level of integration with the Dataverse means Model-Driven Apps can be described as 'data-first'. They're far more rigid in their functionality than a Canvas App will be, with the UI (User Interface) components likely being selected from pre-made choices (although some customisation is still possible).

What is the difference between Power Apps and Power Apps portal? ›

PowerApps Portals are an extension of PowerApps that enables both citizen developers and professional developers to build external facing-websites that allow users their organizations to sign in with a wide variety of identities, create and view data in Microsoft Dataverse, or even browse content anonymously.

Is Power Apps difficult? ›

Another PowerApps benefit is that various reviews show that PowerApps is not easy to use for everybody but is extremely easy to learn.

What is the difference between Power Apps portals and Power Apps? ›

PowerApps Portals requires at least a basic understand of code, whereas Power Pages makes building external websites more accessible to users from non-technical backgrounds, with a low to no-code builder and rich ready to use templates.

What is Power Platform overview? ›

Microsoft Power Platform is a line of business intelligence, app development, and app connectivity software applications. Microsoft developed the Power Fx low-code programming language for expressing logic across the Power Platform. It also provides integrations with GitHub and Teams.

What is Microsoft Power Platform overview? ›

It combines low-code application development, workflow automation, AI bot development, and data analytics with broad connectivity through Microsoft Dataverse—all designed to work with the secure, trusted, Microsoft cloud services of Azure, Dynamics 365, and Microsoft 365.

What is the overview of power automate? ›

Power Automate is a service that helps you create automated workflows between your favorite apps and services to synchronize files, get notifications, collect data, and more. What is Power Automate?

How many types of components are there? ›

Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.

What are the basic types of components? ›

All Electronic Components can be classified in 2 Categories:
  • Active: Components have gain or directionality. They can amplify an electric signal and produce power.
  • Passive: Components that do not have gain or directionality. They are also called Electrical elements or electrical components.
Aug 5, 2022

What are the components of application? ›

Android - Application Components
  • Activities. An activity represents a single screen with a user interface,in-short Activity performs actions on the screen. ...
  • Services. A service is a component that runs in the background to perform long-running operations. ...
  • Broadcast Receivers. ...
  • Content Providers.

How do I get more components in Power Apps? ›

Get A Component From A Component Library

Go to and create a new app from blank called My New App. Select the Insert icon from the left menu and click Get More Components. The component library will appear in the Import Components screen. Choose the navigation menu component and click Import.

How do I import components into Power Apps? ›

You can sort of do this now.
  1. Open your source component library and then File > Save As.
  2. Save the file to your computer.
  3. Create a new app or open your exiting app on the destination tenant.
  4. File > Open > Browse.
  5. Select the file you saved in step 2.
  6. Now save and publish.

How do I edit components in Power Apps? ›

On the command bar, select Add component, or in the left pane, select Components to see a list of available components.
Add components to a form using drag and drop
  1. Components can be dropped before or after any existing component or column.
  2. Components can also be dropped in the empty area within a section.
Jun 28, 2022

How do I add an IFrame to Power Apps canvas? ›

To add IFrame component:
  1. Edit the portal to open it in Power Apps portals Studio.
  2. Select the page on which you want to add the component.
  3. Select an editable element on the canvas.
  4. Select Components. from the left side of the screen.
  5. Under Portal components, select IFrame. The IFrame placeholder is added to the canvas.
Dec 9, 2022

How do I add a component to my screen in Power Apps? ›

Get more components
  1. Select Get more components to find and add other Power Apps components as well as custom controls that aren't available by default in the Component pane.
  2. Select the tab you want, either Built by Microsoft or Built by others, and then select the component.
  3. Select Add.
Jun 28, 2022

Can you build a website with Power Apps? ›

Microsoft has announced a new Power Pages tool for the Power Platform. allowing users to easily create secure websites with low-code tools.

What is the difference between uploading a video and embedding a video? ›

When you upload a video to WordPress, you are taking the video file itself and uploading it to your own web hosting account. Then, you can use WordPress to display the player for the video and play the video on your website. When you embed a video, you are hosting the video at another location and simply linking to it.

Why are embedded videos not working? ›

The most common reasons why embed video can not be played include: An out-of-date Browser- An update introduces new features and gets rid of old problems in a software. If your browser is not updated it may cause embedding issues and result in embedded videos not being played.

Why is my video not embedding in PowerPoint? ›

If your video file is in a supported format and you are still unable to play it in PowerPoint, you might have a missing codec in your system. A codec is a small software, which decodes digital media files so that the file can be played as audio or video. It is hard to find which codec is needed for your media file.

Why is my embedded video not playing in PowerPoint? ›

There are multiple reasons why you can't play the video in your PowerPoint slide show: The storage location is corrupt. The video's audio is out of sync. The video might be missing certain files.

Can you run ads on Ghost? ›

If you want to display ads on a specific post or page where the content exists in Ghost Admin, it's possible to use an HTML card within the editor to display ad blocks in-line with your content: On the other hand, you can also insert your AdSense code into the appropriate template files within your theme.

What is ghosting in video? ›

Monitor ghosting is an image that displays ghosts or a trail of pixels behind moving things. They are evident in scenes with many fast movements, like in first-person shooter games. However, monitor ghosting doesn't make permanent changes, like the burn-in effect.

Which app is best for Ghost effect? ›

1. Power Video Editor - Android. This android application is one of the best ghost effect video editing apps. Using it, you can change transparency, add masks, use chroma-key, and create double exposure effects from video overlays and blending-modes.


1. Power Apps: Tutorial for Beginners (Build your first Canvas App)
(Lisa Crosbie)
2. Get Started with Power Apps Creator Kit - Part One
(Dhruvin Shah)
3. PowerApps Left Navigation Component
(Reza Dorrani)
4. Intro PowerApps Components including Input and Output properties
(Shane Young)
5. Canvas Power Apps: Test Studio Introduction (Get Started with Power Apps Automation Testing!)
(Flow Joe)
6. Introduction to Power Apps component framework
(Microsoft Power Apps)
Top Articles
Latest Posts
Article information

Author: Gregorio Kreiger

Last Updated: 04/14/2023

Views: 6143

Rating: 4.7 / 5 (77 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Gregorio Kreiger

Birthday: 1994-12-18

Address: 89212 Tracey Ramp, Sunside, MT 08453-0951

Phone: +9014805370218

Job: Customer Designer

Hobby: Mountain biking, Orienteering, Hiking, Sewing, Backpacking, Mushroom hunting, Backpacking

Introduction: My name is Gregorio Kreiger, I am a tender, brainy, enthusiastic, combative, agreeable, gentle, gentle person who loves writing and wants to share my knowledge and understanding with you.