>>> All right. I'm going to talked to about
Composite controls or custom controls with power apps.
The platform gives you basic controls by default do to build apps.
There's a lot you can do as an app maker without having to dip
Into code. Today i'm going to try to build
Three controls from scratch. And see how that's been achieved
With power apps. Before i do it, i wanted to show
An example of a real-life real app here.
This is an hr app that was shipped not long ago.
Out of the box, we have some basic controls like regular
Labels, buttons, things like this. The team who environment built
It went beyond that. They created the loader
Experience. They did some sort of
Notification control here, dialogue box you can see here.
You can see the gary control is really customized to have a very
Different experience. So with power apps, you have to
Some basic tools at your disposal to go much beyond what the platform gives you out of
The box. We going to see how we can do
Some of that there's a lost
Controls you can build out of a gary control.
The current control we have is very verse awe tile.
A lot of properties to change the layout.
You can change the type of layout you have to be
Horizontal, vertical, nest gary controls. These are a couple examples of
Actual controls you can build with the platform even though
You don't have that out of the box. It's easy to build controls
Ontop of basic controls. So here, again, i'm going to try
To build a rating control as one example
I'm going to get started. We don't have this control out
Of the box. I'm going to switch to the
Studio here real quick. As you can here here, the
Controls we have at our disposal are limited to drop-down, combo
Box, check box, we don't have it up and down.
We'll try to build a numeric up and down, as we saw.
These are the limited controls we have today in our disposal.
So for that, i'm going to use a regular tex input.
I dropped it here to save some time. Let me zoom in little so we have
A better visual of what we're doing. I'm going to keep zooming in and out.
I'm starting with a text input. Going to call it numeric up and
Down input text for clarity. Text box text.
I'm going to drop in an icon for one of my buttons.
I'm going to go the up button here.
Or actually, the down button right here as well.
I'm going to do a little sliding.
A little around here. Get some padding going.
I'm going to do some formatting.
It's going to go dark. Even darker than that.
Then do some fill. Placing this control right here.
I am interested in having it exactly half the width of this,
Height of this control. Height property of this control
And link that to my input next.Height. That gives me the exact auto
Height i want. I still to make sure it's always
Positioned at the right location. That's going to be the same
Location as the input text.Y. But that needs to be kind of
Actually this is sorry about that. The y position here of this
Control should be related to the actual position of the input
Text. Plus the height of the text box
Here divided by two. That gives us this positioning
Right here. If we actually end up increasing
Moving the control or even doing something like that, it will lay
Out in the right position. That's one thing. I'll change a little bit the
Position of this guy and bring it a bit here.
I take this control. It's the same concept i just
Don't want to redo the styling again.
I'm going to ring in there. Bring it here.
Let bring it back right here. So you realize we are almost
Getting there. We need to kind of create some
Logic. I'm going to justify this to
Right so we have the we going to be inputting here at this location.
The other thing i need to do is use a formatting of numbers so
We only allow numbers for this control. And then the logic for this is
Actually pretty simple. We going to to an update context.
Take a value, say, not values, something like that.
Which is numeric up and down value equal to not
Value. Plus one.
Then the same thing we going to do for the button here.
Onon the onset of this button. We do here.
It's still going to increment that number. Again, we need to bind the value
We just created to the default of this text box.
So, again, the value we just immr.Mented is not value right here.
That's it. We have a easy up and down implementation.
One thing that is a little is grouping it.
I group it into its own control. So numeric up and down.
So, again, it's a simple example of it took about two minutes of
Numeric up and down. If you were to do this any other
Platform, you have more elegant programming, sophisticated encapsulation.
Whatever you do here in power apps in just under a inminute in
Numeric up and down, it's something you can wrap around
Your head doing that. You can make it more complex,
You can have it min and max. You can copy paste this into
Your auto screens and apps. So the next example i want to
Build is the control. I have some precooked controls.
It's a simple image control. I call it heart
Background, let's say.
I bind this to an image i have already prepopulated here.
It's this rate. You can see it in the contrast.
It's basically just the frame of our control. I do that.
So writing right here. Apologize about the contrast there.
You will see here in a second that what i'm going to do is
Drag a rectangle and place this rectangle just behind this
Rating control. Again, we have a rating control
With power apps. We have a simple control here
That's called rating.
But might be interested in different layouts.
Maybe half a star rating. Different spin on what a rating
Control now. I'm building a different
Implementation of that to give you more flexibility in terms of
Layout and look pa&feel. I placed my rectangle here.
I call it maybe rating value. The idea is to find a way to
Kind of start sliding this at the right position, depending on
The user interaction. One control that can do the
Trick is a slider control. I'm going to add the slider
Control and bring it a little down here, ray it out and
Something around those lines. I'm going to set the max to five
If you'll interested in a five-star method.
I'm going to use the rectangle value here and bind the width of
This so be dependent on this slider.
It's going to be a rating. So hearts, background.Width,
Divided by five, which is the number of stars we have.
So one star. Then you got to multiply this by
The slider value. Again, the slider value goes
Between one and five. So this should now highlight all
The hearts you have. So if i go do something like
That, you know, you can see that really quickly you'll have a
Heart control. One more thing is if i was
Interested in having less coding stuff, i can go back to my equation.
Instead of having a five, i can do just slider value.Max which
Is five in this case. Nothing will change right now.
It's going to be fine. Of
One. I could go ahead and change to be ten.
All of a sudden i will be implementing a half star rating.
So something your control is not customized to do right here.
Last thing i need to do is get rid of this slider.
I want to be able to interact with the actual heart control.
An easy way to do that is overray the slider control on of
The hard control then go ahead and set some transparency on the
Handles on the fear control and on the rating.
So at this point, say control at that should act really exactly
Naturally how you would want it. Again, you would group
This. Let me just group that.
Actually, i don't need this one. Let me delete that. Oops.
Day. Stay.
This, this and this. Group it into its own control. Rating control.
The platform is working on a lot more infrastructure to allow to
You do custom controls, things you can wrap it around.
Built building your own library. Those are all things on the works.
Things that language l allow you to better distribute these
Packages around applications and things like that.
So i'm going to bring this down, again, so i can focus on my last
Control. Set this pa n back.
I have right now, going to delete this guy.
I don't know why this is -- stay.
Let me bring this actually also back. And then let me move it around.
That doesn't bother us. Let's take the image control here.
What i'm interested in building right now is a control.
Building something as complex as this. Hopefully will do it in a couple minutes.
If you try to do it html or other lake languages, natively,
You'll spend more time to do this.
I'll try to do this in a few mites. I do that.
I'm interested right now in having an indicator that's going
To move depending on some sort of input.
I'm going to use for that an html control right now.
I'm going to overlay this html control over this.
I have here a simple html language. This is a developer conference.
So i went for html. You can achieve this in many ways.
It's just an image of an indicator control with one
Little css property which is rotate. We going to make use of that by
Injecting our own control values from power apps into this
Equation, into this formula. I'm going to copy paste this.
I'm going to bring it to the html text right here.
You can see here i got my gouge where i needed it.
Again, it's a simple image wrapped into development.
I'm interested in actually driving the value of the slider
Right here. By a slider or numeric up and counsel.
I could hook my numeric up and down.
Let's try to wire it up with the gouge control right here.
To do that we can simply do an expression to continue strings.
I'm going to do that and get rid of my zero. Value here can be
The value of the numeric text. At this
Point, if i go into here here.
You can see that i can actually drive my numeric up and down.
Of course, i could hook the same thing with a slider, makes it a
Little more interesting. I'm going to do a slider
Here. I'm going to take the, again, go
To my html text and take the have
Ale output file of my slider.
.Value. Then, again, you will be able to
Drive this with the slider. So, of course, again, this is
The second time i show an example. There's a lot you can do with
The slider today, a lot you can do with the gary control.
This n this particular case, the goth control you're very likely
To have some sort of data input coming from some sort of
Service. I tamed to do that with the
Simple simple control here to a data source.
I have a sound api. What i'm doing is here is using
The microphone natively that's part of the control, the power
Apps set of controls you have at your disposal. Recording a sound.
Sending it back to the back end. Analysis of the sound.
See how loud it is. Then getting back the value that
I'm going to drive my gouge control over.
Not sure a test is going to work in this environment.
If you want to applause, this is your time.
Hope we work. I don't know if it's going to be sound.
Let's see. The connection is a little slow. Good.
Thank you. That's it.
That's all i have. There's i lot to do.
Lot of resources out there. Just point out a few more things.
We have a set of blogs in our power apps blogs that talks
About ux controls, ux sliders. All sort of custom controls you
Might want to use for your app. I rarely find controls i can't
Do with power apps, even with the native controls we have.
With the basic controls we have, that's the most exciting part of
Power apps is you get to be creative in how you assemble the
Basic controls if it's something more complex.
I'm part of the customer success team. We see a lot of very creative use.
Very stunning, good looking apps that would be hard to even
Distinguish from any native apps you would have.