>> Hello and welcome to the next episode of Powerful Devs.
I am Greg Hurlman and I'm here today with Scott Durow,
who's going to be talking to us today about adding
drag-and-drop functionality to Canvas-based Power Apps
with the PowerApps component framework.
Scott is a Solution Architect and
Microsoft MVP for Business Applications.
Scott, how you doing today?
>> Hey, Greg. Very good, thank you.
Great to see you.
I feel like we've known each other for so
long on forums and things,
and you being involved with PCF.
It's great to see you face-to-face.
>> Absolutely, you too.
Scott, what is it that brings you here today?
What role are you in right now and what have you got for us?
>> Yes, I'm a Solution Architect today,
but I've had that great privilege to work
with the Power Platform right from its inception,
right from back in the days CRM 1.0
and Power Platform was a mere sparkling in very people's eyes.
I've seen it grow up over the years,
and the thing that really drew me to CRM and
Microsoft CRM back then was the fact
that it was empowering people to create
really great solutions without actually writing any code.
Which was a real contradiction
because I'm a developer through and through,
I always I've been involved with
coding through loads of different platforms,
but I always saw the benefit in that fusion dev type environment
that we are seeing as being so
important to today's solution development.
>> Yeah, absolutely. I think you mentioned
the fusion dev teams, app makers,
low coders working with
brokers to work together has definitely been
that sweet spot in getting things
done quickly and powerfully, really.
Scott, as you mentioned,
it's great to see that we've been working together for a while.
Definitely, that Power Apps Framework has
been like UI layer, that visualization,
the thing that users are seeing and using,
that people think about
when they start thinking about customizations.
I want to say most, but an awful lot of the time.
There's a lot you can do,
but today you're been looking at
drag-and-drop. Tell me a little bit about that.
>> Well, exactly as you say,
you can do a lot with the Canvas apps and Model-driven apps.
You can get a long way which is using the functionality
that's given to you out of the box, so to speak.
In Model-driven apps, the way to extend that in the past,
it always been putting something called HTML web resources and you
can put them on forms and very much left to your own devices.
You had to do everything right from the ground up.
It was just an iframe.
That resulted in quite a difficult experience for makers.
They weren't called makes back then,
but people who were configuring the forms.
A big focus point for myself recently has
been in that fusion development
that you've just been talking about,
where we are working together,
being able to enable makers to be able
to build beautiful apps and fully functional apps.
As soon as we get down to coding something,
it's almost like the coding has hijacked
the whole project and it becomes all about coding.
I've been really thinking about,
how do we organize our teams so that as pro coders,
we can facilitate the low coders and
the no coders in a component architecture.
Component-based architecture is something
that's been around for eons.
But it now with PCF,
it really does give us that ability to
create something that does just slot
in exactly the same way
as the rest of the out of the box functionality.
So the maker,
as far as they're concerned,
they are just using some functionality that's part
of the campus Apple or the Maker Studio.
That's really my focus point here,
and where I got to with drag-and-drop was that,
there's often that point in
every maker's experience where
they find that they get a long way very quickly.
It doesn't matter how you develop your apps,
whether or not you go ahead and you mock it up
on a whiteboard or you use PowerPoint or you draw sketches,
or if you just start putting
some things on a form and just grows organically like that.
It doesn't matter. There's always that point,
and it's often referred to as a cliff,
where you think, how am I going to do that?
With drag-and-drop, it's one of
those things a lot of the time you see
these hacks, if you like,
maybe using slider controls
or whenever you get to that point where you're
starting to use functionality where it
wasn't really designed to be used in that way,
I think that's where I use that as a testing point.
As soon as you move into pro-code,
there is an inherent increased total cost of ownership.
But equally on the other side of that coin,
if you're starting to use functionality in
a way that it wasn't really designed for,
then equally, there can be
a much increased total cost of ownership.
That's one of my indicators,
and drag-and-drop has been a classic case
of that is that rather than there
being these adaptations of sliders and things,
actually, it does lend itself to be a very good example of,
let's credit a component here that we can
give to makers and provide
just enough configurability of
that component to enable them to get what they need done.
The great thing is that it just extends the platform,
which is what I really love about PCF.
>> Yeah, it's actually been fantastic.
As you mentioned, some of the stuff that
we do with PCF that maybe you
could do with the out of the box
maker stuff the Power Apps gives you.
But as you also mentioned,
goodness help the next guy or
the next woman who has to come along and pick
up all the crazy code you had to
write to turn a slider into a drag-and-drop control.
Sometimes building that extra leg or
piece in the form of PCF control and giving it to somebody,
here's some extra functionality,
really completes that story.
Scott, why don't you show me what you've got
today and you can take your demo.
>> Yeah, absolutely.
If we switch over to my screen,
I've got a very simple app here.
I built this as a proof of concept.
I had recently moved to Canada,
so I was making up some silly questions about Canada.
Someone asked me as we're doing this HR quiz,
and you may have taken
these things: data protection, health and safety.
There's always some kind of question
where you have to drag-and-drop things
between true and false boxes or you
have to group them by certain statements and they
were creating a Canvas app for that purposes,
for an HR compliance thing.
They came up against this barrier,
so you can see what we can do here is we can drag
the things from the top over into the various different areas.
The great thing about this is this does work
really nicely on a mobile phone as
well because it's just using
the drag touch responses of the browser.
>> I really like the way they grow
the pops big when you could drag it
across to what helps that
UI affordance for the user and understand they got it.
>> Yeah, absolutely.
It does give a degree of tactile feedback.
>> That was a proven concept, and then it was like,
what do I need to do here to build
something that's going to be usable by
makers without making it too constrictive in the sense that okay,
I could make a decision to say,
if I take all of these out of the false here,
you can see here that there's
a little statement here that says
drop statements that are false here.
Now, I could've built that into the components itself.
Whereas, this is the rationale,
this is the thinking that I'm
really concentrating on at the moment,
is that actually, that doesn't really
fit with the ethos of Canvas apps.
Because the ethos of Canvas apps is that you
should be able to do things as far
as humanly possible, pixel perfect.
What I've done is I've made that just simply
a label in the Canvas app that responds
to the number of rows
in that particular collection that you drag right into.
Really, then it comes down to saying, well,
what functionality do you need to do to make it configurable?
Like the color of the background,
if I had to make that configurable on
the component because that's
not something that you can do in Canvas apps.
You can't create a PCF component that then has
child components that are styled outside of your component.
>> That correct.
>> As soon as your component,
you've got a boundary there and you have.
It's all about how much level of configurability
do I need to provide in my component?
Getting that right is obviously a little bit of a trick
because it's a balance.
Because we could, and there's the antipattern,
the inner platform affect that.
I could go right down to the level of being able to
create icons and all sorts of
stuff internally within my PCF control
and all these different configuration options.
It's about deciding what do I really
need to do in order to make it reusable,
truly readable in the context I've been using.
That's probably where the story comes with
the giving it to the makers component,
getting feedback for the makers,
coming back and saying we'll add this additional feature,
and that's where it creates that incremental approach.
>> That's a great approach to give
people as much functionality as they can
while leaving it as flexible as you can for sure.
What kind of code did you actually have
to write to make this happen?
>> Well, it's a combination of Canvas expressions,
and under the Canvas,
it's using a component,
a JavaScript framework called Dragula.
The reason I picked this is that it very
simply does drag-and-drop very well,
touch-friendly, all those kinds of things,
but it doesn't add all of the additional baggage.
It's just a very straightforward component.
You can see once you've added into Studio,
it then appears as a code component.
Again, this is the great thing about PCF,
is that it starts to appear alongside
all the other things that a maker will be using.
When you drag it on, what you then get
is you get the option to configure,
well, what are you going to bind it to?
If you can see here, I've got a "Reset" button here,
which is just for demonstration purposes.
I'm just creating two collections,
so call items and call items two,
and that should be named.
On the left-hand side,
we've got a drag-drop component which is bound to call items,
and on the right-hand side,
we've got bound to call items two.
Then we can define in the fields
which properties of each of the items do we want to show.
>> Fantastic.
>> The component does allow us to
add multiple pieces of information if I wanted.
In this case, I'm just showing items that
I'm going to be cleaning.
As I've done it, I drag it out if it's the done.
But equally, I could say, well it's
a laptop and I could put the maker or
the model of it or something by adding an additional role.
That's something I did provide some of
the functionality to configure.
Then equally, if you go over into advanced,
we've got a lot of other functionality here,
if we go down to the bottom,
around things like the color and the font size.
So item font size,
item color, item background color, all those kinds of things.
>> All those are good design properties that
the makers like to put a list.
>> Exactly. That's really where you can
bring those up as you require.
It's about finding that balance,
what to provide initially,
and then further going in and adding more functionality.
But then the rest of the actual drag and
drop really comes down to these zones,
the concept of zones.
Each zone, you give a name,
and then you have to nominate one zone as the master zone.
This left-hand side is the master zone,
its master zone is true,
and the left-hand side is master zone false.
What we do is we say what that master zone is doing is
that gives us an on-change action.
If we select the on-change for this left-hand side,
it's responding to an on-change event
that the PCF gives us to say,
it gives us a number of different properties.
Well, what's the ID of the item that's being
dropped and where is it being dropped from?
The dropped source and the dropped id,
and there's also another property which is the dropped target.
Using this on-change event,
then I can actually start to make
changes to the collections, and of course,
as soon as I make a change to the collection,
the components then will re-render
and they will display the items that are in there.
The actual changing of
the collection items again is left up to maker.
Because what we don't want to do is
get into a situation where we move something
from one zone to another zone and it looks like the items moved,
but the actual data that
that component is bound to hasn't been updated.
I think that's another really key important concept
of the way the ethos of creating these PCF components,
is to make sure that it has
a data binding ethos rather than things working internally.
What we're doing is we're raising an event and then it's up to
the maker to respond to that event, make any changes,
and then when I make a change to the items by adding
and removing those PCF components,
then will re-render with the items that have been moved.
>> That's fantastic, Scott.
I really like how you've left so
much up to the maker of the app itself.
You're like here is some functionality,
now go do something with it,
and not prescribing anything which is amazing.
You're not pinning anybody into any corners,
and that's my favorite kind of thing for sure.
We're running a little short on time.
But if you want to,
is this code something that folks can find out on the Internet?
>> Yes, on the Internet, it is.
It is in GitHub.
I think that if you look at the code,
it should be very straightforward.
The reason I didn't want to go down too much into the dig into
the code is that if you look at it, it's from,
for example, from the update view property function,
which is really where all of
the magic happens with PCF components.
You can see things happening.
The only thing I would say is that with Canvas apps,
the little bit of a got you with
your PCF components is that you do
have to detect when things are changing.
The context in a model-driven app will give
us the list of all the different properties that are changing,
whereas in a Canvas app,
it doesn't give us that same level.
So the only little bit of complexity
in the code is that I've got a property bag State Manager and a
dataset State Manager that you give it
the old values and then you give it a new and
it will tell you what has changed.
It's all in GitHub,
so you can go ahead and check it out in
my PowerApps PCF samples repo and it's on the Canvas D&D,
drag and drop, not Dungeons and Dragons.
If you wanted to, you could build it.
I deliberately haven't supplied
the managed solution at this stage because again,
this is one of these things is that actually if you're going to
start to enter into reusing these components in your own apps,
then there is a certain degree
of ownership that you're going to have to take off this code.
Because, for example,
if a maker asks you
to make some changes to it or something like that,
you're going to have to take a degree of ownership.
But if I get enough people asking me,
then maybe I'll create
the managed solution and people can just reuse it that way.
>> Fair enough. Definitely, no support.
It is a sample. Here's some code. Good luck.
>> Yes. When you say it like that, that makes me look bad.
>> No, I don't mean that in a bad way.
It's definitely here's a start.
Here's some functionality, maybe you add to it,
maybe you change it a little bit or maybe it's
good for you, but definitely,
we should always encourage somebody who's
downloading code from GitHub, even from Scott.
Make sure you view that code and you understand
it before you're now forced to support it in production.
>> Yes, exactly. PCF gallery
is fantastic as a showcase for a lot of stuff,
but some of those components, again,
it's exactly the same caveats, as you just said.
Terms and conditions apply.
>> Absolutely.
>> [inaudible] You've got repayments.
>> Scott, thank you very much for joining us today.
I'll make sure that we get links to the things you showed us in
your repository and the short notes below,
and thank everybody else out
there for joining us at Powerful Devs,
I will see you next time.
>> Thanks for having me.