Power Apps: Working with Components on Canvas App
In this article, I will mention canvas app components, This feature is important to creating reusable things. Some of the dynamic features to using separately through the application are enable to developers creating their own features without repeatedly. Let’s have a look at those are features to getting our applications seems professional and nice
What are components on Canvas App?
Components are let to developers creating reusable blocks without repeat every behaviour on their canvas screens. Also developers, can create custom controls to use inside an app, or across using component library.
“Don’t repeat yourself”
As pro-developers made, app makers can prevent repeatedly use those function within whole application. For an example, you don’t need to re-import some of the elements (- like label text, buttons, date picker etc.) to the new screen which was created for another purpose, you can easily use those components
How to create a component?
First of all, create a blank canvas app and select component section:
I will create a reusable header component in order to prevent applying same steps for each screen:
After selecting components tab, you can sized your component as screen as your screen size resolution. I will width set as my screen resolution (W:1640 H:100)
Now, we can add some elements to the blank component after creating the container size.
I have added some christmas image and set the background color as red with a text label.
After completing header design as we wished, now we need to creating dynamic property for text. In order to do that we should add Components Input custom function to our label text.
Custom properties can be created via Custom Properties tab, click on plus icon and give display name and the name that gives as property where i viewed on the other screens. You can type whatever you want.
Click on component Label1 and change Text property as your component’s name:
After become label text input has dynamic text property, you can add it another screens without add different label text inputs. In order to do that, just click on Insert -> Custom -> Header Component (you can name it as you wish)
Now, you can set each Screen text value as you wish, it prevents creating header by adding each input again and again.
As you see at below, each screen’s text property set as dynamically, all you need change text value.
All stuff that we created were belongs to Components Inputs, it means related property behaviour now time to look at Components Outputs which is related to functionality.
Lastly, we will see the component outputs which directly added some functionality to our inputs which is not existing on canvas app.
Creating EOMonth function that is existed on Excel but no on Power Apps
First of all we make sure that canvas app Enhanced Component Libraries are enabled on current power apps project.
Add a new custom property called EOMonth. Make the property type Output and the Data type Date and time. Then click on + New parameter.
Also need to add StartDate and EndDate parameters via click on plus icon
Create StartDate and EndDate parameters as Required
Go to the EOMonth property and set the function value:
Date(Year(StartDate), Month(StartDate)+1, 1)-1
Add function component on the screen
Insert the DateFunction component to the Screen1 and name it cmp_DateFunction
Then add a label to the screen and put this code in the Text property.
cmp_DateFunctions.EOMonth(Today())It will show the last day of the current month.
Conclude
You can easily create a component which is name Input Component it gives you reducing time to creating a repeated components like header, footer and main content. Apartly, Output Parameters enable to app makers creating their own functionality as their logic.
Thanks for reading.
