Microsoft 365 Community Experts from the field, 6 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: 5 Tips & Tricks when customizing the Command Bar in model-driven #PowerApps

Description

I partnered with Microsoft Canada on this video to share 5 tips and tricks I use when customizing the model-driven Power Apps command bar.

Join Scott on the Microsoft Canada Developer Digital Meetup Tour: 👉https://aka.ms/scottpp

✨How to clone a record including child records
✨How to control the visibility of a button depending on the state of a form
✨How to update grid records FAST
✨Know how component library publishing really works
✨Catch & Handle errors in your command button commands
✨A few bonus tips are thrown in!

Learn more: 🔗 https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/use-command-designer
🔗 Comparison between Ribbon Workbench and modern commanding - https://develop1.net/public/post/2021/07/25/RibbonWorkbench-vs-PowerFx

Contents:
00:00 Introduction
00:31 Tip 1 - How to clone a record including child records
07:59 Tip 2 - How to control the visibility of a button depending on the state of a form
08:53 Tip 3 - Know how component library publishing really works
12:04 Tip 4 - How to update grid records FAST
14:36 Tip 5 - Catch & Handle errors in your command button commands
16:44 Join Scott on the Microsoft Developer Digital Meetup Tour!

Huge thank you to Microsoft Canada for sponsoring and collaborating on this video!

#sponsored #powerplatform #powerapps

A

Hi friends., it's scott durow, and in this video I'm gonna be showing you five tips on.

A

How to use modern commanding,, which has replaced the classic commanding that you.

A

Would've used the ribbon workbench to do,, which is a tool that I wrote over.

A

10 years ago, now,- and it's actually the only community tool that made its way.

A

Into the official microsoft training.

A

so stick around and I'll show you what I mean.

A

So the first tip is how to clone a record.

A

And this is a classic use of command bars, where you have a button that.

A

Will just simply duplicate the current record, but more importantly,. It will.

A

Also duplicate child records as well., so here is a model driven app that I've already created with a classic purchase.

A

Order line item type table structure., so parent child relationship..

A

So I added these in as tables and when you add in a table to a model.

A

Driven app designer,, it gives you the ability to edit a command bar.

A

And so I'm gonna select edit command bar on the purchase order, and it.

A

Gives us the option to select from the different types of command bar.

A

So the main grid, main form, sub subgrid associated view.

A

Now I'm going to select main form, because this is the button that allows us to.

A

Clone the record that we've currently got open,, but also I'm gonna, go and.

A

Try and open that record as well. so doing some things which actually normally you would've had to create javascript. But the great thing about modern commanding is that it enables.

A

You to use power fx and all the benefits that come from that.

A

So once we're in the command bar editor here,, you can see all of the buttons.

A

And I'm gonna go and create a new button. Here, new command.

A

And I'm gonna say clone and let's go and give it an icon. Here.

A

There's a,: actually, there is even a clone icon,, which is great.

A

And we've got the option to run a formula.

A

And in that we've got run javascript as well., so we've got the ability to still call javascript, as we did.

A

Before, but I'm gonna use formula., and this gives us the classic power fx style formula across the top.

A

It,, it also gives us the ability to have a visibility rule here.

A

And we could actually select to show this button only when a particular.

A

Visibility, rule, and that, again,. We can create a visibility rule using power, fx.

A

I'm gonna save this particular library here..

A

One of the things that is somewhat difficult to do is complex power. Fx.

A

Expressions inside this designer.

A

Luckily, what we can do is we can open up what's called the component library,.

A

Cuz every time I create a button inside a model driven app,, the first time I.

A

Do it, it creates a component library., and so I'm gonna click open component library., and so what this does is just opens. The canvas app designer that you'll be very.

A

Used to, and you can see all of the buttons that are already being created.

A

We've got this clone button that I just created and if we look at the top,.

A

We've got on select as a, an option., and I can now just start writing my power fx expression now,, because I'm.

A

