Microsoft 365 Community Community Demos, 25 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: General Availability of Power Pages - Getting started

Description

In this 18-minute developer/maker focused demo, Hugo Bernier steps viewers through the ease of extending the reach of the Power Platform outside the organization via a data connected website that is publicly accessible, either anonymous or authenticated. Step through a host of features in the reimagined Design Studio (Pages, Styling, Data and Setup workspaces) delivering a WYSIWYG experience for Makers. IT Pros will appreciate the go live checklist and pro developers the ability to edit/customize in Microsoft Visual Studio. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on October 25, 2022.

Demo Presenter
• Hugo Bernier (Microsoft) | @bernierh

Supporting materials
• Demo - Power Pages General Availability – Hugo Bernier (Microsoft) | @bernierh | https://youtu.be/MqAmuF8yA48?t=2646
• Blog - Microsoft Power Pages Now in General Availability! | https://powerusers.microsoft.com/t5/Power-Apps-Community-Blog/Microsoft-Power-Pages-Now-in-General-Availability/ba-p/1814780
• Article - Microsoft Power Pages is now generally available | https://powerpages.microsoft.com/blog/microsoft-power-pages-is-now-generally-available/
• Licensing - Power Pages available to purchase on November 1 | https://www.microsoft.com/licensing/news/power_pages_general_availability
• Documentation - Plan and prepare for Power Pages in 2022 release wave 2 | https://learn.microsoft.com/power-platform-release-plan/2022wave2/power-pages/
• Documentation - What is Power Pages? | https://learn.microsoft.com/power-pages/introduction
• Animations – animista | https://animista.net
• Documentation - Overview of Progressive Web Apps (PWAs) | https://learn.microsoft.com/microsoft-edge/progressive-web-apps-chromium/

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 - http://aka.ms/m365/community

A

Foreign, my name is Hugo Bernier I'm, a principal program manager in the Dynamics 365 and Power Platform Community success team, so I'm, not a sales guy I'm, not a marketing guy I'm here to make sure that people are successful. People in the community are successful with using our products and today I'm super excited to talk about power Pages because it became generally available just recently. So let's talk about what power pages is before.

A

If you wanted to build an app in the Power Platform, you pretty much had access to powerapps, but really powerapps was intended for internal employees right and you could build canvas apps or model apps. But if you wanted to extend the reach of your Power Platform, you wanted to start working with your citizens and your customers and things like that. The only thing that you had really available at your disposal was powerapps portals, but let's face it. Perhaps bottles was super.

A

Powerful I mean it's been around for a very long time, but it was not necessarily a uh maker platform. It was not necessarily low code friendly right and that's really where power Pages comes in, so announcing uh Power Pages, it's generally available, as of October 10th I, believe we announced it on the 12th uh during uh ignite. So far pages is really the low code data Centric, Business website development, and why am I saying all these words with hyphens in them?

A

It's because you know we used to have SharePoint where we could build websites and I loved it, and you know I'll miss them forever, um but we never really had a platform where we could build websites easily, that were data rich and what I mean by that is, if you're trying to just build the website like hello world- and you know, here's my company logo and here's our brochure I, wouldn't recommend using power Pages for that. That's really not what it's designed to do.

A

There's lots of other way, cooler and way easier, Technologies uh that allows you to do that. But when you start looking at connecting your data right connecting to your dataverse data that you have and we'll talk about other types of data, that's really when power Pages comes in because you can actually connect all your Power Platform cool stuff like the power Pages power apps, you know power virtual agent, power, automate and power bi.

A

You can connect all these things with dataverse and all the connectors behind the scenes, uh and then you know expose that to a website that can be publicly accessible and it could be made Anonymous or authenticated. So where would you use these kinds of things right? I just said: don't don't you know use power pages to build brochures.

A

um You know. Let's say you want to do your government agency and you wanted to build Citizen Services. That's a great way to do that. So, instead of forcing people to download PDFs and print them and Skip them, you can actually have them fill the data and it goes directly in dataverse right where you can now. You know internally, your employees can use powerapps model driven apps or canvas apps to actually manage these. These applications, so application processing, obviously is a is a great use of that any kind of registration right.

A

You know, or licensing type of things, professional organizations or sros, self-regulating organizations like the accountants and the electricians and all these organizations where you have to come in and provide information. So you can get a piece of paper that says you're allowed to continue doing your business I have frequently asked questions and partner portals my favorite right. The ability to empower your partners, your vendors, your suppliers, to come in and work with you directly now. I've said that power pages is designed for the makers right, but I should really be um cautious right.

A

