What are these app components called desc

Create a component for canvas apps

  • 10 minutes to read

Components are reusable building blocks for canvas apps so that app makers can create custom controls that can be used within an app or across apps using a component library. Components can use advanced features such as custom properties and enable complex functions. Component concepts and some examples are presented in this element.

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

Components in canvas apps

You can create a component in an app as explained in this element, or by creating a new component in an app via the component library. A component library should be used for requirements to use components on multiple app screens. You can also copy the existing components to an existing or a new component library.

To create a component in an app, go to Tree view, choose Components Tab, then select New component:

Selecting New components opens a blank canvas. You can add controls as part of the component definition on the artboard. When you edit a component in the canvas, you update instances of the same component in other app screens. Apps that reuse a component that has already been created 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 selecting a screen. When you select a component, you insert an instance of that component on the screen, just as you insert a control.

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

Note

The components described in this element differ from the Power Apps component framework, which developers and manufacturers can use to create code components for model-driven and canvas apps. For more information, see Power Apps component framework.

Scope

Think of a component as an encapsulated black box with properties as an interface. You cannot access controls in the component from outside the component. And you can't refer to anything outside of the component inside the component. The exception is data sources that are shared by an app and its components. Scope restrictions keep a component's data contract simple and cohesive and allow updates to the component definition, especially for apps with component libraries. You can update the component's data contract by creating one or more custom properties.

Note

You can place instances of components on a screen within a component library and preview that screen for testing purposes. Also note that the component library is not displayed when using Power Apps Mobile.

Custom properties

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

Input property is a component that receives data that is used in the component. Input properties are in the tab properties displayed in the right pane when an instance of the component is selected. You can configure input properties using expressions or formulas, just as you configure standard properties in other controls. Other controls have input properties, such as the property default of a control Text input.

Output property is used to output data or component status. For example the property Selected in a control gallery is an output property. When you create an output property, you can specify which other controls can refer to component status.

The following guide explains these concepts in more detail.

Create a sample component

In this example, you create a menu component that is similar to the following graphic. You can change the text later to use it across multiple screens, apps, or both:

Note

We recommend using a component library when creating components for reuse. Updating components in an app makes the component updates available only in the app. When you import components from one app to another, new updates to components in the original app are not propagated to the app that previously imported those components. If you are using a component library, you will be prompted to update components when components in a library are updated and published.

Create a new component

  1. Sign in to make.powerapps.com.

  2. Choose Apps and choose Canvas app from blank.

  3. Enter an app name, choose any layout, then select Create.

  4. To create a component in an app, go to Tree view, choose Components Tab and select New component:

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

  6. Set the width of the component in the right area 150 and the height up 250 and then select New custom property. You can also set the height and width to a different value.

  7. In the property name Show name, Property names and description enter the text as element a.

    Do not include spaces in the property name because you will refer to the component by that name when you write a formula. For example ComponentName.PropertyName.

    The display name appears on the tab properties in the right pane when you select the component. A descriptive friendly name will help you and other manufacturers understand the purpose of this property. The description is displayed in a tooltip when you hover over the display name of this property in the tab properties drive..

  8. In the list Data type select the option table and subsequently Create out.

    The property element is defined as the default value based on the specified data type. You can set a value that suits your needs. If you have a data type table or recording you want the value of the property element change to match the data schema you want to enter in the component. In that case, change it to a list of strings.

    You can set the value of the property in the formula bar when you enter the property name in the properties of the right area.

    As the next graphic shows, you can also change the value of the property on the tab Extended edit in the right pane.

  9. Set the component certification element to the following formula:

  10. Add an empty vertical control to the component gallery and choose layout in the Property as title.

  11. Make sure that the property list includes the property element is displayed (as by default). Then set the value of this property to this expression:

    In this way the property becomes element of the control gallery read and depends on the element Input property of the component.

  12. Optionally, make the control gallery and the property BorderThickness on 1 and the property TemplateSize on 50. You can also update the values ​​for the border thickness and original size to a different value.

Add a component to a screen

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

  1. In the left navigation bar, select the list of screens, then select the default screen.

  2. On the tab Insert open the tab Components and then choose MenuComponent.

    The new component is named by default MenuComponent_1.

  3. Place the element Property of MenuComponente_1 stuck to this formula:

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

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 the user selects from the menu.

  1. Open the list of components and select MenuComponent.

  2. In the right pane, select the option properties Tab, and then select New custom property.

  3. In the property name Show name, Property names and description enter the text as element or copy it.

  4. Under Type of ownership choose output and then Create.

  5. On the tab Extended set the value of the property Selected on this expression and adjust the number in the gallery name if necessary:

  6. On the app's default screen, add a label and set the property text fixed for this expression, if necessary adjustment of the number in the component name:

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

  7. Hold down the Alt key and select each item in the menu.

    The control labeling reflects the menu item you last selected.

Importing and exporting components

Note

This feature is obsolete. Component libraries are the recommended way to reuse the components in the apps. When using the component library, an app retains dependencies on the components used. The app manufacturer will be notified when the updates for dependent components become available. Therefore, all new reusable components should be created in the component libraries instead.

Import components from another app

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

A dialog box lists all apps that contain components that you are authorized to edit. Select an app, then choose Importto import the latest published version of all components in this app. After you've imported at least one component, you can edit your copy and delete any that you don't need.

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

If the app contains a modified version of the same component, you will be asked to decide whether to replace the modified version or cancel the import.

After you've created components in an app, other apps can use the components from that app by importing them.

Export components from your app

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

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

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

Export components select downloads the components to a file:

The downloaded component file uses the .msapp Filename extension.

Import components from the exported component file

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

From the dialog box to open browse the location of the component file and select to opento import components into the app.

Import components from an exported app

You can run an app locally with the option file > Save as to save:

Once you have saved the app, you can use the components of that app again and use the same method to import components from a file. To do this, follow the steps from the previous section on importing components from exported component files.

Known limitations

  • You cannot save data sources, forms, and data tables with components.
  • Collections in components are not supported.
  • You cannot insert a component into a gallery or form.
  • A master instance of a component is a local master and is limited to the app. When you change a master instance, only copies of the component in the app reflect the change. Copies in other apps remain unchanged unless you re-import the component library. All master instances in these apps are automatically detected and updated.
  • You cannot package media files when importing a component.
  • Components support the function UpdateContext not, but you can create and update variables in a component by using the function establish use. The scope of these variables is limited to the component, but can be accessed from outside the component using custom output properties.

Next Steps

Learn how to use a component library to create a repository for reusable components.