Going to copy, the,, the parent record., I need to be able to get a reference of that id.

A

So when you use self,, we've then got self-selected.

A

So self-selected gives the item that I'm currently on,. If I'm.

A

On a form,, it'll have item. if I'm on a grid, it'll have all items, and because I'm on a form,, I'm going to use item..

A

So if I put this little bit of power fx in here,, this is very simple..

A

We're going to patch the the purchase orders and we're.

A

Going to create a new record., so we want to be able to set, use the defaults for that record.

A

And then we are going to just pick up some information from the current record.

A

Now I'm just picking up the name and, and appending copy on,, but you could then just pick up all the different attributes that you want to,. So you.

A

Don't have to clone the entire record., you could just pick up, pick and choose the, the fields that you want.

A

To clone,, but this patch function will return a instance of the new record.

A

Now, normally, if I was using just standard power fx,, I would sort of use something.

A

Like set var new record new and then,, you know,, you could use that variable to.

A

Then go and relate your child records., but because we are using the command bar editor here,, you can't use.

A

Variables or context variables., all we can use is a construct called with and with is actually quite useful.

A

What it allows us to do is sort stores, a temporary version of the new.

A

Record .: now we can clone the child records, and what inside of this, we can.

A

Use the purchase order that we've just created . and, of course, what we need.

A

To do now is you need to go iterate over all of the child records of this.

A

Record that we are currently selecting and then clone those and relate them to.

A

The purchase order we've just created., but in order to do that,, I need to access the dataset of those child records.

A

Now, I would, what I can do there is. I can come into my dataset area and I would add.

A

Data .. If I was cloning the activities,, I would select and add activities.

A

If I was cloning, work, orders, or, or whatever,, I would,.

A

I would select the table. I've already added in the purchase order line items table here,, which.

A

Is what we are going to be cloning.? So, let's put some code in here.

A

and what this does is it,. We are now going to patch this.

A

Purchase order line items table. and we are gonna iterate over all of the line items of the selected item.

A

And this is fantastic cause. You can just simply navigate down to the child. Items.

A

In javascript, you'd have to go and grab them and do another web api request.

A

But we can just simply use this dot notation to go and access those child records. and then of course,. We can create this patch.

A

And simply relate the purchase order of each of these new.

A

Child items to the purchase order that we created in our with.

A

And so I'm naming them as line item here.

A

So we are picking up the product and the the quantity from the line item of the.

A

Parent child, and then we are relating it to the purchase order. We created.

A

So that's the script in its entirety.

A

and after we've done that patch, we can go navigate to the new record that we.

A

Just created up here, and then also do and notify it as well, so that we can.

A

Just give the user information that we've just loaded that new record so.

A

If I save this and then publish it, and that's,, that's quite important.

A

And publish this version like that.

A

and then go back to the the normal command bar editor.

A

We get this option to resume editing in the command bar here.

A

So there we go. and if we select the clone, we've now got that new piece of expressions that we just.

A

Created over in the component library., so it makes it a lot easier: cuz this,! You can't expand this. This little.

A

Text box at the top here to edit it., maybe that's an,- that's your bonus tip is to edit it.

A

It makes it easier in the component library.

A

so to test. We just simply go and play and that will publish it and.

A

Then it will go and open up our model driven app and you have to.

A

Refresh it once you've opened it up.

A

and then, if we come down to our purchase order here,, I can then.

A

Go and open up a purchase order, and I can click clone like this.

A

There we go. it's copied the purchase order., and it's also given it that name with copy in brackets.

A

I could also add the confirm function as well.

A

go and check that out to just sort of ask the user. If they, are you.

A

Sure you want to, to copy the record?, but this gives you a good idea on how to, to do that. Cloning.

A

And, of course, you could clone multiple different child records,, maybe other items like,, you know, connections or child activities.

A

And you could also create new records that are not part of the clone, as well.

A

So tip two,. Imagine you want to show this clone record for only existing.

A

