Creating components in PowerApps

Author Details

avatar-teacher

Evolvous

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

Creating components in Power Apps

Usually as a developer we face a situation where we have to repeat functionality across a form multiple times and the best way to do that is Creating components in Power Apps and reuse it. But at first you need to understand a component. With this post, I would like to highlight, what are components? How to create a Component? How can you import and export a component? And finally, my recent experience in developing and using one.

What are components? 

Components are reusable building blocks for Canvas apps that you can leverage as app makers. These can be used when you want to build things that are going to be reusable. You can define a set of controls to use inside an app, you could import a component into another app as well.

Creating the component

  1. In the Tree View, select components and then select the new component to create a new component.
  2. Select the new component in the left navigation, select the ellipsis (…) and then select Rename. Type or paste the name as Menu component.
  3. In the right-hand pane set the component’s width as 640 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.
    Custom properties in PowerApps Components 

    Custom properties are the advanced customizations provided by the PowerApps.

    Properties as Text, color (label control) we can create our own custom properties or the component of different data types provided by the PowerApps.

    They are two types of custom properties-

    • Input Property: These receive values from the app and the values can be used inside the component.
    • Output Property: Output property are used to send data from the custom property to the app.
  4. In the Display Name, Property Name, and Description boxes, type or paste text as Items.

Creating components in PowerApps - Evolvous

Tip: Don’t include spaces in the 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.

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

Creating components in Power Apps select table - Evolvous

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.

Enabling Components

To create useable components, we have to enable the feature in canvas apps. This feature can be found in “file>settings>advanced settings>components”

Once this setting is enabled, navigating to the Screens in the application you should.

See a Components Section next to the screens section.

Add a new custom property

You can add any new custom property just by a single click on the right-hand pane.

Add a custom property in Power Apps - Evolvous

Import and Export of Components

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 dialogue 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 do not need.

Import Power Apps - Evolvous

Export component 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 component from you app - evolvous

On selecting Export components, it downloads the components to a file. 

Example of using the component created above

Step-1 Creating a collection of navigation item 

The first step would be to create a few Screens so that we can setup a collection to control the navigation, in this example, the Screens that we have created are called HomeScreen, FormScreen & SuccessScreen

Creating components in Power Apps - Evolvous

Step2- Creation of collection 

The component that we create for navigation will be based on a collection that we initialize at the start of the application. Each item in the collection will contain a few different items:

MenuScreenNavigate – this is the screen that will be navigated to. This is actually the screen object and not just a text value.

MenuLabel– this is the title that a user will see in the navigation component

MenuIcon – the icon or image that will be visible for to the user. This should have relation to what the screen is attempting to show / complete. For example, a screen that will add items could have the Icon. New icon is displayed.

The OnStart can be found on the properties for the App. In the function bar for the property a collection needs to be created:

Now when the application runs this collection will be created because of the OnStart. If you need to get this to run in the Portal then you have to select the three ellipses next to the App and select run OnStart.

After you have run the OnStart command select View > Collections in the top ribbon. This will open all the collections that you have in the application and you should see a collection called colMenu.

To add more items to the collection, edit the object by adding another set of {} brackets with the correct content.

Final Result: 

Creating components in Power Apps final result - Evolvous

=======

Conclusion: The components in PowerApps are one of the most powerful features. A lot of companies actually use them to create complex business solutions, which would have taken months or years with other tools by traditional developers.