Microsoft 365 Community Community Demos, 28 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with styling your Power Pages

Description

In this 20-minute developer focused demo, Hugo Bernier demonstrates how it’s a snap for Makers to select colors, background images, layouts, etc. in the Pages workspace and choose themes (color palates), fonts, buttons, etc. in the Styling workspace. Makers can do all changes, no CSS, JavaScript or HTML. Developers may upload Bootstrap style sheets, apply styles across the board, apply brand colors directly, etc. working in CSS, JavaScript or HTML files in Visual Studio Code. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 1, 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
• 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
• Themewagon template - HostPro – Free HTML5 Hosting Website Template | https://themewagon.com/themes/free-html5-hosting-website-template-hostpro/
• Documentation - How to use the learning hub | https://learn.microsoft.com/power-pages/getting-started/use-learnhub

Previous topic related demos from Hugo
• Demo - Power Pages General Availability – Hugo Bernier (Microsoft) | @bernierh | https://youtu.be/MqAmuF8yA48?t=2646
• Demo - General Availability of Power Pages - Getting started – Hugo Bernier (Microsoft) | @bernierh | https://youtu.be/EszUm_bufBA?t=1586

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 hi everyone, my name, is Hugo Bernier, I'm, a principal program manager in the Dynamics 365 and Power Platform Community success, team and today I'm excited to talk about a different type of pages, which is power, pages and power. Pages. If you are wondering hey, what's this thing? Well, it's the latest family member in the Power Platform family and the Power Platform.

A

Obviously you know you go to the ability to create workflows, to create apps, to create dashboards and virtual agents, but with powerpages you are now able to create externally connected websites that are really like data Centric, they're really intended to be connecting to your dataverse infrastructure, the rich data versus infrastructure you already have and then, because it is part of the Power Platform family. It's designed to really work with again power automate and all these cool things it's important to to from the start.

A

To talk about power pages is really intended for the fusion teams to work together right. So we're talking about the makers, the traditional developers and the IT professionals to work together to create websites again that are connected, because we want to make sure that you know our sites because they're externally available, we want to make sure they are compliant with the organization's standards. The Branding standards, the accessibility standards, all these good standards.

A

We want to make sure that they are secure and we want to make sure that again we're all working together, we're not just allowing just any random person in the organization to create websites and again in future demos. I'll show you how we have the ability to control these things so that we are not just allowing any person to create any websites randomly. There is a process to make these websites available, but let's actually show you an example here.

A

So in the past, I've talked about how we can use the the editing functionality of the pages, so I'm not going to do that too much today, I'll focus on how to change the styles of your pages and the elements of your pages and usually when I, do these demos I always look for free design, template and I try to emulate it if I was doing this for real I'd probably find a template that has the colors close to my corporate brand and I would start with it, but today I'm going to use this free theme from theme wagon.

A

As my inspiration, it has some bold colors. It's got a nice hero image, so I'm going to use that so when I'm on the page, I can edit every element on the Page by just selecting it and clicking on the the ribbon that appears there. So, for example, if I want to change the background, you can see. I can just Mouse over the background here and I'll see what the background looks like, but in my particular sample, I know that the background for this section is actually using an image.

A

So I could upload an image, but in this case I just want to use a the image URL, so I'll go paste a URL here and right away. I have kind of the the look that I'm looking for I'll just delete the video here and because I want everything to be aligned to the first left. Half of the screen in this design.

A

I'll just kind of keep the two column layout here that I have I'll just keep the right column blank all right so now I'm starting to have the style I'm looking for, but I I want this section to be a bit bigger.

A

So again, if I go to the settings of this section, you'll see that I can pick different styles, pixels percent uh and so on and so forth. In this case, I know exactly the the height that I want. I want it to be 580 pixels high, as per my design. So uh it's looking good right and if I move to the next section here, I want to change the color of the spacer uh and if I again do the same thing.

A

I edit the background I'll uh as as I Mouse over the screen, the colors again I'll I'll see the cards and you can see. I can add extra colors here. So if I wanted to pick a color, that I really want. I could add it here, but you know I kind of want to make sure that I'm using a theme so that I have the scholar consistently across my entire site. So let's go explore where these colors are coming from.

A

So if I go to The Styling workspace we'll actually see that there's a whole bunch of themes that are in there right and I can select different themes and you can see as I select the themes. I can see the preview. So then we look good some of them. Don't look so good depends on again what my design looks like, but every theme has its own color palette and you know I can adjust these color palettes by just going to the color.

A

So here I'll just reuse, the original color I can go pick a color, and here I can I can enter I could pick the sliders I could pick the color from the from the palette itself. I could pick the transparency if I wanted to, uh or um in my case, because I'm copying and pasting from a theme that already exists I'll just paste the color here and I'll drop it in now.

A

The cool thing about that is when I do that again, I can see right away where it impacts on the page, and uh you know I could continue doing that with other other colors. So let's do that. I'll just go pick. Some different colors I'll just go pick. The gray here, which is the main color I'll, put that in there cool, and then you know, one of the things that it's important to note is that power Pages doesn't really tell you. You know this color is used here.

