Microsoft 365 Community Community Demos, 21 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: UX Tips & Tricks for Model-Driven Power Apps

Description

In this 11-minute citizen developer-focused demo, Chris Piasecki shares ideas on exposing capabilities hidden away in class or user experience. As classic Power Apps capabilities are making their way to modern Power Apps and Power Apps Designer, here are five configuration tips you can implement today to improve user experience in your model-driven apps. Better user experience meaning – user is not overwhelmed with irrelevant information or UI, or the user can make add/edit information in context rather than exiting app to make updates. This PnP Community demo is taken from the Microsoft Power Platform community call – September 2022, recorded on September 21, 2022.

Demo Presenter
• Chris Piasecki (CGI)

Supporting materials
• Documentation - Unified and modern Power Apps designer | Unified and modern Power Apps designer - Power Platform Release Plan | Microsoft
• Article - Introducing the Modern App Designer (Preview) | https://powerapps.microsoft.com/blog/introducing-the-modern-app-designer-preview/

Stay connected
• Twitter https://twitter.com/microsoft365dev
• Call attention to your great work by using #PowerAppsCC and #PnPWeekly on Twitter.

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community Blog - https://aka.ms/m365pnp/blog
• Microsoft 365 Platform Community - https://aka.ms/m365/community

A

A

Here in Orlando and good morning and or good evening for those online where we may be made, my name is I'm a Microsoft MVP from Edmonton a city in Canada.

A

In case you may not have noticed by my attire that I'm Canadian I'm, currently a Power Platform architect and Senior control, Consulting working at CGI, and so for my demo today, I'm just going to be giving you some short, quick, rapid fire tips that will help improve the user experience in Bottle, driven apps I'll find that some of these tips are not obvious to new makers, because a lot of the options are still kind of Hidden Away in the class, your user experience and it's hard to kind of get to them.

A

So I hope that at least some of these tips are useful to some of you out there, and you may learn something so with that: we'll go ahead and jump into the demo.

A

So when it comes to lookup controls on model driven forms, one default Behavior you may notice is that when you click into the lookup control, you actually will see a list of recently viewed records from that lookup table.

A

Now, a lot of users will find this distracting or confusing, because it has nothing to do with the record they want to search for um so that brings us to the first tip I have, for you is how we can actually go and disable the recently used items to do this. We simply to just hop over to the modern form designer we need to just find. Our lookup control in this case is the primary context, we'll go ahead and select it and we'll have an option on the side here to Simply disable recently used items.

A

So we just need to check that box and then we'll go ahead and publish our form, we'll hop back over to our model, driven app and refresh the page, and now, when you actually go ahead and click in the lookup control you'll see that those recently viewed items are no longer there, so you can now freely search for the record.

A

You want without those items distracting it now, when it comes to working with related data model, driven form, you'll notice that every form by default you'll get this related tab, and this allows you to view related records from any one to many or many to many relationships.

A

Now, however, it, if you have a lot of relationships, this list can become quite large and quite cluttered and distracting, and some of them might not be really relevant to the users, so the second tip I have for you is how we can actually go ahead and pick and choose items that we want to make related items tab.

A

So to do that, we're going to have to switch back over to our form designer, but the problem is we're not able to change this from the modern form designer. So we actually switch over to the classic experience to change this configuration and so we're going to go ahead and click the Switch to Classic, which will open a new tab and so across the top ribbon. We have this navigation. We just simply need to select that which will allow you to modify this common tab.

A

You see, on the left hand side which will show all items in the related tab. You see on the model driven form, so if you actually call it back UT into related, but it's also called common. So that's why that's called that. So we just simply can select the item that we want to remove in this case. We'll choose the social profiles, so we just select it.

A

We just need to click the remove button on the top of the ribbon, and then we just really simply need to save and publish the form, we'll hop back over to our model, driven app and then refresh the page.

A

Come on you can do there, we go and now you'll notice that the social profiles table is no longer showing in the related tab, so that was uh tip number two nice and easy now the third tip I have for. You is related to the second one in that sometimes users may just not want to see the related tab whatsoever. The good news is this is also very easy to turn off and to do that.

A

