Microsoft 365 Community Community Demos, 17 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Low code tips for fields in Power Pages

Description

In this 20-minute citizen developer-focused demo, Elaiza Benitez shares tips for using Power Automate to streamline repetitive tasks on Power Pages including formatting the site date and time (create new site setting), making a lookup column appear as a dropdown (Basic Forms), prepopulating a field (Form Metadata), formatting a phone number field using Regex (Form Metadata with validation and message), adding helper text (Form Metadata – Description/Instructions) and more.

This PnP Community demo is taken from the Microsoft Power Platform community call – May 2023, recorded on May 17, 2023

Demo Presenter
• Elaiza Benitez

Community Call Conversation
• aka.ms/May17-Demo3

Supporting materials
• Tool - Regex Generator | https://codepal.ai/regex-generator
• Training – Power Pages Training (on-line course) | https://www.engineeredcode.com/microsoft-power-pages
• YouTube channel - Elaiza Benitez | https://www.youtube.com/@ElaizaBenitez
• Blog - Benitez Here. | https://benitezhere.blogspot.com
• Podcast - Power Platform Boost Podcast | https://powerplatformboost.buzzsprout.com/

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/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
• Microsoft 365 Platform Community Blog - https://aka.ms/community/blog

A

Foreign I am based in New, Zealand and fun fact. When you look at the power automate home landing page, if you scroll all the way down, you're going to see me so there's me I'm on the parent automate um home page. So that's pretty cool. um So just a little bit about me, I live in the capital city of New Zealand I first started out with Dynamic Sierra version four, so it's now named as Dynamics 365. So this is way back in the day and fast forward to today.

A

I have picked up so much love for the water stack and I'm, pretty much well known for power automate, but before power, automate I also fell in love with what was that called adx Studio portals, which is now power pages, and this is what I'm going to talk about today, I'm going to share some local tips for Fields a pair of pages. Now, if you have any questions, I can't really see the chat right now so David or Hugo or even Charles.

A

You might need to help me out and let me know if there's any questions in the chat afterwards. Okay, so in terms of the agenda, this is what I'm going to go through with you all today, so the first one is how to format the date and time for your fields and pair of pages. So a typical use case for this is, if you are based somewhere outside of the USA. So for me, I'm, based in New Zealand, our date format is different, so I want to just play it differently on the portal.

A

The second one is: did you know that you could make a dataverse, lookup column appears drop down, what you're about to find out and then for number three I'm going to show you how to pre-populate fields and power. Pages I've got two tips there for you and then I'm going to show you how to format a phone number field using regex. So that's going to be really cool and then I'll talk about health and text.

A

If we have enough time, then I'll show you how to change the label for a button and without any code, so you don't need to use JavaScript. This is all inbuilt within power pages. Okay, so let's jump into it. I'm going to head over to my browser here on in the portal management or driven app. So this is where you could do a lot of your configuration outside of the design studio of pair of pages. So for the purpose of this call, I just have a simple web page set up here.

A

So in this webpage, I've got a list display and this list will allow you to create a new row in dataverse, so I've just created a application table with just some Fields just through the demo. uh Note that this para Pages site is not externally. Public I haven't made that available yet so this is all just inside within the confinements of parent pages, okay, so the first one that I wanted to talk about was in regards to the date and time.

A

So what I mean by that from what I said earlier, Nicole by default, the language um for power pages will be set to English us. So that means that the date and time Fields will always appear as m d y y. In other words, it will start with month and then I'll follow followed by the date and then followed by the year. But if you live outside of the USA such as me, I live in New Zealand. um Our date format is different. It it goes by date month year.

A

So how do we go ahead and change that for our overall site and parent pages, so the trick to doing that is you create a site settings record and in here is where you can Define what that date time format will be so I'm going to create a new site, setting record I'm going to call this date time date, format and I'll select my para Pages site and then the value that I'm going to put in here is mm, slash, YY and then I'm going to click save and close.

A

So this will now create that new site setting and because I've created a new or well para Pages configuration record I'm, going to clear the cache and then once that has been cleared I'm going to refresh my pair of pages page and I'll. Show you what it now looks like so now when I create the button and as you can see, that date of birth date and time field has now been updated to show the format that I had entered in the excite setting.

A

So now, if I pick a date, um will now correctly show, as date month and year. So that's the first tip. So the second tip is to do with changing a lookup to a drop down, so I have a city, uh lookup, column and database. So this is just showing me the major cities in New Zealand. So as of right now it's showing as a lookup, you can search for it. You can select it and then it'll get added to the field. But what?

A

If you want to show that as a drop down to the end user, you don't want to go and change all of that and dataverse in backend. You can simply do it in the front end for parent ages and again to do that.

