Microsoft 365 Community Community Demos, 16 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Editing Site Headers in Power Pages

Description

New capabilities make it easy to manage site header and navigation style to comply with branding guidelines. In this 17-minute developer-focused demo, Hugo Bernier steps viewers through creating a new site, selecting site template, then editing text and layout of site page. Edit header by going to Styling Workspace, insert brand colors, apply to site elements. Optionally, site header can be edited in VS Code! Maintain header style/layout separate from page content.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on March 16, 2023.

Demo Presenter
• Hugo Bernier (Microsoft) | @bernierh

Community Call Conversation
• https://aka.ms/Mar16-Demo2

Supporting materials
• Documentation - Edit site header | https://learn.microsoft.com/power-pages/getting-started/edit-header
• Documentation - Style your pages site | https://learn.microsoft.com/power-pages/getting-started/style-site
• Documentation - Liquid overview | https://learn.microsoft.com/power-pages/configure/liquid/liquid-overview

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

A

B

My name is Hugo Bernier I am a principal program manager for the Dynamics 365 and Power Platform Community success team and today I'm, going to show you how power Pages makes it easy for you to build a website that follows your organization's. Branding guidelines and branding guidelines are important because, if you think about it, what we're saying with Power Platform and power pages is that we're empowering people to build websites that can extend the reach of your Power Platform infrastructure.

B

Your dataverse and your your power automate and power virtual agent extend that to an external audience. It could be again through a public website, but it could be your employees, but it could also be your customers. Your partners, your constituents and so branding is very important. We want to make sure that we're following the corporate guidelines here and so power pages, is designed to allow makers, Pro developers and IQ, administers to work together to make this happen right, because we always want to make sure that we do everything that we're doing in a secure way.

B

We don't want Rogue people creating websites that expose your data out there, and, but today, what we're going to do is we're going to focus on a new feature that makes it really easy for you to manage your site, header and your navigation style to comply with your branding guidelines and how the header style and the layout can be also maintained separately from your page content.

B

So that again, your makers can focus on really creating the content they need, while someone else can focus on the consistency and the branding with that in mind, let's move forward, so, let's start with a new site, and so to do that we go to make.powerpages.microsoft.com.

B

And once you get there, you can go to create a site so right here, so you can create a site. And then what do you do when you select that is it'll prompt you to select a site template now, we're always adding cool new site templates so feel free to explore through the various templates and and pick the one that really matches your desired layout and branding again. Remember that you can always preview some pages and you can always preview kind of the mobile view versus the desktop view.

B

But I'm just going to show you a few of these templates here and you'll notice that, while they're very consistent, they also have minor variations to each one of them right and as we're going I we're going to continue adding new templates and new layouts, but you're really going to go through the templates that you want that have the functionality you want, and you pick the one that is the closest now I think I'll pick the starter layer layout four.

B

So, let's choose this template and it's asking you to give the site a name and the web address we're not going to worry about that for today, we're just going to click on done and it's going to build our website.

B

All right now, once the website is created, I can go to edit and I am Canadian, and so my fake dishes company is going to be a canoe of the month. Club and I want to allow my subscribers to manage their subscriptions and set their preferences for canoe types, and things like that. So let's change uh the title a little bit so here again, I'm just going to the page and I'm editing the header, so I'll just say, welcome to the weekend and then I am not a marketing genius.

B

So I'm just going to write something really boring here like um relax in a nice canoe every weekend.

B

But this is just to show you again that we can simply edit Pages the content of every pages, and uh here, let's just change the button here- to make it a call to action, we're going to say register actually say, register now and then click on link to a page I'm going to pick just a page right now that, let's just picks up page one but later we'll come back and customize this all right and I.

B

Don't really want this section here so, like any other areas of power pages I can just edit the sections remove the sections and so on. Okay. So let's move on to the next step here.

B

So I could do a lot more here with editing the pages, but really the focus of today is this section here, the the header and so it what we want to do is we want to comply with our branding guidelines or corporate branding guidelines, and to do that, the first thing we're going to go to The Styling workspace right here and while we're in The Styling workspace, you can see that I have and a whole bunch of choices that are available to me. I can pick and I can preview the color schemes here.