The the power of power pages is that it is really designed around empowering Fusion teams, so we're talking about the whole family here the makers who maybe understand their business best right better than anybody else, and you know they send the content. They want and understand what the forms need to look like, and then we have the pro developers, who maybe are experts in HTML CSS JavaScript, and they want to make things. You know a bit cooler and more animated and and more cool looking and the uh it Pros who maybe want to get.

A

You know: custom, DNS and certificates, and things like that. This whole team needs to come together right to make sure that we are building sites that are secure and that are you know beautiful, but that are connected easily.

A

So what are some of the features? Because power Pages was available in public preview before October 10th, but we've added some new cool things, and let me show you some of the cool things we've added.

A

The first thing is what we call a reimagined design studio, and so this is something that allows you to have a really. What you see is what you get experience for, editing your pages, and that would really be more for the makers who just want to build content. They want to connect the data, they want to build forms, and things like that. So let me show you how that works.

A

So the first thing you would do is when you have graded your site. You would go to this area right here.

A

Let me highlight that, and so that's where you can see navigation and that's where you can do things like add pages and move pages, and when you add pages now you have the ability to pick from pre-defined templates, but you could also use custom layouts if you wanted to and as soon as I do that it adds the page and it creates the layout that I want.

A

But then it creates placeholder content that I can go in and start editing that content so once I'm in a page, I can actually go create sections and as I move Mouse over sections, uh it'll actually give me the option to add new sections, and let me see if I can highlight this button. There you go so when you add sections you can see the types of sections we have now for those of you who are using SharePoint pages that might look familiar right and we're really going and trying to go in a similar fashion.

A

Here, where you can create sections in your page and then you know once I add a section, let's just add a section quickly,.

A

All right, let's add a section when I add a section instead of having a list of web parts, that I would get in SharePoint I have a list of components that I can add from Power pages, so I have components like text, buttons, images, videos, Power, bi forms, multi-step forms lists and and so on, and in fact, there's little three dots there. You can see right here if I click on that I see now. I only have two options, but you know anybody.

A

That's familiar with these types of technologies will probably imagine that hey, eventually, there's going to be a lot more components that are going to show up there all right. So once I've added this section and I've added components, I can actually just go edit the components and see what they look like, but instead of watching me, you know boring to watch me edit, some sections. Let me show you an example of the. What you see is what you get experience right, so this is a form that I've created.

A

This is a list that that comes with one of the templates and I can just edit that list directly.

A

Let's show you another example.

A

So now, when I'm, looking at the navigation elements, so the pages in this case I have page settings right and page settings are things that would allow me to control the URL. You know and things of that, but the new cool thing is that I can now control who can see each page, so I can decide whether someone needs to be authenticated, whether they need to be an administrator or you'll see.

A

uh You know, I have like a C1 ASP, that's a custom role that I've created that I can assign to people, and then only those people will be able to see that page and that's a really cool way to differentiate between what people can see and cannot see easily.

A

um The other thing that I can do is I can go to The Styling, guide, workspace and The Styling workspace I've covered it in in previous calls and previous demos. So you can still go edit, the fonts you can edit the colors font sizes and things like that. But one of the cool things that we can do now is I can actually go manage my CSS and, more importantly, I, can upload custom CSS. So you will see that I have right now.

A

The upload button I can just go click and if I had a CSS for my Corporation, you know and the cool thing is power. Pages use uses bootstrap, so I can actually use bootstrap definitions and color definitions to quickly make my site look like it belongs to my Corporation and some of you might say.

A

Oh you know I'd really like to go crazy and edit the CSS, and you know, customize everything you can but think about the audience that we're aiming for here right we're trying to build professional websites that extend your the reach of your organization, we're not trying to create like a pretty site with flowers and stuff that you can, if you want to, if that's your brand, but we're really trying to kind of maintain your corporate identity all right and then with the styling workspace.

A

We also have the data workspace, and so the data workspace is really what allows you to decide. What data you want to show in your site- and so you can see here- I have some some tables. I can pick pretty much every table in the dataverse or I can connect to tables. But this is the important thing.

A

Is it connects to your dataverse environment and makes it possible for you to show the data now there are permissions and we want to make sure that the only way that people can see this data is that they are given permissions. So don't think that now because I've connected this to my dataverse environment, everybody can see every table and every row.

A

um The one thing, though, that I should point out and I know I'm going really fast, because there's so much stuff I want to talk about. But one thing we should make sure that you know is that dataverse allows you to connect to Virtual tables right, so external data. So, let's just say, I have a friend that happens to have a SharePoint list right. That is the system of record for I. Don't know my list of offices that I have or a list of you know, I know different regions or anything like that.

A