Records cuz, it doesn't make sense to show them for new records at the moment.

A

It's always gonna show this record, so you can see the visibility is set to show.

A

So we need to go and change this to say, show on condition of a formula.

A

And I can put a formula in here to say, only show this record. If the state.

A

Of the current record is, is not new.

A

Cause this formula has to evaluate to true to show the record.

A

So now, when I save and publish that and open up a purchase, order, and I'm.

A

Gonna go and create a new purchase, order here and notice that there, there.

A

Is no clone button but if I say new,, let's just set this to be account. Aa, a.

A

New name like that, and then save that., you can see here. The clone button is now visible.

A

So tip 3, know how publishing works.

A

This is probably one of the most misunderstood topics around commanding.

A

People will publish, and then just simply constantly refresh the page until.

A

Something happens because they're not really sure when it gets published. What's.

A

Actually happening if you got the new version or the old version of your button.

A

Now, of course, the simplest way is to go into your button and set a tool tip.

A

So, like version one or version two.

A

and every time you make a change, you can go and check , that tool tip as I been updated.. But when I make a change,, let's go and change the formula.

A

So let's go and say, purchase order, copied and I will save and publish.

A

Now, if I play this record,, what happens now is that I will get notified.

A

When the new version is available, because what's happening is behind.

A

The scenes that component library is being packaged up and compiled into.

A

Javascript to run in the browser., so you can see now that, that has now given us that message that a.

A

New version of the app is available. and you can see that I didn't have to click refresh,. I didn't have.

A

To constantly, constantly refresh., it tells me when it's available and,, and so that means now when I.

A

Refresh this,, it will be available to me when I click this button.

A

So if I open up this existing record, and click clone.

A

It will now give me the, the new record.

A

and when I run that model driven app command bar editor,, when I click play,.

A

What I also get is this little command bar checker, command, checker option.

A

On the,, on the right hand, side, here., and so, if I select that,, what this gives me is this command checker,, which I.

A

Can sort of look at all the different commands that are available ., those that.

A

Are hidden and those that are currently available, and if I select my clone.

A

Option here and I come over to command properties,. What I get here is this little.

A

Expression function, piece of information.

A

and it tells me the library, that's using.. What's interesting is down at the bottom here,. It gives me this compiled.

A

Script, area,- and this is very, very interesting, because this is the java.

A

Script, that is actually been compiled.

A

And if you wanted to,, you could go and look at this command,.

A

This compiled javascript.

A

I,, if I press, f 12 and I go into my sources and I go to open file and I put in.

A

That javascript and then pretty print it..

A

I can come down here and I can see the javascript that actually.

A

Was compiled of my power fx.?

A

Interestingly enough,, I can also see the raw power fx.

A

It's just there for sort of reference purposes., it's not parsed at design time, and if I wanted to,, I could actually go and check.

A

That it does have the latest version of my script. If I really wanted to.

A

Effectively,, if you just wait for that message to come up to say, a new.

A

Available and just simply refresh,, you shouldn't have any problems. If there's.

A

An error during your,, the compilation.

A

It will tell you when you try and select that button, it'll say the component library is still publishing, or, or there was a, an.

A

Error in your in your expression, tip four., then, when you are updating multiple records in a grid,, it's very important.

A

To make sure that you can do it as fast as possible, cuz, the user may have.

A

Selected, a large number of records.

A

I've got two buttons here. update, slow. and update fast.. You can kind of guess what they do., but I'm just gonna show you.. So here we've got our update, slow functionality.

A

And this is what you might do if you were just going to do this.

A

Without thinking about, what's actually going on behind the scenes.

A

And what we're doing here is, we are doing a for all and iterating.

A

Over each of the rows, selected, so self-selected, all items.

A

And then what we're going to do is then we patch each of those items, each.

A

Of the items in the grid with a new quantity,, so we're just going to set the.

A

Quantity as a random between zero and 10., but what happens here is that it actually will iterate over all of the items and it.