A

This color is used here, you kind of have to explore a little bit to do that and that's that's. What I tend to do is I'll kind of explore. The colors try to find where these colors are applied and then use these colors um consistently all right. So there's not an awful lot of yellow on the page. So I can imagine that the color for the button, the call to actually button here is going to be the one so I changed that to the orange and yeah I can see.

A

The orange button is looking good, we'll have to figure out why that gray color is coming from in the text very shortly, but you know again, you can see I can just click through and create the the color themes that I want. So I fast forwarded a little bit here, where I've preset all the colors and then I uh that I wanted from the theme and then I added more colors. Now, why would I want to spend time setting my theme my color palette?

A

It's because the idea of power Pages obviously, is to create these data connected Rich websites. We want our makers to be able to go, create pages, to drop data tables forms and things like that without really worrying about the CSS and JavaScript and the HTML. So these colors can be preset and I'll show you later how I can even upload these colors as a CSS and then use these colors consistently throughout the site all right.

A

So the dark text on the orange here is kind of annoying me a little bit so uh if I could go to The Styling palette, I can see that, let's see so in the I got all my different styles here and you'll see the button here. The primary button is actually using kind of a filled orange and an aerial font, but the color of the text is actually gray, so I'll set that to White and you'll notice.

A

That I can also change the hover style and then the fill color when I Mouse over and because I don't want gray over gray here, I'll change the font color for when I Mouse over the button to be white right and I could continue doing this with all the other button Styles in the page. But this is cool because now consistently all my buttons will actually have that theme that I'm looking for all right. So let's save this right. We should probably save this now.

A

I could have discarded all my changes and that's one of the things that I like to do when I first start is I like to explore through these colors try to figure out which colors are used where and what templates and then uh save it as I'm.

A

You know as I, make the changes or discard completely and I'll show you how we can even reset the style sheets a bit later, all right so now, I want my header, two styles to be changed a little bit so uh you'll see that I can make it bold or semi-bold in this case, I'll make it bold and I want, because my sample theme uses uh 30 and I'll pick a darker gray, and you can see now in the on the right side immediately when I make these changes right, it starts. It starts applying.

A

Let's continue a little bit here. So you see if I explore a little bit through the page right I'm, seeing the Styles but I want my sections to actually be a bit wider, a bit higher because that's what the template does. It adds a lot of vertical spaces on my template. So let's go to the section section and look at the margin in spacing, and then here I have 60 pixels by default again, I could pick different measures or units I still want pixels here and I'll set it to be 90. so again, right away.

A

I see my sections are wider or high taller and that's cool okay. So, let's move a little bit forward here, so I I've I'll set up my heading one, okay, so the heading one, the problem with the template that I picked the sample theme that I picked is it's using a different font, a different size and, honestly, let's remember that this interface is really intended for the makers to give them as much power as possible without over complicating things. So, if I look at the options here, you'll see that my options are somewhat limited right.

A

I only have a selection of fonts come on yep here's, my fonts here I have a selection of weights and selection of sizes, but it's it's pretty Limited in terms of the options. I want to give my makers and that's by Design again same thing. If you go to SharePoint and the page editor right, you start with some predefined colors predefined, Styles and the whole point of this is consistency right because think about it.

A

Your website that you're creating here is going to be available externally by your partners, your your your customers, your constituents, you want to continue enforcing your brand identity, but you know, unlike the rest of the Power Platform. The one thing that I like about powerpages is that you know the rest of the Power Platform.

A

When you reach the limits of what you can do with powerapps or power, automate, uh you're kind of stuck right, you you have to live within that bubble of what the product gives you, but with power Pages, once you reach the limits of what it can do with the user interface, you still have access to HTML, JavaScript and CSS.

A

So this would be more scenario that I make or maybe uh not a maker. Sorry, a developer would maybe want to go edit, some Styles, and so let's go take a look. Let's go on the page again, and this is the heading that I want to change, but here on the upper right corner. I have the ability to edit code and if you remember in Paras portals we used to have a little pane that would open in the bottom and I used the term lightly.

A

Here you could edit stuff, but it was not always the most enjoyable experience here. We have the ability to go directly in Visual Studio code and edit the content of every page, and you can see I have the CSS, the JavaScript and the HTML. So that's all the HTML, that's on the page. It's actually here and if I wanted to edit the HTML I could do that. I'm not going to do that in this case, but see how it's using the theme colors uh right here. So it's not hard coding, the colors.

A

It's actually using the theme colors and here I, see that the create and engaging headline is actually a heading one. So I can actually go create a CSS that Imports the font that I want for heading one and sets the styles for heading ones. So let's do that I'm going to go copy and paste here, because watching me type, this is, would be very painful.

A

Let's see so I'll paste the import and again I'm using the add import to import a custom font. uh The majority of you know, websites out there use custom fonts, it's really easy to import custom. Fonts and you know power Pages supports it. But again we don't want just the makers to randomly start creating custom fonts.