A

We are going to head over to the portal management app and I'm, going to go to basic forms and I'm going to open up the basic form that represents the create form that you see that pops up so I'm going to click on edit and what I'm going to do is I'm going to add what we call basic form metadata and here's where I can change that functionality so, instead of having it appear as a job lookup we're going to make it appear at the drop down.

A

So in here for the type I select attribute and in here I select the control style as render lookup as drop down and then in the next field that you see down below is the attribute logical name. So this will now show me all of the fields that are added to that basic form. So if you don't see a field uninformed, it's because you haven't added it to your form. So that's another tip there for you.

A

So now, I'm going to select City and I'm gonna again hit, save and close, so we'll go back and communication is because I've created a new configuration record for the metadata for the basic form. So now, if I hit the refresh button and we'll repeat those steps, I click on create.

A

We can now see that the lookup is rendered as a drop down C. So just give a bunch of clicks, no code. I can get it looking as a drop down cool, so the next one that I'm going to go through is pre-populating a field. So in here um we've got an email address field and as the sign-in user it gets my profile account I have it in the email address. So what if I want to pre-populate this field? Can I do that without code?

A

Yes, you can same thing, go to your portal management model, driven app and in your basic form for that form that you want to pre-populate data with. You want to create new uh metadata again so I'm going to click on that new basic form, metadata I'm, going to select attribute this time, I'm going to select email address. So now, when I scroll down, we keep going.

A

There is a section here called pre-populate field, so what I'm going to do is I'm going to select current portal user as a type and then in here it's going to show me all of the fields that are associated to the contact table and all I need to do is find that email address field. So, if I go and select um the email field and I hit, save and close and we'll repeat those steps, it'll clear the cache and then I'll refresh this.

A

I'll click on create.

A

There you go so a pre-populated, the email address field.

A

um What I'm going to do next is I'm going to show I'm going to hit submit because there's one other tip that I want to show that comes up very frequently with pair of pages FAQs, so I've created my application now, if I go back to the actual model driven app, that shows me the applications and if I hit refresh you'll notice, that the content field is blank. So how do we go about that? Do the populating it with this time around instead of creating your basic or metadata, then you can't do it.

A

It will work. What you want to do is head over to the additional settings. Tab and in here is where you're going to see several Fields, oh and removed interesting, and then we come across it before um anyways, Ricky skull town, we'll see a section called associate. Current total user on insert and in here is where you want to check this tick box and in the drop down field you want to select um the look up column that will reflect that sign-in user. So in my scenario, it is this contact, lookup, column field.

A

So now, if I hit, save and close.

A

And I'll clear the cache quiche. However, you want to say it and then I'll hit the refresh button, and so now, if I click on Create and if I now hit submit.

A

I'm gonna go back here.

A

It will now automatically populate that lookup field behind the scenes because of those changes that I made to the additional settings tab of the form, okay, so down to the last two tips, which is applying regex to a phone number field.

A

So again, um we could do this out of the box by creating metadata, so I'm going to go to the basic formatted data form, I'll, click on add new basic form, metadata also like attribute, and then in this view of the attribute logical name, I'll select the font number field and if we scroll all the way down, there is an area where you can provide some validation, and in here is where you have the option to enter some regex I'm, just going to go ahead and copy one that I prepared with Notepad.

A

Just here's my mouse. So here we go so I'll just go and paste that in there and I'll explain it in a bit and then I could also provide a warning message as well. This is so that when a user tries to submit a phone number that doesn't meet what you've defined in here, it'll throw that message so I'll just paste it in there.

A

So, basically, what this regex is saying is that it needs to start with plus six four or zero and then the second lot of numbers need to either start with two or eight, and then the digits need to be between seven and nine, and the dollar character represents the end of the string value and then, with my validation message.

A

I can enter here so I'm going to hit, save and close and I'm going to go back to portals uh services and create a case, your cache and then I'll go back to my power Pages site, I'll, refresh it and then I'll hit the create button.

A

uh So now, if I don't start with class six four, so let's say I start with five: six: seven, eight zero and I also don't eat the number of digits. If I try to hit submit it's going to show and throw that validation, error message and if I click on that, it's going to take me to the field. So this is, if I had a long list of fields on the web form if I click on this hyperlink it'll take me directly to the field.

A

So now, if I follow the format, that's been specified or just do. This I should now be able to submit, and it's allowed me to submit because I've conformed to the requirements or what I've defined and just another tip. If you don't know how to create regex Expressions I did a quick check to see you know what AI tools are available out there and so I found this. So if there's something that you're trying to validate- and you want to create it as a regular expression, um get this website a go, not sponsored at all.