A

Will update them, individually, and then it will refresh each time it performs an.

A

Update,, which ends up being quite slow..

A

So if we look at how that works,, if we just select a whole load of them, here,.

A

And if I click on update slow,, you can see that it,. What it's doing is it's sort of,.

A

There is a,, there's a flicker going on.

A

and it hasn't done it, and then it refreshes the grid..

A

So actually each of those flickers of the headers is actually a separate.

A

Request is happening in sequential form., so if you go over to the update fast,, it's very, very similar.

A

We've still got a patch of the purchase order, line, items.

A

However,, the patch is at the top level, rather than inside the for all.

A

And the reason is what's happening here is that we are passing a collection.

A

Of updated records to the patch rather than a single record at a time.

A

And what that means is, is that when we go into the grid.

A

And update a load of records., what will happen is if you click update, fast here,, you'll notice, that.

A

What will happen is it will just update them all in one batch, and then.

A

You see the,, the grid is refreshed., and that happens because all of those updates are happening in parallel and.

A

You can actually see that going on., so we go into the network tab here and we just simply clear.

A

This down and select a whole load., and then we simply,, if we say, update fast,, you can see they're all happening.

A

Almost parallel with each other., whereas if we close this and select a load of them, this time, and, and say,.

A

Update slow, you'll see that they are happening sort of much more sequentially.

A

So my last tip for this video, tip number five, is a topic that generally people.

A

Don't like dealing with,, myself, included,, which is error handling, and so what we've.

A

Got here is a script, which is going to update the quantity of line items, and.

A

It's going to set an amount to be a random quantity between minus one and 10.

A

Now,, because the quantity can only be zero or higher, anytime,.

A

It tries to set a quantity to be minus one,. That's gonna, fail.

A

We're using a very similar technique where we're doing a patch of the purchase order, line items. and we've got the for all inside that patch to patch the collection.

A

But what we're doing is. We are also going to embed it inside this. If error function.

A

And what this, if error function, does is if this particular function causes.

A

An error to occur,, then it will return. The second piece of information.

A

So you can see here we're, we're returning information about the number.

A

Of rows, and also the first error, message.

A

But if,, if everything is fine,, it will return just the value. That's.

A

After this original patch here., so we've got zero errors and the message is nothing., so what we're doing is we are storing that in a with block here.

A

So we're storing this in a temporary variable.. If you remember in the first tip,, we had a temporary variable to.

A

Kind of get around this issue. the fact that we couldn't use context or set., so this result now can then be used after that in a notify. Statement.

A

So we can say, okay, how many errors have we got in our error? Result.

A

And also if the errors are greater than zero,, then we will show.

A

The error icon, rather than just the standard information icon.

A

So, let's see that in action. here we have a set of items., I'm just gonna, select them all and click update quantity,, and it gives me the confirm..

A

What we can see here is it's giving me updated five out of eight, because some.

A

Of them, it tried to update to be less than zero,, and it's also giving us the.

A

First error: in that errors, collection.

A

So there you have it.. I hope you found that interesting and useful.

A

The, the cool thing about power fx is that the number of lines of code you're.

A

Writing is so much lower than you, than what you have have to do with javascript.

A

And I'm really excited to be teaming up with microsoft, canada, on their.

A

Developer digital meetup tour talking about something quite similar,, which is.

A

On how you can use the power platform, low code techniques, to make your.

A

Development of applications much quicker and augment your more traditional.

A

Software development techniques.

A

it's on april, the 25th from 1:00 pm to 2:00 pm eastern time, and you can catch it.

A

Live um, or it'll be on demand later on.

A

And if you'd like, like to learn more,, there's a link in the description below.

A

Actually,, I will be doing some live q&a as well,, and you can ask.

A

Me, whatever question you like., I may not be able to answer it,, in which case I'll probably say I'll.

A

Get back to you on that,, but it would be really great to see you there.

A

But until next time, friends,, thanks for watching.

A