B

You know we have some some crazy colors. None of them really match really what I wanted so I'm going to go back to the original style that I had selected and I'm going to focus on that for the rest of the demo.

B

Now in The, Styling workspace I have something called brand colors and the brand colors are absolutely the corporate brand colors that you want to follow right, there's also a more color section that allows you to. If I can highlight that there, you go more color section and it allows you to really add more corporate colors, but also complementary colors, that you'll use on your site and I always like to start with the most prominent color, the most prominent brand color in my organization. So I'll do that right.

B

Here, um I'll usually also set kind of the page background color, but uh my branding guidelines say that my background should be white and the color is already white. So then what I'll continue to do is I'll continue. Putting the brand colors that I want right here, and you can see here. I I'm, just copying and pasting the hexa hex decimal value, but I could also, if I wanted to here. Let's just click on that I could just kind of use the the color wheel and just change all these values.

B

The rgbd alpha but again I'm trying to be a good corporate citizen, I'm, trying to stick to the corporate guidelines, so I'm going to copy and paste all the colors now as fascinating as it might be. To watch me enter all the colors one by one through the magic of demos, I'm going to speed up this and I'm just going to enter all the other colors that I want to use.

B

Now the cool thing about that is now that I've defined my brand colors I can use these colors throughout my site, including in my site, header. Let's show you how we do that so at first, we need to save, because one of the things here that we're trying to do is to allow you to explore the colors without having to worry about messing up your site, but once you're happy with your colors, you can actually click, save and it'll, save that and you'll be able to actually preview that later, all right.

B

So now, let's go back to the page workspace and to look at this header and you'll see. The header is actually grayed out because we're trying to tell you here. This is a separate part of the page, and we don't want you to edit it by accident. We have an edit site header button right here, so that you can purposely go edit.

B

Your site, header, and the first thing that you can do here, is edit your site title um I'm, not a very original person, so I decided to pick a site called Canada which is Canada and canoe and Xanadu, I, guess and then I can enable disable showing the site logo. But what I want to do here is I'm going to upload the an image for my site Loco.

B

So let's do that and I'll just pick a slight image that I had done just before this demo and once the site is uploaded there, you go and I should probably also put alternate text because we want our site to be accessible uh normally here, I think the the accessible guidelines would be to to talk about the the company logo, but I'm just describing here that this is a canoe all right, so that was for the title and the brand, but I also want to go use the colors that I've defined earlier.

B

So this is where the styling tab in the edit site, header uh dialog, comes in so here you can see that I have the title, which is the the site name. I've got the navigation. I've got the background and if I change the header background here, you see it reflects right away. I, probably don't want it to be white. I just want it to be the original color that I had set, but I could also go in and change the title, and we want the title to be actually white on that dark background.

B

I can also change the navigation and navigation. uh The corporate guidelines say that it should be this gray color now I could actually change things like I want uh on on different underlying color I want different font, size or I want a different font uh by law. You're not allowed to use comic songs because it's just horrible, but you can use pretty much any other fonts that you want and we'll talk later about. Custom fonts as well.

B

All right and I could also, of course, change the font for the main site uh title and things like that. Now that's cool I've now customized, the header. You know, I've put it the logo I've put in my company name, but the other thing that I can do is I can actually go test.

B

My layout and the reason why this is useful, is because, uh if I've made customizations to my header, I want to be able to verify that it works in a in a that is responsive that works on a mobile device without having to save preview. You know, use an emulator and things like that, but once I've tested that I can go reset and go back to 100 size, so I can see the site and continue editing the site.

B

Now I just talked about using custom headers right then cut customizing, the header, but the one thing that you'll notice is on the corner here: I have the ability to edit the code right here now. The cool thing about that is that if I select, that I'll actually be able to open the site or the site header in Visual Studio code directly from the web interface.

B

So this is actually a web-based version of Visual Studio code and what it does is it downloads, the header HTML, and let me Zoom that a little bit here there you go and you'll notice that this is a standard here. Let me zoom in and highlight this.

B

