Up next in 10
Join this session to learn what is Power Apps Component, how to design, and use it within apps to avoid re-work. In this session, I will walk through a step-by-step approach to build, deploy, and add it to your apps.
About Speaker:
My name is Deepak Shrivastava. I am a Microsoft Business Applications MVP and a Senior Manager at EY.
I am a technology enthusiast and problem solver. I work/speak/blog/Vlog on Microsoft technology, including Office 365, Power Apps, Power Automate, SharePoint, and Teams Etc. I am helping global clients on Power Platform adoption and empowering them with Power Platform possibilities, capabilities, and easiness.
I am a leader of the Houston Power Platform User Group and Power Automate community superuser.
I love traveling , exploring new places, and meeting people from different cultures.
"Share Knowledge to empower others to achieve more."
Conference Website: https://www.2020twenty.net/power-platform-virtual-conference/
C# Corner - Community of Software and Data Developers
https://www.c-sharpcorner.com
#conference #powerplatform #powerapps #csharpcorner #m365
Show More Show Less View Video Transcript
0:00
Okay, so thanks everyone and thanks for joining the virtual conference
0:07
A little bit of background about myself. So I'm Deepak Srivastava, I'm Senior Manager at EY, I'm Microsoft MVP
0:15
I'm also a Power Automate community super user and if you guys have not used the Power
0:20
App Automate or Power Apps or Power Virtual community, I would highly recommend to go there
0:26
ask your questions. of people there answering any of your questions that you may ask during building the Power Automate
0:33
Power Apps or Virtual Agent and Power BI as well. I'm also one of the user group leaders for Houston
0:39
Power Platform user group. So we had every month, we had these user group sessions where we bring
0:48
really nice speakers, MVP, community leaders to speak about Power Platform activities
0:54
uh my youtube channel so if you like to subscribe to my youtube channel i i'm very regularly
1:00
providing nice content all around power automate drive prompt apps power vi sharepoint teams so
1:08
yeah this is the quick link s-u-t-p-s-bitly.com deep attack so go ahead and subscribe if you want
1:14
if you like to see the content that i'm creating my twitter handle if you like to connect to me on
1:19
twitter if you have any questions you want to ask me directly this is the best way to connect with me
1:23
Deepak underscore s22 and my LinkedIn. So Deepak hyphen Srivastav. Make sure that you have the
1:30
hyphen because the name you know is a little common. So connect me on the LinkedIn
1:37
Okay. So today what we're going to learn or what we're going to discuss about the Power Apps
1:41
component. And very first thing that came into our mind, what is Power Apps component is all about
1:48
and before that what is component so let me explain you in very uh real life use case
1:55
terminology the what is component and i'll take the ogy of the car manufacturer so
2:01
a car manufacturing company when they assemble a car right they don't really build everything
2:07
that we use in the car and take an example of the music player so when uh when the manufacturer
2:12
assembles the car they just use already ready to go music player and they put it into your car and
2:18
and they give you the car. So the music player itself has a lot of functionality
2:23
and feature in it, but not really the car manufacturer building those functionality
2:27
rather they are using what has been already built and available. So that is a component
2:32
So component is what you can think is a set of common features and functionality that is available for you
2:40
to use whenever you want. And that's what PowerApps component. So Power Apps component is the common features
2:48
that most of us use when we build the different Power Apps. Okay
2:53
The Power Apps can have very common and advanced feature, like you can set different properties
2:59
you can have some complex capabilities like an event in your component
3:03
and what will happen if someone click on your component. So you have all these features and functionalities
3:08
are available in the component. Some of the key feature, as I said
3:12
the component provide you a set of control and properties that can be reused inside the app and
3:18
also outside the app across the environment so just to give an example let's say i created a
3:26
left navigation that i'm using in my app what i can do i can create a component of that left
3:33
navigation and share it across so any other app maker can use the same functionality that i have
3:38
built into their apps. Another this is the component also provide a controlled environment
3:47
So what I mean to say there if I'm using a component it has become like a master template
3:54
So if I created the left navigation component and maybe after a certain time I added a new feature
4:00
what I can do I can post that feature for all the people who are using that component and they can
4:06
reuse or take that updated change into their app so they don't need to they don't need to worry about
4:14
making changes to that master template they can just get what i'm doing and reuse of the work
4:19
that i already spent time creating now so that's that was the what a very basic what is component
4:27
now the second question is why component why we even need component if we are creating an app i
4:33
can create an app i can create beautiful apps very functional then why i should spend time in creating
4:39
a component and then use the same component into my app so the basic quick example of that
4:46
if you are regularly building multiple apps for your personal use or for your organizations or
4:52
for the community and for example in each app you are creating a header that's a very basic
4:58
thing that every app requires. Now if you are creating that header and you are spending time
5:04
creating that header for each and every app that you have also in each and every screen in your app
5:11
think about how much time you are spending creating that first of last. The second now let's say you
5:17
created 50 apps each app has maybe three screens so that's that is equal to 150 screens you have
5:23
created and each screen has that header component that you have built. Everything is working perfect
5:29
There's no issue with that. But let's say you want to make one small change to that header
5:35
Now you need to go back each app, each screen, and you need to do the same thing 150 times
5:43
That's not really a smart coding or smart making apps. So what is the smart way of doing it? What
5:51
if you just click few button and you just make the same change that you would like to do in your
5:57
header at one place and push that change for all 150 screen and that's where we need component
6:03
because if you have built the component for that header you just need to make changes to the
6:10
component and push that change for all your screen in one click so the amount of time that you want
6:15
that you were doing earlier without component is reduced exponentially and that's the cool thing
6:20
about component, right? And that's the reason why we should be using component more than what we are using right now
6:28
Now, we understood what is component and why we need component. The next is when to use it, because we need to know when the component is required
6:44
So these are some checklist points that I have listed here. And you can think through it
6:50
So number one, if you are creating a feature and a functionality in your app that you think can be reused by others or by yourself
6:59
For example, you are building an app where you are creating some cool reusable feature that maybe you will use in other apps
7:07
You should be thinking about component. if you want to reduce the duplication of effort that means you don't want to redo or reinvent
7:15
a wheel every time when you're creating an app you need to create the component so you can just
7:20
use it what you have built previously if you want a quick quick development now quick development is because as i said in my previous slide you created that header component Now if you want to make change to that header and if you don have the component
7:37
you're going to spend 150 time to, you're going to spend time for updating 150 screens as for our
7:44
example, right? Instead I can just make change one place and push it. That's going to quickly update
7:51
all those apps, so I don't need to spend the amount of time that I was supposed to spending
7:56
without component. The governance and control, this is also a very useful term because sometimes what happens
8:04
if you are working in a big organization and you are creating multiple apps, now everyone
8:09
has their own flavor of UI, right? Maybe when I'm going to create a header for my app, I will create differently as compared
8:18
to my Thali. They might think something different. and they might add some different feature into the navigation
8:24
But for big organization, the standard is the key. So your every app should look at least similar
8:30
or the frame should be same. So if you are using component that can make sure
8:36
that your organization theme apply to all the apps that are getting built by different app makers
8:42
So this is good. And then also the controls. You can control what is possibly an app can do
8:47
So for an example, in the left navigation, you can say, okay, we can only have the left navigation
8:52
that are gonna be this bit or this height. And you can control that with the component
9:00
And the last that mostly if you want to share, if you have some good ideas
9:04
and you want to share with the community, that's where you build component and give it to the community
9:08
so that all the community members can use the same feature that you have built into their day-to-day apps
9:17
The next is where to start. So we understand what, why, when, now the where
9:23
So if you have not used the component before, to start the component, what you need to do
9:28
you need to go to your make.powerapps.com, and I'll show you in the real screen
9:34
So you need to go to your make.powerapps.com, go to your app in which you are trying
9:40
to create a component from file, app setting, advanced setting, preview feature, components
9:46
and turn it on. feature that is called components you just need to turn that feature on now app if you have if
9:56
you are building app right now or as of today or after today that feature is by default turned on
10:02
so any app that has been built after april 2020 and the feature is turned on already so you don't
10:07
need to worry about you can just start creating your component as it is and once you are in your
10:13
app you will see uh you will see a text like components under the tree view you can click
10:22
on that and then you can see the new component here that's where you start creating the component
10:27
and we will see we will create one component real quick uh in the next few after few slides
10:32
okay this is where you start very simple to use it and very simple to go to the place from where
10:37
you can start with creating the component. Now, this is another very important point
10:44
for if you are planning to work in the component, you need to understand what is component library
10:50
So think component library as a repo or the repository where you're going to store multiple components together
10:57
So just another example, let's say I'm creating a commonly used component
11:03
What I can do, I can create independent component, for example, header, left navigation, top navigation
11:09
or the footer. I can create a separate component for them. But we know that these are the key components for any app
11:17
Now, I can use one of it, two of it, all of it into my app
11:21
But if I can group all of these components together, and if someone wants, they can just
11:26
take the entire set of components easily, rather than going one by one
11:31
So that's where the component library came into the picture. So component library is nothing but a set of multiple components together
11:39
There are some benefits of using component library because once you create your component into the component library
11:46
you can easily update it or easily update the changes to your component
11:53
and push those components to the app maker who are using those components easily
11:59
Now, what component library enables us to do? it is enable the easy discovery and search of the components that you are building
12:07
So when as an app maker, when I start building my app, I can quickly go to the library component search and search for or see all the components
12:15
those are available and select from there. It is easy to publish the update across environment
12:22
So I can easily publish all the changes that I'm making to my component
12:26
if they are under component library across the environments. and once i do that app maker who are already using my component they can get they get the
12:37
notification that hey this component has an updated version do you want to use that updated version
12:42
or not so it's up to app maker to decide whether they want to use that updated changes or not
12:49
and if they want they can click yes and it will automatically reflect all the changes that you
12:54
made into their app they can also do on-demand search for updates so if let's say as an app maker
13:03
i'm using one component in my app and i like to see if there's any latest version has been released
13:08
i can check for the update and when i check the power app is going to tell me whether whether
13:13
there is an updated version for this component is available or not and if it yes i can see
13:19
the words and notes if of course if component maker writing those and i can read and if i like
13:24
those i can take those changes to my app so it's very easy it's very controlled and easy approach
13:28
to do it and again the version notes as i said if there's a version note available
13:34
our app maker can read them and use it in their in their app now one last thing only published
13:44
components so for example like in power app we can work on the different version
13:48
and until unless we publish that app it will not be available for end user the same concept
13:53
apply to the component library also so i can start i can publish my component and then i can
13:59
immediately after that i can edit it start making changes the changes that i'm making will not be
14:05
available publicly or for other app maker in my environment until unless i publish those changes
14:11
so it will allow me to continuous development of making changes to my component
14:16
and when i'm ready then only i can publish so other can use those changes
14:19
Now, the last thing, the features and properties. So the components comes with many of the features
14:29
and the different properties. The first thing that we're going to understand is the property
14:34
right? So a component can have two properties right now. There's one more that we're going to
14:41
talk a little bit later in the slide. So the input properties and the output properties
14:45
An input property that you can see is something that you can send information to the component
14:52
So for an example if I building a header component right and I want the app where that component is being used to provide me the header title right so i can create a property called the header title and whoever using that
15:10
component can provide me what should be the title of that header when they use that component into
15:16
their app then we have the output property output property is something what component provide app
15:23
maker to use so a quick example of that let's say in my component i have i'm putting a gallery
15:30
and the gallery showing some data right and what i want to do i want to create a property that for
15:36
at a given time it will give you the selected item in that gallery so i can create a property that
15:41
will take that currently selected item in the gallery and that output property i can use in my
15:47
app to read which item is selected into that gallery so yeah so import what component want
15:53
you to provide output what component provides you the second one the component can be exported and
16:00
imported across the apps so like we do the app export import similarly we can also also do the
16:06
component export import this is again this is little uh uh known to everyone component is
16:14
currently a preview feature so it's not ga yet but i'm hoping microsoft soon will make it
16:21
ga so all we all can freely use it but uh i mean it's there in previews in the last couple of years
16:28
still making a lot of good improvements so yeah it's in preview but still news
16:35
the another one is variable with a component rscope to the component instance only so what
16:40
What does that mean? For example, if you are creating variables inside your component for any purpose, right
16:47
And I have added that component or created an instance of that component in my app
16:54
And let's say I created two instance of the same component in two separate screen in my app
17:00
That variable that in the component will be the scope for the instance
17:04
So maybe my first screen having that variable value something else as compared to my second screen or the second instance of the component maybe there's
17:13
some different so they just don't go like globally created they created globally for that component
17:19
very nice uh good good to know point here now the next one so recently actually last month
17:27
microsoft has announced some enhanced component properties these are under experimental features
17:33
So they are not even preview, they are Microsoft has just released for us to try, provide feedback
17:40
And once this everything is going to look good, they're going to make them in the preview
17:44
And then maybe when everything goes GA, it will go GA with the component
17:49
So what are these enhanced component properties? The first property is the behavior property
17:56
So if you know in Power Apps, we have something called behavior formulas or behavior property
18:01
these are like event related property so for example on button click or on change of a drop
18:09
down or on change of some value there's an event so if there is a behavior happening that's going
18:15
to call that property to click right so now previously we we had only one event or one
18:22
behavior property that we could have used in component that was on reset so on reset of that
18:28
component if you want to do something we could have used that but now what we can do we can create
18:33
a custom behavior properties so i can create a behavior properties on let's say on a drop down
18:42
click so whenever a drop down value is changed i want to know that event and then maybe i want to
18:49
notify everyone that hey this drop down has been changed just an example but now i can create my
18:54
own behavior property and component and use those events in my app easily and i'll show you if times
19:01
allowed at the end we will show we will see how these can be how we can use these things
19:07
the second is the property parameters so yes we can we can create these behavior properties or
19:13
output input properties but now what you can do you can also create parameters on that property
19:19
so for an example let's say i'm creating that on change property but at the same time i want to pass
19:26
the value of what has changed so uh on the drop down change event i'm saying okay i need to know
19:33
in my app that whenever the component drop down hit change so i have that event but i can also pass
19:39
the currently selected item into using these property parameters to that event so now not
19:46
only i'm getting a notification event triggered when the when the drop down has changed i'm also
19:53
getting what has changed the value so i can use that value to maybe uh notify or use it across
20:00
across the app and because now i can do that now i can create a pure function in component so
20:09
till today or not today means previously before the announcement of these the extended enhanced component properties the component was the UX UX or UI component so you can
20:20
create a reusable UI features like navigation black menu top menu or maybe charts maybe header
20:28
right or maybe pop up these are all the UX components that people can see them but you by
20:34
using these new enhanced component properties like parameters and outer property now you can actually
20:40
create a pure function. Pure function means there is no UI needed. So when you when you add that
20:46
component to your app it doesn't have any UI, it doesn't have any control, but you can use those
20:52
functions that we're going to create in component using this parameter and property to perform some
20:59
complex and reusable functionality. To give a simple example now I can create a quick math
21:07
function that will give you the sum of two numbers in component as a as a pure function
21:12
and you can use this in your app and the only thing you need to do you need to just pass the
21:18
number that you want to add or some and component will give you the answer this is a very basic
21:23
example you can take this concept to really complex scenarios where you want to create some
21:29
complex processing function that you don't want your app maker to always doing you can create a
21:33
function and then share it and they can do it. Okay, so this was all the slides
21:40
And let me check the time. Okay, so we are on the right time. Now let me quickly jump onto the
21:50
my Power App. Okay, good for that. Is there any question that I can see here
22:00
No, then I- Not near the bug. Okay, perfect. okay so the first thing first as i was talking about what is component and and how you can use
22:11
it so i'm going to show you where you can start so first thing first you need to do you need to go
22:15
to your maker powerapp.com this is the url for your power app once you open you can see your power
22:22
apps studio or browser here if you go to the apps this is where you see all of your apps that you are either working right now or you created Right Under apps you seeing all the apps but then you will see something called component library preview
22:39
If you click on that, that's where you can see all the component library that you created
22:44
Now I have created a bunch of them. So you are seeing if you are doing it first time, you may not see them
22:49
So that's not where this is where you're going to start creating your first component. so that's the one way and what you can do you can start from
22:57
clicking here on the new component library provide the name of the library so we do not create
23:06
this this library today we will create some component under that and as soon as you create that component library it will create it for you and then after as soon
23:15
as you've got created give some time you will end up to the powerapps studio right as you can see
23:22
this is very similar and now if you see this is very similar how we get when you create an app
23:28
there's no difference here so that's not something new that you need to learn to create component
23:33
absolutely nothing new that you need to learn very similar experience and every component library
23:38
also going to give you the screen this is for the testing so make remember that this is not your app
23:44
that you are building microsoft is giving you this screen so when you are building the component
23:49
under your component library you can test them at the same time right so that's the recommended
23:55
right way of doing it what you can also do i can also go to the app create one quick app here
24:13
let it ready i can drink water that time so this is my app now if you see this app and the component library that we have created as
24:26
i said it looks very similar but the difference between my app and the component library
24:32
if i'm going to create a component here in my app these components are scoped to my app so
24:40
they are reusable feature that you're building of course but you are building those for your app so
24:46
So if you want to share them with other person, you need to go here and export that
24:51
Instead, if you are creating them here in the component library, they're going to available as a component into the component library so everyone can see them and use it in their app
25:00
So always start creating component in the component library. Very high recommendation here, right
25:07
Now, let me quickly walk you through a quick use case of what we were talking earlier, that why components are very useful
25:15
So I'll continue working on this app. This is my screen one
25:19
So I'm going to just rename this one and say home screen. Okay
25:24
And what we're going to do, we're going to insert a rectangle here
25:28
So what we are doing, let's say I got a project where I need to create a few apps for one use case, right
25:36
And the requirement is to have the app is really nice looking, and I want to create a header for my app
25:42
So what I'm doing here, I'm just going the classic approach. So this is my screen one
25:47
And what I'm going to do, I'm going to drop a rectangle. So I'm just creating a header for my app, right
25:53
And I will also drop a label on top of that. And text to center align and make the change colors to white so we can read it
26:06
And I'll say this is a home screen. and I'm not going to add anything here on the DOM. Let's say we add the functionality and
26:17
I have let's say another screen in my app. So this is my screen tool right now because I'm
26:28
creating this app and I want this header to be in all of my screen. So I'm going to do what I'm
26:33
either go ahead and do same thing go to the rectangle drop it right and very similarly i
26:44
will add a label here and you you start noticing the pain that i'm going through i'm repeating
26:52
myself i'm doing the same work again and again and i'll say okay this is my screen
26:56
now let's say i have another screen my app my app is very complex it has multiple screens
27:03
i'll drop another screen now again very same thing i'm gonna what i'm gonna do i'm gonna
27:08
i need this header so let's say this time i become a little bit smart and i'll say okay i'm
27:13
gonna just copy this entire thing all these two control and go to my
27:18
third screen let me rename this and I'll paste it here so good but still I need to make changes to the name
27:30
okay so so far so good I I'm gonna save this app
27:39
right so my app is ready let's say it has some functionality and we are just trying to understand
27:53
the the logic or the benefit of a component i play this yes my app is looking good but what
27:59
i forgot to add that navigation so i can go to the next so what i'm going to do i'm going to just
28:03
go to here and then maybe add an icon here so that i can go to the next screen okay so i'll go
28:14
go here and then on this one i will just say navigate right so this will allow me to navigate
28:21
to screen two and then from screen two i need the same behavior i need i want to go back to the screen and then also
28:36
next screen right so on this one what i will say i'll just navigate to my screen tree
28:47
now again from screen 2 and screen 3 i want them to go back to the home whenever you click on that
28:56
i want to still want to go then go back to the home so now this can be on the header i just drop
29:03
another icon on the header and this will be navigate to my home screen
29:11
and i can just make this white so you can see it
29:30
okay now let's run this one okay so i have my home screen i can go to the screen two i can go
29:36
to the screen three, I can go back to the home. Fair enough. Now let's say you spend all of this time creating this app
29:43
and you publish it and then you go to the review of the app
29:48
with all of your colleague or the leadership. And they say, okay, the app is looking good
29:52
but we also need a picture of the logged in user. So whoever is logged in, I want that to be shown in this habit
29:59
right so now remember this one thing I was just talking about three screen app
30:05
now think if you have created let's say multi-screen app or multiple apps and if
30:11
someone asks you to make the changes that is actually going to apply to each and every screen now what you need to do you need to go to each screen you need
30:19
to drop a picture because you wanted to want them to see the image of the lockdown
30:25
user align it make sure that it's looking good update the logic here so as you know we can get
30:34
the user picture here image right so this will show me the login picture now this is just for
30:43
the home screen i did if i go to the next screen nothing happened here so i need to do it again
30:48
and that's where the component feature is very useful so let's from here on let's start our
30:54
component and i'll show you how quickly you can create that in no time so what we're going to do
30:59
we're going to create this header component very quickly so this was the component library that we
31:05
have built previously so i'm going to rename this component here so this is going to be our header
31:12
the concept of component is very similar if you are doing this in your app so there's nothing
31:25
new happening here and only thing that's happening is a property okay so the first thing that we need
31:31
as we have done in our app we need a rectangle and rectangle i'm using just for the background
31:37
you can just ignore that but just to make it a little bit more ui rich i'm just dropping a
31:43
rectangle right so this is going to be my header rectangle right now on the component the width and
31:51
the height so the bit most of the time what we need the header to be the full width of the app
31:56
so what we can use here so this is my app my app.active screen so that you know this is going
32:04
to give you the current active screen dot width so what i'm saying whatever wherever this component
32:10
is going to edit that screen width is going to be the width of my component okay height we can
32:16
decide so i'm going to just say my component should be 80. this you can you can decide how how uh how
32:24
you want your component to be uh height basis now the rectangle right so the rectangle also the same
32:30
thing the width of the rectangle i want whatever the width of my header or my component that's
32:37
going to be the width of my component okay now let me do one more thing quickly so if you go to your
32:44
screen and if you drop that component you can see here right so my this is my component nothing in
32:51
just a rectangle but quickly i can check if i go to this uh sample screen and i expect this rectangle
32:57
is already here a few other thing so in my component if you click on the component it has
33:03
a property called fill right this is the background of your component so what you can do you can for
33:09
now set it to let's say this color right and what i'm going to do i'm going to set the rectangle
33:16
fill color to the same full color of what the component so this way i can allow user to change
33:23
the background of my component so as you can see here this is the component of my head
33:29
now the next thing that we need as we have added to our uh original app we need a label so this is
33:35
going to be the label for the name of the screen so this time we're going to do we're going to
33:42
create a new property okay so i'm going to go to my component this is how we create a component
33:48
the property in the component so you go to the custom property click on the new custom property
33:52
here as soon as you do that it will open up this form a small form for the for the information
33:58
about the property so display name as i'll say uh header whatever you want in your header right
34:10
and then we have option to either select as an input property or output property and as you can
34:15
see here i only seeing two i not seeing the behavioral property and i show you the reason behind that for now this is the input property because component want that property to be used to show here okay and it is type text click create and the next thing what we can do
34:34
the value of this text what i'm saying this is the name of my component dot and as soon as you
34:40
click dot you will see your input property pop up here so header text so whatever user is going to
34:47
set header text that will be the property of that will be the name of my header so this is my
34:59
okay now look a bit i'll go here we need to make this change color here and as you can see here
35:08
okay so this is my text of the header now what we're going to do we're going to also
35:12
So let's save it. I'm going to show you something else there
35:27
Okay. So this thing has saved. And now what I can do, I can go here
35:33
It's already ready to go. And now if you go to your screen, as you can see here, this is my text
35:37
But if I go to my app and go to the header text
35:42
and change it and say so as you can see here now i can change the text fairly easily now if i add multiple screen here
35:54
right and on each screen i drop the component i can easily change the text without making any
36:01
further update to the app or to the component right so i can just change this to
36:06
screen two. Okay so this is good, this is working fine. Now let me do one more thing
36:19
If you go to the file and if you go to the settings and if you go to the advanced setting and if you go to the preview feature and if you scroll down
36:29
under experimental feature this is where you will see those uh few features that i think i always
36:41
enable one is enhanced formula bar and the other one is this one that's okay
36:47
and there is something called enhanced component properties so these are the property that those
36:55
two properties that i was talking previously that microsoft have just released as an
36:59
experimental features so go ahead and enable that because it's going to give you a nice uh approach
37:05
to create those common functions click save and we're going to save this one okay and now let's
37:11
publish this component so we can use it in our app that we are building so i published this i'll go
37:17
back to my app so this is my app now how to uh get that component from the component library like
37:24
you add any other control and the plus icon you will see something called get more components
37:29
Click on that. Now, as soon as you click on that, it's going to list down all the components available in this environment
37:36
So this is all the different component libraries are available. This is the one that we have just created
37:42
It has one component right now, so you can click on select all, or you can click on the small drop down and select one or many components are available
37:51
So, for example, in this one, I have these many components. I can either select one or all as I need
37:56
So we're going to select this header component that we have created. going to click import and now what i'm going to do i'm going to delete
38:03
all these header that we have created in our screen and then what i'm going to do under library component because we added
38:17
that just keep clicking on this i'm not deleted everything okay so on this screen and then I'm going to go to the home screen and do the same thing
38:32
okay and then for my second screen also I'll do the same thing
38:39
so now what I'm doing instead of creating that uh that header for each screen separately what I using I using the
38:54
component as you can see here, right? And I can give the name off, I can use the text as I need it
39:02
So this is my home screen. This is my screen too. Now let's see that let's take the same example
39:21
So I created this app, I deployed this app, and now someone asking that, Hey, can we have
39:25
the user picture? So now I'll show you how easy it is. I'll go back to my component and I'll go to my component here and I'll drop the image
39:35
as i did in my app right and then i'll just resize it so that it will look good and
39:47
the image is going to be very similar user.image so now i have uh the image ready in my component and then what i'm going to do i'm going to just
40:03
publish this one save and publish so now my component had that user picture there in my app
40:13
if i go to this uh the controls control screen in in this three dot if i click on check for update
40:21
look what it's saying it's saying that power vc1 has updated word because i just added that
40:25
picture what i'm going to do i'm going to click update and you will see all of my screens now
40:31
had that picture here. So I don't need to go individually screened
40:36
rather I have that update. So this is how easy it is. You can scale this to multiple apps and multiple screens
40:41
and you will realize how much time you are going to save by using this one
40:46
So this was a sample of the component that you can quickly build. Now let me quickly walk you through
40:52
some different components that I have built so far. And again, all of the components
40:57
that I'm going to show you are available. in the component library
41:04
Okay, so let me start with my first app here. So this is the Workflow Progress Tracker app
41:11
And what this app is doing, it is connected to a SharePoint list, as you can see here
41:17
It's showing me the different status of the different work item that my team is working
41:22
What I can do, I can click on the individual item, I can see the detail, I can click the information
41:28
make changes. I can also create new item. Okay, so this app is functional
41:36
but if you have noticing somewhere on the top of the screen
41:40
I have like an M365 nav bar kind of header. This is the first component that I'm using here
41:49
So in this component, I can have this icon where you can add more and more navigation item
41:54
If I want to create some admin level settings, I can do it. I can also have the search functionality enabled here
42:00
And some of these features, I'm using those experimental features. So they might not be available right now or may have changed in the future
42:07
but this can be useful to that. Second, you can see the small button here
42:14
So someone asked me that, okay, this screen is looking good, but what I want, I want some graphical presentation
42:20
Okay, so is there anything that I can use? So I had built some graph component previously
42:27
and what i did i just dropped those component here and without like spending five minutes and using
42:33
them in my app without any changes so these two graph that you are seeing these are the component
42:39
uh they are using gallery and other uh other features to create these interactive graph
42:46
the first component or the the bar chart what it's doing is going to allow me to filter the
42:51
gallery underneath it so if i click on any of the bar you can see the data is filtering based on the
42:57
information that i'm clicking here so that's the one behavior uh this column chart what this is
43:02
allowing me to is allowing me to click on any of these columns and it will take me to the second screen where i can see how many are in critical or the low priority So if I click on the critical I can see all the critical item here I can go back
43:17
I can click on the medium. So now I can see all the medium status work item. Again
43:24
this is the reason to showing these charts to you and functionality. This is very easy to
43:30
incorporate in any of your app. If you have the component and someone is asking you
43:35
can you do that? You don't need to spend many time, a lot of time to making those changes
43:40
You can just drop them and use it. Another component that I think you might have seen
43:46
the notification component, Power Apps does have a notification component. But if you remember, it opened all the way on the top screen
43:54
This new component that I have built, it is more control. You can make changes
43:59
And based on the event, so for example, if you're creating an app and when the item has submitted successfully, you want to show the confirmation, or maybe if there is an error, you want to say an error message
44:10
If you want to publish a notification to all your own app, you can just use these components
44:15
So again, another sample component. Another one that I like to show you guys is the top map
44:21
So this is the top map component. Again, it is also fully configurable and functional
44:27
what you can do you can create the multi-layer top navigation using this component you can set
44:34
the link whether you want the links to go to the separate screen like i'm sending
44:39
another screen can be google.com or any other or you can also send them to
44:46
to the screen itself where where you are right so if i click on connector now i'm going to the
44:55
So another component available. Now these are just a few of them that I've created
45:02
If you go to the community, there are a bunch of like hundreds of components are already
45:07
available, though the feature is preview right now. So I would highly recommend that go ahead, go and check them
45:14
Now I think I have, I'm almost closing two minutes. And before that, let me go back to my, actually I like to show you guys one more feature in
45:24
component so if you go to go back to your component here and if you go to the
45:32
component now if you go there if you click on the new custom property because
45:36
we have enabled those experimental features now you can see the behavior
45:41
property here right and this is what I was talking earlier these are the new
45:45
features coming in we don't have enough time otherwise I would have shown you
45:49
that. Now you can use these behavior property with the parameters that can actually allow you
45:57
to create functions and actually yeah Simon how much time I have left? Deepak you are well over
46:05
10 minutes now. 10 minutes or two minutes? You're well over 10 minutes now. Oh okay sorry sorry okay
46:14
So then, guys, maybe next time. So I'm going to just go back to my screens real quick
46:19
so we can just complete the slides here. Some best practice. I think most of them I already have explained
46:31
that you should always start in the component library. Plan ahead. Make sure that you are thinking about reusability
46:37
Do not try to overkill the component. It is reusable, so reusable things should be common
46:42
it cannot be a point solution because point solutions cannot be the component
46:47
So keep it simple, always remember. Some limitations like data source forms, data tables
46:54
are not supported in component. Collections are not supported. You can create tables but not
46:58
collections. You can use gallery, you cannot use the component inside a gallery or inside a form
47:07
Local, the media file supports, if you are using images or something like that, it's not
47:12
supported right now. Some learning materials, so if you if you go to these links yes you can
47:19
learn more about components, component library and everything else and again
#Software
#Software Utilities
#Mobile & Wireless
#Mobile Apps & Add-Ons
#Training & Certification
#Gadgets & Portable Electronics
#Educational Software
#Computer Education