We're going to also need to once again jump back over to the classic experience, because this is not available in the modern form designer and so we're going to hop back over to the classic experience.

A

And then we're just going to select the form properties across the top ribbon, we'll hop over to the display Tab and then underneath there'll be a section on your navigation. Basically, they uncheck the show related items and you just simply- and you save and publish the form and once again we'll refresh the page in our model driven app and just like that.

A

You'll no longer see the related tab showing up so that was tip number three now jumping back to lookup, so one another default behavior that you may notice is that when you actually select a the lookup record, it'll actually navigate you away from your current form. What you're doing losing your current context, which can be quite unproductive, similar Behavior if you want to create a new record from a lookup control. Is that there'll be two behaviors?

A

If you happen to have quick, create enabled for that table, it'll open up into a quick, create form and a side dialog you see here, but if you don't have quick crate, enabled it'll actually open up and navigate you away to a new form once again losing that current context providing an unproductive user experience, which is not great for your users. Well, the good news is. We can actually do some simple configurations to actually open up a dialog rather than adding it gaining away.

A

So to do that, we can do this config um designer, so we'll click back over to our lookup control and just below the disable, where you recently used items that we put in tip number one. We have these two new options and one is um use Main form dialog for creating and use main form dialog for editing, so we can enable one or both of these options by simply just togging those and then just publishing the form and then we'll hop back over to our model, driven app and refresh the page. Once again,.

A

And now, when we actually go into create a new record from a lookup control, you'll see now that, instead of navigating away, you'll actually be presented with the main form dialog for that. For that record, where you can go ahead and create the record without losing your context, similar Behavior, if you now go ahead and select to add it as an existing record, it'll, also open that up in a main form dialog, you can use the fields field and see the full details of the record. So again, it's much more productive user experience.

A

If you haven't lost that current context, cancel that just tip number four. So this brings us to our fifth and final tip I have for you today, and a lot of you may be already familiar with this feature, but I think it's such a nice feature that it's worth special mentioning so for the longest time we've been able to Define what are called quick few forms that allows us to view related information from a lookup directly on the form.

A

However, a big limitation of this is that the fields have only been able to be read only so if you want to go and modify that data, you have to again navigate away to that related record to modify the details.

A

The great news is now pretty recently, there was added a feature called a form component control which allows you to embed a main form from a lookup table directly inside of the main form, and assuming you have the correct privileges to edit the record. You can actually edit those related details in line in the form without having to navigate away.

A

So in order to demonstrate that I've created a simple main form: dialogue similar to the quick view that just has a couple of attributes, the email and the phone tab and then what to to actually use the form component control we're going to have to flip over to the classic form. Designer experience once again to configure this so we'll go ahead and do that and so we're going to just add another instance of the primary contact, the lookup field.

A

So we're just going to check the um you know view only um unused items we'll find primary contact and drag that onto the form.

A

Then we just simply need to double click, to open up the properties of that lookup, don't know, and from and from there. We just need to go into the controls. Tab, add a control and there'll be a form component control that you see we'll select the um render in the web navigation, and then we also just need to Simply provide a value for the forms property and when we need to provide is actually just a little bit of an XML, Snippets and I'll kind of briefly show what that looks like.

A

So you can see here that two pieces of information that you'll need to modify there's the entity name, which will you have to provide the schema name of the table from the lookup that you want to modify and the second piece of information is you need the identifier of the the main form dialogue that you want to embed in the control and you can retrieve the identifier of the form through the URL of the modern designer.

A

As you can see here, kind of after the entity name, you can see kind of form, edits and grab that unique identifier. So you just pop that in we'll hit OK and then we're going to go ahead and save and publish the form once more and we'll hop back over to our model driven app and refresh the page.

A

A

We now have the embedded Mains form control and, as you can see, we can actually now edit these fields directly and when you go in ahead and save the form, it'll save the changes from not only the main record, but also to a save from the related record as well, and so just like that, you can now much more easily work with related data on your model, driven forms, and so with that being said, I'm just going to wrap it up. For me, I hope you find at least a couple of these tips.

A

Useful and yeah, as I mentioned, feel free to connect with me. If you want to chat further all right thanks, everyone.