Getting started with PowerApps Component

In this blog, we will create our first powerapps components for canvas apps. From 23rd April 2019, the PowerApps component framework for model-driven apps is available for preview. After listening to this, I eager to Getting started with PowerApps Component. And we are here with you all to write our first powerapps components using canvas apps.

We will enable the component feature under the Advanced settings of App settings.

Getting started with PowerApps Component

Under Advanced settings enable below features.
1) Components under Experimental Features
2) Improved app rendering under Preview Features.

Create Components

Now we can create components from the Components menus.

We will create Top Navigation component which we will use in multiple screens.

Now we will create a property for the component. We will create items property to store the menu items. Click on the New custom property as shown in the picture.

In the above picture, we have selected property type as input because we would like to input navigation items when we will use this on our screen. And also data type as a table because we will collect the items with different properties. In the TopNavigation component, we have added a blank horizontal gallery. And inside the gallery, we have added a Label to show the menu item.
Now select the Items of the component and write the below formula.

 Table(
     {
         id: 0,
         label: "",
         screen: App.ActiveScreen
     }
 )

Formulas

Formula related to Gallery and Label are given below.
1) Gallery -> Items -> TopNavigation.Items
2) Label -> Text -> ThisItem.label
3) Label -> OnSelect -> Navigate(ThisItem.screen,Fade)

After completing the above steps navigate to the screens tab. Here I have added two screens 1) Home 2) Trainings
In each screen add the component from the Insert tab as shown below.

After adding the component in each screen edit the items formula with below one.

Table(
     {id: 1, label: "Home", screen: Home},
     {id: 2, label: "Trainings", screen: Trainings}
 )

Conclusion

We can use these components on multiple screens as per our requirement. You can use this component in some other app by exporting the components and Import where ever required.

Very soon we will publish how to write a custom component and deploy it. For basic knowledge of powerapps you can watch the video uploaded by our team. If you want to register for the course follow this link.

References:

https://www.youtube.com/watch?v=WNDbZcgVMi0
https://powerusers.microsoft.com/t5/PowerApps-Professional-Developer/bd-p/pa_component_framework