Microsoft 365 Community Community Demos, 19 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Power Pages General Availability

Description

In this 9-minute citizen developer-focused demo, Hugo Bernier delivers a whirlwind tour of the latest UI and functionality of Power Pages (low code website solution for fusion teams). Since the Preview release, there have been many updates including the reimagined design studio with 4 workspaces: Pages (wysiwyg previews, role-based permissions, add/edit pages/sections/components), Styling (themes, fonts, colors, custom CSS), Data (work in Dataverse from workspace), and Setup (add custom domain, CDN, go live checklist, progressive web applications). Conveniently edit page CSS, JavaScript and HTML in Visual Studio Code. This PnP Community demo is taken from the Microsoft Power Platform community call – October 2022, recorded on October 19, 2022.

Demo Presenter
• Hugo Bernier (Microsoft) | @bernierh

Supporting materials
• 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

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

Foreign, my name is Hugo and today I'd like to talk to you about power, Pages, General, availability right.

A

So so far, we've already talked about how, if you wanted to build apps in powerapps, you had to do internal apps using canvas and model apps, and if you wanted to do external websites, you only had access to powerapps portals, but what we have announced as of uh well I guess it was available on October 10th, but we announced it on October 12th is Microsoft, power pages is available, and so now you can actually build websites that are connected to your dataverse data and your Power Platform environment in general, and do some really really cool stuff right.

A

The one thing I just want to make sure that we are all clear is that power pages is really designed for the fusion team. The whole family right. This is not like, if you think about it, we're not trying to allow just anybody to randomly create a public website site that has access to your data.

A

That's not what we're trying to do we're trying to make it easy for you to connect your data and so there's a few things that are available here uh and we've covered some of these I'm going to try to focus on what's new. So we have that new fancy. uh You know editing Studio, which allows you to view the navigation and edit the navigation, and you can actually add pages from there. Once you add pages, um let's there you go, let's just add a page.

A

You know you can add a page and you can pick the template you want. You can pick custom templates as well, but once you've added the pages, then you'll have sections in your page and you can actually add various sections. uh So, let's just let me show you what I'm talking about here. So you can add sections to the page and the sections will allow you to control things like the layout right.

A

So how many columns do I want one two, three columns, one-third, two-thirds, uh spacer and stuff of that and then once I have a section created. So, let's just add one, then I can actually pick the bunch of components that are available to me. So I text buttons images things like that, uh but wait. If you order now, you also have the ability to select some additional stuff now, a little secret here, or maybe it's not a secret you'll, see. There's like the three dots on the right there right there.

A

Where is it come on right there, so that actually gives you some extra features and you can see there's lots of room there for more stuff, so uh keep an eye out for new stuff to come, but one of the cool things that's available now in Prior pages that we didn't have in the preview version is that if you go to there, you go if you go to the corner there of the page.

A

Actually let me just show you the other Pages, where you go faster here so again you can always see the preview of the content of the page and that's really what we call. What you see is what you get right and this whole ability to preview, uh the stuff that you are doing now. Let's see if I can show you this super quickly.

A

uh So if you go to a page, you can actually control some settings of the page right. Then we'll skip moving stuff into navigation stuff that but in the page settings there's one thing that we didn't have again in the preview that we want to show you now is that you have the ability to control who can see what pages and based on what roles you've created. And you see we have some standard roles like authenticated users and administrators. We also have custom roles.

A

You can create custom security roles so that you can control again, who should see what now there's also the styling space in The Styling space. We've already talked about the styling space, where it allows you to pick themes and edit themes and fonts and colors and stuff like that, so I'm not going to spend too much time on that.

A

The one thing that is really cool now is that you can actually go in through the styling space and manage your cascading style sheet, and you can see here there's already three bootstrap style sheets that are applied with a theme and a portal basic theme. You can upload your own custom style sheet again: I'm, not expecting makers to be. uh You know who are just getting a new uh becoming familiar with. You know CSS and JavaScript and HTML to do that.

A

But if you have a corporate style guideline that you want to follow, it's a good idea to upload your own custom, CSS. Again, it's bootstrap! So it's standard.

A

um We also have the data workspace and we've talked about the data workspace in the past. But you know, if, for those of you who are familiar with dataverse, we can do the same stuff that we would go in a dataverse. You know environment, Go, create tables, and things like that, but here I can do that directly from within the data workspace to control what data I want to show within my website.

A

Let's go to the setup workspace in a setup. Workspace, we've got a whole bunch of options that we can do, but there's a few things I wanted to show. One of the things is that we now have the ability from here to be able to do things like custom domains, CNN CDN, sorry for faster delivery of content, IP restrictions and things like that. Then you go to go, live checklist, it's actually a checklist, obviously of things that you can do before. Getting ready and I'm not going to go through all the checklist.

A

I just want to show you something else really cool um right here. So we have the ability here to here I'm getting just customize this quickly right here we have the ability to create Progressive web applications from from the site, and so you might say, what's a progressive web application. Well, if you've actually used Twitter Uber, uh you know uh what else Flipkart and so on and so forth. You've probably used a progressive web application. It's a website, that's hosted as an app all right. I've got like what two minutes left.

A

Let me see if I can wow you a little bit with this new cool feature. I can actually go to a page. Now and let's say you look at this page and it's like yeah, it looks kind of cool, but let me preview it and it's kind of boring right. It's missing some fun stuff. I want to do some animation. I want to do something.

A

um Well, guess what now we have the ability to actually use Visual, Studio code and GitHub, and all this fun stuff to integrate I'm going to go to a cool site called animista and animista allows me to find animations and really, if you've ever ever been there you'll see or if you haven't been there, you'll see how awesome it is so animista.net you go there. You pick an animation that suits your needs and then, uh let's see, if I can speed this up a little bit.

A

You pick an animation that suits your needs and then you basically click on the copy button right copy, the CSS class and then what I'm going to do is I'm, going to go back to my page I'm, going to click on edit code right here, which is going to open Visual Studio code for me, and it gives me a standard disclaimer just to scare me right.

A

It's going to go to visual studio code and then from here it's going to actually give me access to the CSS, the JavaScript and the HTML for that page and I have full control over that right, so CSS for the style JavaScript for any. You know, code logic, that's client, side and, of course, the HTML itself and then, if I kind of I'm going to kind of skip this a little bit and copy I copy.

A

The code that I just pasted from my animista site I'll go copy, the the keyframes, which is the animation from CSS and then, if I, go, save that so I saved that, like I, normally would and I go back to my site. I'm gonna get something that looks like this come on. You can do it there. You go so now. I go back in sync I preview, my page preview, my page. It knows that I'm trying to speed up now.

A

That's why so I'm going to preview my page quickly and uh when I can preview, it you'll see that that fancy animation that I copied and pasted from admista is going to be now available. So when I Mouse over a card come on Mouse over a card, you can do it there. You go Mouse over a card. I have that subtle, animation that I've just created. So again, that was a super quick tour of some of the new features that we have available in our Pages power. Pages available.

A

There's a new licensing model we'll talk about it next time, but uh go forth in webify. That's it for me back to you David excellent! Thank you. Hugo.