Components

  • 6 minutes

A solution architect should consider including components in the app architecture. Components promote reuse and allow multiple makers to collaborate on different parts of a canvas app during development.

Characteristics of components include:

  • Allowing reuse within and across apps
  • Enabling multiple makers to work on building a single app
  • Promoting consistency and reducing redundancy

A solution architect should identify controls that can be made into components, such as headers or commonly used UI elements.

Two types of components in Power Apps are:

  • Canvas components – Designed for canvas app makers and used only in canvas apps
  • Power Apps component framework code components – Designed for professional developers

Diagram showing the Power Apps components.

Component libraries

Canvas components are reusable building blocks for canvas apps. App makers can create custom controls for use within an app or across apps by using a component library.

Characteristics of canvas components include:

  • Reuse across multiple canvas apps
  • Suitability for makers with common skills
  • Simplicity enabled by canvas app formulas and connectors

Component libraries store component definitions and help app makers:

  • Discover and search for components
  • Publish updates
  • Notify app makers when updates are available

Important

Canvas components should be added to component libraries. Component libraries are the recommended way to reuse components across apps. When you use a component library, the app maintains dependencies on its components. App makers are alerted when updates to those components become available. Therefore, reusable components should be created within component libraries.

A solution architect should have a defined strategy for managing components.

Use code components with Power Apps component framework

Power Apps component framework enables professional developers and app makers to create code components for model-driven apps and canvas apps (public preview). These components enhance the user experience by enabling rich interactions with data on forms, views, and dashboards.

Characteristics of code components include:

  • Compatibility with model-driven and canvas apps on web and mobile
  • Reuse across multiple apps to replace columns and grids
  • Support for new record and edit experiences
  • Ability to use multiple components on a form without performance issues
  • Development by professionals with TypeScript and HTML skills
  • Support for contributions from all types of developers

Code components can be packaged in solutions. When the solution is updated, each app that uses the component automatically detects the updated version.

A solution architect should use code components intentionally to enhance the user experience.

A broad community contributes code components that can be reused in apps. You can find reusable components in the Power Apps component framework gallery and the Power Apps community sample gallery.

The following screenshot shows a community control that displays a grid of counts based on calculated risk scores.

Screenshot showing the risk matrix component.