This is a standard bootstrap file right, so navbar navbar inverse static top and, if you're familiar with bootstraps, you can absolutely customize these Styles here to suit your own needs, but the other thing that you'll notice is that uh there's some HTML in here right, but there's also some really weird looking HTML, something that starts with the uh the squiggly brackets or the left brackets and right brackets, and this is something called liquid and liquid is a is a is a language that allows you to actually create server-side functionality uh to do things like Loops conditional formatting.

B

You know using variables and things like that. In fact, let me show you if I search here on my code for the word snippet. This is one of the or Snippets. This is one of the functions that's available in liquid. That allows you to go, get some reusable content Snippets and insert them into your code and they'll do that dynamically as it renders the page, so you don't have to you. Don't have to go, for example, go replace the name of the company in every single page. You can just use a reusable snippet.

B

You see on this page right now, there's on in this in this header, there's 13 instances of Snippets that are being used, but I've got time. Let me show you uh some behind the scenes magic here, let's go back to the design studio. Now it's actually prompting me to synchronize my code. I didn't change the code, so I just hit cancel, but here I'll go to portal management and in Portal management. This is the behind the scenes. The engine that feeds power, Pages I'm, going to go to a section called content: Snippets, hey content!

B

Snippets is again all these reusable bits that we've talked about before now, which I have a lot of sites in my environment, so I'm just going to filter that by the site that I was just showing you and you'll notice that right there I've got my site name that is gonna, do and I've got uh what else did I change? I got my logo here, uh you'll see above that I've got my ALT text and so on and so forth.

B

This is where all this information gets stored and the cool thing about that is if I want to refer to the site name or the company name throughout my content. I can actually just do that by just referring to this snippet and these Snippets. You can use them for a lot of other things like, for example, my copyright notice. You know some reusable text that I want in every single page. Instead of again retyping, um you know no results found in every single search result.

B

I can actually just do that centrally in one place and the cool thing about that. You'll notice that the content snippet has a language Associated to it. So if I created multilingual content in my site and I enabled multiple languages, I can go. Translate the Snippets right here and it'll automatically pick the right content, variations or language variations for me on the site. Here's another example of a snippet if I go to the mobile header mobile header, actually, because all Snippets can contain either text or HTML and liquid. So here.

B

Actually, this is a hyperlink that I've created that actually goes and determines whether I have a logo and all that stuff and it all it refers to other content Snippets like the company name, all right. So now that I've showed you the behind the scenes magic. Let's go back here and let's just um let's just wrap this up here.

B

So I have a header that meets my corporate branding standards right with the colors logo and company name and I have a site that well soon enough I'll, be able to start editing and use my corporate colors and have my content, but it's not quite the most exciting site. Yet so let me go to edit the the hero section here. Let me add an image and let me put something that's a bit more canoe uh or relaxing right and now here, like every site as I'm building power pages, I can hit preview.

B

I can click on go to the desktop and I get to preview the site, and this is actually a real site. This is live and if you actually scan the QR code before I I switch Pages, you would actually see exactly what I see now. There's a lot of work left for me to do right. But the important thing here is that I showed how you can build a power Pages site that complies with your branding guidelines by using the styling workspace and the site. Header editor.

B

We barely scratched the surface honestly with what they can do with power Pages. We could have changed the layout completely. We didn't register any custom fonts. We barely edited the pages in the site structure, but we could have also connected to dataverse right. We could have used power, automate power, bi power, virtual agents.

B

We could have extended the data to show through Power Pages, by using virtual Stables, for example, if I wanted to show items from a SharePoint list or from a SQL Server database behind the scenes, and we also would have to set up the authentication and permissions. But that's really that's all. For another day right, we're just getting started.

B

I can't wait to see how you're going to use power pages to create more beautiful, branded and secure sites using power pages, and thank you for your time and with that I got some QR codes for you and some links. I will paste the links in the chat, but these are really the two articles that I use to talk about this demo.

A

All right, everybody! Well congratulations to Hugo Bernier! This is his fourth power Pages demo in the category of Power Platform. So we want to congratulate him and just ask him to please leave the stage all right, excellent job, everybody, foreign.