Hey everyone, April Dunham
here in today's video, we're going to talk all
about power apps, components. We'll talk about what components are, why you might want to use them go over
some use cases and we'll walk through creating a component, all that
coming up right after this. [Inaudible]. Exactly is a component at its simplest
level. It's just very usable control. So when you go into power apps
and you click the insert button, we see all of the different controls
that we have out of the box. Everything from labels and buttons
to various text input controls, downs, rating controls,
pin inputs, you name it. Oftentimes we're using a variety of these
controls together to create something. For example, a header on your screens
might consist of a label control. Like I have here. You might also insert a rectangle
icon so that you can have some kind of background or shading effect, and you might have different icons so
that you can click between screens. So we might add an add button
in situate that on the screen. And then when we click on that, have
that open up a different screen, where we can add a new item and we might
use the home icon so that we can always return back to our landing
page. The simple header, like this is something that we would
need to use in multiple screens in our applications, as well as multiple
different power apps that we create. This is a very simple example of a header. So this had our house
four different objects. Right now we have two icons that
label in a rectangle control. If I want to have this same
header in all of my other screens, I have to copy all these controls and
paste them on every screen that I want to use them at. There are many reasons
why this isn't ideal for one, if I have to make a change to this, maybe I don't want this background
color of the header to be purple. Maybe I want this to be blue. Now
I only have two screens right now, but imagine if I have an application
that has 30 or more screens, if I need to make that change, that means I'm going to have to go into
each one of those different screens, click on that rectangle and change
the color. Now we can do it, but it's really tedious.
And time consuming. This also opens you up to have
inconsistencies in your applications. If you have a lot of screens, you can easily forget to update the width
or the height through the color or the text or the icon, whatever it might be that you have in
that header on one screen versus the other. And one of the important things to have
a well-designed application is to have consistency between your screens. Also, this header has four different
controls in it right now. We just copied those four
controls onto another screen. So now our application is up to eight
controls who if we need to copy the same header across 30 different
screens in our app, that means that we've added 120
different controls just for a simple, consistent header across our application. One of the things we know about PowerApps
performance is that the less controls you have in your application,
the better, fortunately, there's a better way to handle this.
And that's where components come in. So for those same header control, I
could create this as a component instead. And what this is going to do is give me
the ability to create it once and use that in multiple different
screens and multiple power apps. It'll have one source of truth
where I go to make any edits. And those edits automatically get pushed
down everywhere that I'm utilizing that control. That's why we call on technical
terms, a parent child relationship. So if I wanted to redo
this header as a component, I can open up my power app and click
on the components tab in the tree view. And you'll see an option
here for new components. So we can actually create these
components within your power app itself. We can also import components
from other applications, which we'll get into here in a bit, but let's click on this new component
button and let's see what the process looks like to create a new component. So you'll notice as soon as I click
that a new option here in the tree view showed up under the components
tab called component one. This is a placeholder for me to build
out my brand new component to use. When you do this and create the component, it automatically adds an object here
with a standard width. So right now, you'll see on the right-hand panel here
that this size is set to six 40 by six 40, but we can control how wide and how tall
this particular component should be. Now, since this is for a header, I want this to take up the
entire width of my screen. So I'll change out of the 1366 and let's
change the height to let's do about a hundred that's about the height and width
that we would want for a header. Now, since I've already built out
the header, like I wanted, what I'll actually do
is go back to my screen. I'll click and hold down control
to copy all these objects. Now click the three dots and copy. So we can actually just paste that
right here into our component, by clicking the three dots and paste. And now all of those objects are here
and my component layer. Now, of course, there's much more to it that we can
configure what these components, the first thing it probably wants to do
here is get this component a meaningful name. So I'm going to click
the three dots next to it, where it says component one, we're
going to select the rename option. I'll just call this my header.
Okay. So next for this header, we probably need to dynamically
change the text that shows. So if we go back to our
screens on the homepage, I probably want the text to say
Landy, but on the functions page, I want it to say intro to components.
Now we know if we were doing this, the old school way of just copying and
pasting the objects between the screens, we can just go into the individual object
on that screen and update the text. But remember, we're trying to use a component which
allows us to create one central location for this and use it and repeat
it amongst different screens. So since we're doing it this way, we need some kind of property that we
can dynamically set on the screen to change this text. And we
can do this with components, with the properties feature.
So if I click on the, my header component that we just created
and look on the right hand side in the panel, you'll see an option for
custom properties. If we click new, we'll have a panel pop-up and this is
where we can specify a property for this particular component. Now
what our properties let's
go back to the screens tab. And let's talk about
what a property is first. So every object that you put inside
of your PowerApps maker canvas here has its own unique set of properties
that you can define for them. So looking at this label control
that I have on the screen, we can tell what kind of
properties that we have for this, by going to the upper left-hand corner
and clicking the dropdown on this properties panel. So for this label, I have a property to set the alignment.
So I have that center aligned. We have properties for the
color of the text, for the font. We even have properties
where we can define actions
like the on select property. So when we click on this, we can have a
perform an action, like set of values, submit to a data source. So there are all different
types of properties for
these different objects that we can define. And with components, we
can define our own custom properties. So back here on our component, let's
click on that new custom property again. And we see, we need to give our
property a display name, a name, and a description. So for this, I might
need a property called header text. We'll do a description. Then we need to choose the
property type invalid properties, meaning that we can take data
and pass it into our component. So in the context of our header, we want to dynamically set the
text that shows in the header. That would be an example
of an input property. We add this component onto a screen. We pass in the texts that we want to
show in that feeds into our component. Then we have the opposite,
which are output properties. This is where we need to get some kind
of data from the component itself and output that to one of our screens. So if we had a component
that had a gallery in it, maybe we need to be able to get to the
selected items from the gallery in that components and show that somewhere
on the screen that we're in, that would be an output property. Okay? So we're going to select the input
option here for our heterosex property, and next we need to choose the data type. So there are a few different data types
that we can have for these properties. And you can see all of those here. We can have everything from
text and colors and dates, numbers booleans even
images and audio and video. So you would select the type of data
that you're needing to pass in with the property. In our case, that's
just going to be a text. And there are a couple other
options that we can configure here. I'm going to come back to those that are
later points because I want to get this property created. So we're just
going to click the create button now. And now we have a new property for our
header component called header text. Now I need to do one more
thing to actually wire this up. We have the property itself, but we
need to tell our label control within, inside of our components to use
that property for its value. So what we'll do is we'll click on the
label control itself and we'll change the property. And we'll go to its text
property because that's what controls, what tech shows up in rather than
hard coding that will delete what's in there. And we'll type in the name of
our component, which I called my header. And if we do a dot after that, we can get all the properties
for this particular component. In the first one you see that pops up
is header text is that custom property that we just created.
And if I select that, you see the texts that displays here
and the label instantly changes to text. And that's because if we look at the, my header component and go to the
heterosex property and the properties pane that default value
there is set to text. So if I change that to something else, you see it's updating in
real time and my component. So let's keep this really simple and say, this is all that we want to do
right now for this header component. Now let's look at how we actually
use this within our application. So we're going to click
back on the screens tab and
I've added two blank screens here where I want to use
this header component. All we have to do to use
that now that we've saved, it is click on the insert button or
click on the plus from the left hand side, either one will get you there and
then you'll see an option for custom. This is where all the components that
you have within your app will show. So we'll select the, my header
component we just created, and that adds it to
our screen. So you see, we have a screen one with just
one object in it or header, and you'll see on the right-hand side, when we have that header
component selected in our screen, there's our header text
property that we define, and we can specify the
header text to show here. So as soon as I changed
that and click away, it updates out on the screen that can
do the same thing here on screen too. And now we just have one simple
control on both screens. Now, remember one of the benefits that I
said here was that if we need to make a change to this, we only have
to make that in one spot. Let me show you how that works, because now we have this header
components on two different screens. And what if I want to change say
the color of that background again? What do we do there? Well, we'll go back to our components tab
and we'll click on our component there. And if we make the change at this
level here, so I'll click on my label, I'll click the fill property and we'll
click the red option instead of the blue. So it's changed here at
the component level. Now, if I go back to my screens tab, you see it's automatically updated
on screen one and screen two. So we looked at an example of using those
input properties in our components for a simple header control. Now let's take a look at where those
output properties would come into play to do that. We'll do a simple choice picker. So when we to go to our components tab,
we'll click the new component option. I'm going to rename this to
choice picker. And for this one, let's actually insert a gallery this
time. So I'll insert a vertical gallery. And when we had the gallery
selected on the items property, I'm actually just going to hard-code
some options. So let's see, let's do power apps, power
automates, power, virtual agents, and power BI I'll change
this to just be the title. And now all that's left is to
configure our Alpine property. So this will want to be able to tell
which option the user has selected from this gallery. So we'll
click on the component. We'll go back to that properties
pane on the right hand side, and we'll say new custom property, we'll call this custom
properties selected item. We'll change that property type
this time to an output property, and we'll leave it as data type
text. So let's click create. And now if we click on the properties
dropdown with our component in the upper left-hand side, we'll see
that selected item property, and let's replace what's in there.
And let's set that to our gallery. So gallery two dot selected dot value. Now we'll have that output property
dynamically set the selected option from this gallery so that we can
use that within our screens. That's all that we need
to do for this component. So let's go back to our
screens and on screen line, we'll insert that new component here.
So we'll click on our insert button, go to the custom option and there's
our new choice picker component. So we'll click on that to add it. So what I want to have happen is when I
click on one of the options here in the gallery, from the choice picker component, I want to show the text to the
item that we selected in the label. So I'm going to insert a label control, and this is where we'll
use that output property. So in the text property of this
label, I'm going to replace, what's there with the
name of our component. So choice picker one. And if we do a dot, we should see our custom output
property. Yep. There it is selected item. So if I do that, that'll
return that value. And I'm just going to pin some
texts to the beginning of this. So we'll say you selected, then we'll have the selected item and
then we'll append an exclamation point at the end right now, if we play
this, when we first run it, it is empty because we haven't selected
anything yet. But as I click power BI, you see the label value changes,
and it's using that output property. As I click on the different
items in the gallery so far, we've covered input and output
properties and showing examples of each. Now let's segue into some
newer functionality that
we have available to us in components, these properties and functionality that
I'm going to be showing you here is currently under experimental
functionalities. So you'll have to explicitly enable them
inside of your application to use them. So to do that, you're going to click
on the file tab, go to settings, select advanced settings,
scroll down here, find the experimental feature section
and you'll enable the enhanced component properties feature by
toggling this to aunt. This is what enables us to use these
behavior properties in something called user defined functions
or custom functions. Be careful using these experimental
features in your production ready applications right now, because
since they are experimental, they can change at any time and
potentially cause some issues. But this is a really cool
new functionality that I
wanted to make sure to point out. Once we have that
feature enabled there, we can have additional options
to configure for our components. So if we look on the components tab, you might've noticed that
I had two other components. I have rejects utils in date functions
and both of the components look like they don't have anything on the canvas itself. But if you look at them on the
right-hand side of the properties, we have a few different
custom properties defined. These are all output properties,
but if we click on one of them, like the is currency, you see that we're using a new
functionality called parameters for art components. So this is really powerful functionality
that enables us to build something called custom functions or user defined
functions instead of our power apps. Now we've always had the ability
with the power apps, canvas language, also known as power FX
now to use formulas, to manipulate data and do things. So here's a common use case
for a formula in power apps. And that's data validation say we have
an input field here where we want to put in currency, and we want to validate that what we
put in there is a valid currency value. We can do that with a
formula that looks like this. So I've added in a label control and
we're using some red jacks or regular expressions to validate that a
particular field is a currency field. So I'm taking in the text
inputs here that we have, I have my regular expression and it
will return true or false to say whether this is a currency value or not. Right now it's false because
I have texts entered. But if I were to put in 500, the
returns true. So that's power apps, formula language at its finest. But what if I wanted to be
able to extract this and use it easily in multiple different places? Wouldn't it be cool if you
could curate a library per se, of all of your favorite formulas that
you use commonly in your power apps? Well, now we can with custom functions
in our power apps components. So rather than putting this
here with inside the label, I can go over to my
components tab and you see, I have a red jacks utils component. This is actually a sample that's
GitHub [inaudible] created. And if we look at this
particular component, although there's nothing
showing on the screen, you see, we have three custom
properties on the right. His currency is percent in his time. Let's look at the S currency and we're
using some of that new experimental functionality here to define parameters
for this property of the component. So for my is currency property, we have a perimeter called currency text, and this is a text perimeter and we're
making this required so that we have to pass in some kind of currency texts to
validate it so that I can run through and return us the results. And you'll see, we can have multiple parameters here
so I can do a new parameter and we can define those here. Oh, this allows me to
do so. I have my output property here. So if I go into my components, you'll see that there's our is currency
output in below that there's the parameter. We specified currency text,
which I have right now set to text. And if I look at the is currency
property itself, you'll see, that's where I'm defining that
formula. So we're doing the, if it's match and we're actually
passing in that parameter, we defined currency text, and that's
what we'll do the validation off of. And this is the exact same pattern for
the is present and is time just slightly different formulas. We have a parameter that we pass in
and that validates the data that we're passing in, how this can be used with inside of your
perhaps if we go back to our screens, you go to my function screen. Here's
how this can actually work in action. So if you have a lot of different
things, you want to validate, maybe currency values
here, percentages time, we can add all of those on our screen. And then what we'll do is we'll add
in our component that we had there. So we'll add in this reject utility, and it will just be a hidden component
on the screen. Cause if you recall, that was a blank component. So we just have it kind of out of the way
here and the left hand side so that we can have them on the screen to use,
let's start with the currency one. So what I did is I've
added toggle controls. So he went to insert input and
toggle. I want this to show a pass, fail or valid or invalid and have it
run the custom functions that we defined within the component. So on this toggle, if we go to the properties pane
and select the default property, you'll see that we can actually
call our component itself, which is called UTF red, Jackie tills. And we can do a dot and get those
output properties that we defined. So I'm calling my new custom
function called is currency, and I'm passing it in the text
that I wanted to validate, which in my case is an
input field called currency. So now I've just abstracted that formula. I can call it multiple places
with insight of my screen here. And we only had to write out that formula
once within the component and we're doing the exact same thing for
percent validations. That was a, so that's a separate function. So recalling the.is percent and passing
it in data that we want to have a validate. And the same for
time. Now, if I play the app, my currency format right now is showing
invalid because all I have is a number five, but if I change this to dollar
sign five, that switches to valid. So that just validated my texts there
as I typed same thing for percent, as soon as I removed that percentage
valid and then invalid and the same thing for time. So right now I'm showing this
visually using these toggle controls, but we can also take
advantage of this on submit. So if you just wanted
to behind the scenes, validate your data before submitting it, you can just call that function
like we did on this toggle default, do all your checks. And if it doesn't
meet any of those requirements, throw a message or an
error up to the user, letting them know that
they need to fix the issue. And I noticed I had another
component called date functions. So I'm using several custom functions
here for dates. So as you can see, we have a ton of different
output properties to find
for this a common one that you'll see as start of the
week. We're defining for this, where we can pass it in a date, and this will perform this nice long
function and return back to us a yes or no. If the date we pass it in
falls within the start of the week. So how this works visually same concept
to have a toggle here that's valid or invalid. So if I put in a date here,
so in this date picker right now, I have April 19 selected, and
that is within the current month. But if I were to change this select a
date in March, that toggles to invalid. So that lets me know that that date
is not within the current month. These date functions are really useful.
I've ran into all kinds of scenarios, that applications that I
built in power apps where say, we need to not let someone put a due
date that is past the current date, right? So this particular function here that
we're seeing will help us do that same concept here for current
week and even current day. So I hope you're getting excited about
these custom functions because I really am. And to make it even easier to get
started with these custom functions, you can go to AKA dot M S foreign
slash power platform, hyphen samples, and you'll find all the samples
that I just showed you today. The date functions were
submitted by Matthew Deviney
and the regular expressions functions were submitted by
Geetha Suboxone. We have a
brand new sample browser. So all you have to do is use
the search. And if, you know, you want to find a percent formula,
do a search for that, click on that. And we have documentation
on how the function works. And if you go into the solution folder, you can actually download the MSF
that contains the component with those functions in it. All right? So
we're almost wrapping up here. The last thing I want to show is how we
can take these components that we built and use them inside other applications. There are a couple of
different ways to do this. So right now I have this custom functions
app and I haven't saved and published into my environment here. So if I wanted
to use this component within site, other applications in this
particular environment, here's the easy way to do that. So we'll go back to make that
powerapps.com click the new app tab, and we'll just do a blank canvas app. And we can actually import
those components in my
clicking on the components tab and clicking the three
dots next to new component. And you'll see an import
components option. That'll open up a panel
on the right hand side, and it's going to show you a list of
all of the different canvas applications that you have in the current environment
that you're in. And as you see, we have that custom functions app,
which is the one that we had open here. So we can click on that, then click
import. And as soon as we do that, you see that actually took
all the components that
were inside that application and put them here into our new blank
power apps so that we can use them. Now, an important thing to point out what
happened there is this essentially created a copy of those components. So any changes that I make in this
application to the components, aren't going to affect the versions
of the component that I have. Any other application,
this can be good or bad. There might be instances where you
do need a copy of the components in a particular application so that you can
make changes and make it a little bit differently, but you might want to have a
true parent-child where you have one place that these
components are stored. And that's the one place that
you go to to make the changes. And everywhere that they're
used is automatically updated. That's possible with something called
component libraries. So if we go back to make.powerapps.com and
click on the apps tab, you might've noticed that
we have an apps tab here, and a component libraries tab, a component library is
basically an application shell, but solely intended to store components. So we can create a new component library
by clicking that button and let's create one called custom
functions. So click create, and this will create our
component library app, and we can have multiple component
libraries if we want them. So you might have a component library
for navigation and you might have different navigation controls. You might have one for custom
functions like we're doing. And when you're building
the component library, you can import in components
from other applications, just like we did earlier by clicking
the three dots and going to import apps. So let me import my custom functions
and all of those different components that we had in that application there. So those are all in this component
library. So I'm going to click file. We'll go to save, save again,
and now we're good to go. So if we go back to make.powerapps.com
and refresh the page here that has our component library tab selected, we'll see a brand new component
library called custom functions. This will be the one place that we go to
add new custom functions into edit the ones that we currently have. And we'll use this component
library to import in those components, in any application
that we want to use. So let's do a new application,
we'll do a canvas app again, and here's where it gets a little bit
tricky when you're using component libraries, you don't import
the components the same way, so we're not going to go to
components and import and all of that. We need to click on the plus
on the left hand side here, and you'll see an option at the very
bottom that says, get more components. This is where the component
library components will show up. So you see on the right-hand side, I only have one component
library called custom functions, and it actually lists out all the
different components within that component library. So one benefit that you'll see of
this right off the bat is I can select and only import the
functions that I care about. It's not an all or nothing like it was
when we imported it. The other way. You remember how in this application,
we clicked on components. We went to import and we
selected that application we had, and it just automatically dumped all
of the different components in, well, by doing it this way, we can pick and
choose the ones that we want to add it. So maybe I only care about the header.
So I select my header, click import, and now that's added into my app.
Now, another tricky thing again, that you'll notice is it's not
showing here under the components tab, like the other ones we were looking at. So to add this component
onto our application, we got to click the plus button again. And as soon as we imported
that library component, you'll notice have a new section
called library components here. And that's where those components will
show up. So I can add in the, my head, our component, and now
that's there for me to use. I know that's a little confusing that
there's not a consistent experience there, but the main reason I wanted to show you
the component library side of things is because that is a way to create
one central area where you would build the components and
where you would edit them. And you can use them in
multiple applications rather
than the way that we talked about earlier, where
you can import them in. But it's really just making a copy of
that component in your application. I hope that I've given you everything
that you need to get started, building components and explained
why they're really useful to use. If you found this video helpful, please do me a favor and hit
that like button and subscribe, and we'll catch you in the next video.