A

I just tried it out myself and I put it into pair of pages, and it worked. So there you go um okay, so then the last tip that I want to talk about is Hell protects so helper text. I didn't know this by the way I really found out about this years ago, when I was looking into this helper text is the the um the bit of a text that appears on fields on websites or or web forms, and they help educate the end user.

A

What it is that they need to do with this field, so sticking with the phone number. um That's what I'm going to show you next so I'm going to go back to the basic, warm meditative field and I'll just edit this and then, if I, scroll down through the Section on here called description instructions. So what you want to do is you want to change a description from node ES and in here it allows you to position the helper text.

A

You can either have it above the field below the field or above the label, so I'm going to have it as below the field, and in here you have the option to use the description that you've entered for the column or field in dataverse when you created that field in the first place, so I'm select. No because I want to customize it a little bit again. This is not using any code.

A

This is low code, so in here what I can do is I can let's say, add this piece of text so I'm just going to paste this into here and I'm, going to hit save and I'm going to clear the cache cash me outside. Does anyone know about that?

A

um Okay, I'm going to hit create and, as you can see, we have that helper text appearing. um So that's pretty cool. That's done for that local! So I'm, going to show you a few more cool tips in case you don't know so this time, I'll change it to above the field. So what you could do is you could actually um include html text. So what I need is, uh if I, just copy and paste this one here from a notepad in here, I've got the hyperlink, HTML tag.

A

So what's going to happen now is when I hit save and when we go and view that updated configuration in the portal we're now going to see a hyperlink so that an end user could click on that. So this is typically used when you have something like terms and conditions, or you know, read the fine print here. This is something that you can do as well, and you have your text. Well, what wallet did it work?

A

Okay, we're turning my demo. So why does that not work? Okay, I'm, not sure, but normally it does. uh But what would happen is that it would show it uh and it would load. So then, if we go back here, um other things that each can do is change the color. So if I go ahead and just grab, this is paste it in here. So in here, I can use some more HTML tags in here, I'm defining what the color should be of the font.

A

This is if I want to use it outside of the CSS of the parapagious site. I can also put in italics as well, so if I hit, save and we'll go and refresh the pair of pages site and I'll hit refresh and now, if I click and create, we should see it as green and in italics um yeah. So then, the other thing that you can do is you can also use hex colors as well.

A

So what I showed you earlier was that I just simply uh defined the color by its name, but if I used a hex color as well, that will work so I'll hit, save and close oops. Sorry I forgot to remove a character in there one. Second, let me just remove it.

A

And we refresh and I'll refresh my web page and then it should now appear as gray, which is so. Those are my low code. Totes I have one more slide that I'm just going to go back to um so here it is so one thing that you can do um if you want to.

A

You know, get up skilled and learn about pair of pages and something that's helped me greatly in terms of doing a refresher, because I've stepped away from work in the last few months because, as David said, I've had a baby so, and here is where you can find a link to Nicholas hayduk's para Pages training course. So Nicholas Hayek is another Microsoft MVP based in Canada. He started with the actual company, adx Studio portals. So he really knows what he's talking about.

A

If you don't want to do the training course, there are other materials that you can find online, such as YouTube or podcasts.

A

um If you guys are familiar with Nick Doman and Ulrich I won't pronounce her last day because I don't know how to pronounce it. I don't want to get it wrong. They both have a new podcast called I, believe it's called the para platform boost podcast if I've got them that wrong to fix in the call. I am sorry and if you want to connect with me, here's where you can find me I have my own YouTube channel and I also have a Blog.

A

um So thank you very much for having me in this month's Power, Platform, qbd call and I hope you all enjoyed my Loco tips, and uh you can hear me correctly because I am talking very quietly right now, because when you want to you, don't want to wake a baby trust me. You do that or to wake a sleeping baby.

B

Absolutely thank you. Eliza I, I kind of was thinking like you need your own theme song now like it's 3am and my demo is awesome right. We get Matchbox 20 to to review that, for us, maybe I, don't know we can see I'll make a call.

A

It's funny that you mentioned Matchbox Twenty because they actually are coming to New Zealand next year. Awesome.

B

They are actually out here yet the Hollywood Bowl this week actually or next week, or something so yeah awesome. Well, thank you. I mean go, get some rest, you've earned it. If this is Eliza at 3am. Wow like uh you, must be even more amazing uh during regular during regular hours, so you've earned it. Please go get some sleep. Thank you for staying up and uh sharing or getting up early. Actually she didn't say we talked about this before I was like.

B

Please tell me, you're not staying up all night to come to this, so she got up early. So thank you, foreign.