A

We want to make sure that we enforce that that corporate identity, so this font here would be my corporate font that I want to use and then what I'll do is I'll paste, also H1 style and I'll overwrite, the font size and the weight and the margins, and things like that now, when I go back to the editor, I can just click on sync and what it will do is we'll basically tell it: hey someone's changed the code behind the scenes, go update it and then, if I go preview, the page, so click on preview click on desktop what we should see.

A

Well, it's already done it, but right away, it's actually changed the style of my heading and just to prove that this is a real thing if I go change here. This word to be bold and go save that and preview that we should see that the heading has changed. Styles.

A

All right there you go okay, so so far, I've been able to go from a maker experience to picking pallets and things like that to um going into the CSS for that page. But what if I want to customize more well, you know, um for example, the navigation here is kind of ugly right uh I. One of the things that we we've noticed is when I was playing with the colors I introduced, some gray navigation elements and well.

A

Okay, I can just go to The, Styling and I can just click around with the colors I happen to know that this is the same color here. So I can just overwrite this color right, so I'll just set that to White, and it should make my navigation, nice and pretty, but here's the problem when I do that. Yes, it does fix my navigation, but it also fixes our brakes a lot of things. All my text in the page is actually broken.

A

So one of the things we have to be careful about when we're playing with these colors is we really have to make sure we understand the relationship between the color palettes and the brand colors with the elements in the page, um but in this case I actually want to I want to actually apply some font. Styles I want to apply some some hover effects and I want to make sure that this is done consistently across my entire site, not just on a page by Page basis. So let's go back to visual studio.

A

Let's go back to editing the code and let's just test new HTML here, our new CSS, sorry. So what I'll do here is I'll copy and paste. My CSS I've recreated ignore the stuff. That's at the bottom, I I inserted some code to break some, looks that I'll fix in later sessions. But here, if I sync I've actually changed the you know, you should be able to see I've changed the navigation, color I've changed the navigation font, I've, changed it, the hover effects and all that stuff.

A

Let's move forward a little bit, I'm not going to wait for this to refresh okay, but the problem here is what I'm just doing now is I'm, actually changing every single page, I don't want that to be on every single page. I want those styles to be applied across the board on the entire site. Well, if I go back to my styling you'll see that I have in the hidden menu option against my theme.

A

I have the ability to match custom, CSS and you'll, see, there's already three CSS that are applied, but I also have the ability to upload my own custom CSS here. So what I'll do is I'll go find a CSS that maybe a developer has written.

A

For me, uh the contoso style, or maybe the the brand police in my organization, has already created these CSS for me, because this is a bootstrap site, so we can use bootstrap style sheets and, if I go back to the site now, actually I am applying the brand colors that I've applied I'm, applying kind of the styles for power pages and I've applied my custom CSS in that order, and then I'm applying the themes on top of it. Now I can go back to my custom CSS for the page. I!

A

Don't need that anymore, because I'm applying these CSS to the every single page in the in the site and, let's see if it comes back, it should come back so now the other thing that I can do when I'm. So if I preview, this just to show you this is this is starting to look like the site that I I want to right.

A

We have pretty sight, we have the pretty sections and the headings all done and the buttons are having to style the color and mouse over effect that I want this is great. But um what if I want to do some other stuff with my with my style sheets, so the one thing that I can do if I go back to my style. My Global styles that I've now uploaded and I manage my custom styles right here through that hidden button.

A

I could just again reset everything to default if I messed it up, but I don't tend to avoid messing it up. uh So if I go to my custom, CSS I could also upload more than one custom CSS and the cool thing about that is if I had more Styles or I had a style specifically for I want buttons to behave a certain way.

A

I like to have individual CSS that have these Styles, so I can pick and choose kind of a kind of a la carte menu of styles in my demo, all right so uh we'll skip ahead. While it's uploading so now, I have kind of my two CSS that have applied and I can just change the order because they get applied in the sequence that you see them right. So um I can put the more CSS first or I can move it down.

A

I can enable it or disable it if I wanted to or I can actually go edit that custom CSS directly in Visual Studio code.

A

Again that whole experience of being able to edit um you know things like CSS and HTML, and things like that directly in Visual Studio code, without really kind of having to open a different application. But doing you know from within the browser, that's kind of really powerful all right. So this is my page. Let's just kind of move forward here.

A

One of the things that I can do everything I've learned here today is all available if I go back to the home and I go to the learn section: you'll notice that there's sections about design and build well today we're actually using the design studio. uh We were creating themes and this one and we were also using visual studio code and power pages to actually edit the stuff in future sessions.

A

I'm going to show you how we can actually go in and change the structure of the page, create some page layouts and things like that, and then we're going to do some fancy forms and lists, but that's for another call, and that's it for me for today. Thank you, Visa.

A

That was a teaser for the future sessions. Thank you on that one. So it's gonna be awesome. Not yet not yet yeah, no choice to bring me back yes, but we'll need to get you back.