Create a component for canvas apps

Important

This feature is still in public preview. For more information, see Experimental and preview features.

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.

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:

Create new custom component using tree view

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 navigation 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:

Insert components to the app

Note

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.

Scope

Think of a component as an encapsulated black box with properties as the interface. You can't access controls in the component from outside of the component. And you can't refer to anything outside of the component from inside the component. The exception is data sources shared between an app and its components. 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. You can update the data contract of the component by creating one or more custom properties.

Note

You can insert instances of components into a screen within a component library, and preview that screen for testing purposes. Also, note that the component library does not display when using Power Apps Mobile.

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.

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:

Final gallery

Note

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 you import components from one app to another, new updates to components in the original app do not propagate to the app that imported those components earlier. 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. Sign in to make.powerapps.com.

  2. Select Apps and select Canvas app from blank.

  3. Provide an app name, select any layout, and then select Create.

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

    Create new custom component using tree view

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

  6. 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.

    New property

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

    Display name, property name, description boxes

    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.

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

    Data type of the property

    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.

    Custom input property on the Properties tab

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

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

    Table({Item:"SampleText"})
    

    Formula

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

  11. 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:

    MenuComponent.Items
    

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

  12. 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 navigation bar, select the list of screens, and then select the default screen.

    Default screen

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

    Insert

    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.

    Final gallery

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.

    Property type as output

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

    Gallery1.Selected.Item
    

    Advanced pane

  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.Selected
    

    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.

Import and export components

Note

This feature will be deprecated. 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.

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 navigation.

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.

Import components dialog box

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.

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 left navigation tree view:

Export components tree view

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

Export components insert menu

Selecting Export components downloads the components to a file:

Download component

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 navigation. From the components dialog box, select Upload file instead of selecting any other components or apps:

Import component file

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:

Save app

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

  • You can't save data sources, forms, and data tables with components.
  • Collections in components are not supported.
  • You can't insert a component into a gallery or a form.
  • A master instance of a component is a local master and scoped to the app. If you change a master instance, only copies of the component within the app will reflect the change. Copies in other apps will remain the same unless you import the component library again. All master instances in those apps will be automatically detected and updated.
  • You can't package media files when you import a component.
  • 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.