A list that's maintained, one place in SharePoint and I want to actually connect that list to my dataverse data and I want to make it available through Power Pages. You can do that using virtual tables all right. The uh once I've selected kind of my tables and I want to go set up. My permissions now here in the uh the admin workspace or the setup workspace I can do things like uh decide. For example, things like do I want to have external CDN. Do I want to have a custom, DNS or different things like that?

A

I can also control the visibility of the site and the authentication right so, and one of my favorite features now is kind of the site checklist. Basically, my go live checklist, so I can actually go through every step that I need to go through to get ready to go live, and this is something the NIT administrator would love as it's time to get ready to go live the authentication that I talked about here.

A

I can actually control whether the site is going to be anonymous or authenticated, and what kind of authentication mechanism I want to use and then once I've done, that I can control the permissions. So I can say here what I'm able to do with every table that I've decided to expose through Power pages and I can control things like who can read, write, create delete, append a pen to and I can even assign it to different roles in my organization and of course you can create different permissions to different roles and the site. Visibility right.

A

Don't think that, just because we're allowing makers to build a website that automatically is going to be a publicly available website, we do have the ability to create private or uh public or set the site to be private or public and share that site with other people. So if I want to collaborate with them as we're getting ready to go, live and I want them to test it, I can do that as well.

A

So again, this is a really quick way to securely get your site going, but wait. If you order now, you can also connect to your flows and you can do all the portal management stuff, but you can create what you see here is Progressive web applications right, so I can actually create an app that will be deployed on your mobile devices.

A

That represents your power Pages website and you may say: well, what's a pwa like uh you've, probably used it if you use Twitter and uh trying to remember of all the ones, I have a list here on my previous slide hold on Twitter Uber Spotify, Starbucks, Pinterest, yum, Lee, AliExpress Alibaba. Those are all pwa websites that are exposed as applications, and so that's one of the cool things you can do all right. So so far, we've talked about the professional.

A

Are the makers and we've made an experience, for um you, know professional developers, but I just wanted to wrap up here by saying we have kind of the ability to create multi-step forms, and it's very easy to do, but there's also something else that the Geeks in the house would be interested in, and this thing is and I mean that in the nicest way, by the way, calling everybody geek one last thing I want to show you is I can actually go to my page that I'm editing and maybe I'm a professional developer and I want to add some cool stuff.

A

So, yes, I can preview my site, but you'll see here the site that I have it's. It looks cool, but it doesn't have cool animations that I, like I, don't want I'd like to have other hover effects, and things like that. Well, I can actually now go to. Let's say a website like animista, which is a site that I like to use. I can find animations that I want, but you could pick animations from wherever you want. You could copy the animation and then you could so here's animista.

A

You could copy the animation and then you can go get the CSS and the CSS keyframes, for example, I'll show you an example of that just going to get the animation and then I'm going to go paste that in my page and show you the cool experience, alright, so copy come on, find an animation Chris, because I'm trying to rush now, it's trying to slow me down all right. So I've got my animation. uh Css I will go to the page, but you'll notice in the upper right corner right here.

A

I have edit code, and this is the cool Visual Studio code icon and if I click on that, it actually allows me to open this page in Visual Studio code and edit it on the Fly using all the beautiful features that we love uh from Visual Studio code, so syntax highlighting Auto completion uh and cool things like that. So C here. For that page I have my HTML, my CSS, my JavaScript and I can actually go into the individual elements to copy and paste or to edit some stuff so quickly.

A

Here I can look at the HTML and I know that the HTML is writing a card and I see the JavaScript that is driving that page. That was automatically created for me by the template. But if I go to the CSS here, I can actually paste the CSS that I found from panamista and I'll paste the keyframe and then I'll show you what it is. What it looks like and I will be done so here. Let me rename this to card hover, because I want to be able to have a hover effect.

A

That's hard to say, have a hover effect over my card copy paste, the keyframes for my CSS and that's obviously something that a pro developer would love to do not necessarily maker. When I save this I'll be able to now go back to my site, and then let's show you what it looks like when I go back to my site, Let's Go preview.

A

Yes, okay, there you go all right so now, if I preview, the page you'll notice that that same page now has and if I can Mouse over the page, there you go. It now has a very subtle Shadow effect that I copied and pasted with that subtle kind of movement that automatically got added. So there you go power, Pages allows the whole family right, the makers, the pro devs and the IT professionals to work together to build Rich data connected websites that connect your dataverse in a secure way.

A

I look forward to show more stuff later, but I look even more forward to see what cool stuff you're going to be able to put together. Thank you back to you, Vanessa excellent. Thank you Hugo on that one cool.