Getting started with PowerApps Component

Getting started with PowerApps Component

In this blog “Getting started with PowerApps Component” we will create our first powerapps components for canvas apps. From 23rd April 2019, PowerApps component framework for model-driven apps is available for preview. After this announcement my hands were itchy 🙂 to experiment on this feature and we are here with you all to write our first powerapps components using canvas apps.

First of all we look how to enable the component feature under the Advanced settings of App settings.

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

Now we can create components from the Components menus shown in below picture.

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

Now we will create a property for the component. Here we are creating items property where we will store the menu items. Click on the New custom property of properties of the selected component. See below 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 in our screen. And also data type as table because we will collect the items with different property. In 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 below formula.
id: 0,
label: “”,
screen: App.ActiveScreen

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.

{id: 1, label: “Home”, screen: Home},
{id: 2, label: “Trainings”, screen: Trainings}

We can use this components in multiple screen as per our requirement. If you want to use this component in some other app than we can export 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.

You can enroll for PowerApps/Flow training here & for SharePoint Framework training enroll here.

Please share this post if you like it and subscribe to our site for more stuffs related to SharePoint Framework, PowerApps, Flow, Azure etc.


Sharing is Caring

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top