Microsoft 365 Community PnP Webcasts, 7 Aug 2017

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - Programming modern pages with zones, sections, news and home pages

Description

More details on the covered content in this webcast from http://dev.office.com/blogs

A

Hello, everyone welcome to this PNP webcast. Our topic of the day is programming modern pages, with some of the new features of modern pages being at recently so currently, mono pages support, multiple zones and in zone you can have sections or columns as an option to create use pages to promote a page as being a news, page etc.

A

So several new things has appeared in modern pages, and this webcast is showing you how to kind of create those and consume those in a programmatic way, and my name is Beth Johnson I'm, a service engineer in Microsoft, and my co-host today is FSA. You've Ihnen, yet.

B

My name is Erin and I'm a senior program manager from a SharePoint engineering as well and like blackburg mentioned all of this is relatively new. It came and it wasn't promised in the maze main event in 2017 early 2017 when we're recording this. This is relatively new stuff, depending on when you're watching the video. Is it new or not? But really the key point of this one is to show you the different options: how to manage the sections.

B

The zones adding contents, how to define the homepage for sites modern homepage for a site or how to define an existing page to be a news using them. Seasoned AP is, and we use the DMP season extension for doing that, which will then, let's say, extract the complexity behind of actually doing this without well complexity of actually doing this, so that the NPS I'd score will help sickly on making this happen. But Burke, please.

A

Yeah, so it's neat you already mentioned this is PNP size, core functionality, so the API is in pin P sites call, so you need to use the version at least the August 2017 version, pin besides quality and do the demo that I will show you later on in this webcast.

A

Our important thing to know is that we're going to kind of extend built upon a previous webcast, so in March 22 we released our four matically creating and updating modern pages web, which shows the basics how to create a page, how to put a web pastor on a page back then there was like a page had a single zone, so it's only one place to put a rebuttal on, but if you want learn, everything I think I would recommend, checking out this webcast to get the basics.

A

Now in here, as we mentioned, introduction our focuses on the recently added components like zones, sections and sports phone use and home pages. This will be a demo only webcast, so this was the last slide. Actually. So, let's immediately flip to our demo quickly,.

B

On the context and when you are flipping on the on the demo side as well, so this is also highly usable if you are, for example, want to upgrade existing classic SharePoint sites to have a modern experience, because obviously you can enable the modern lists, modern basis, experiences in classic sites as well, and now you you one automatically, probably my create or gets your existing content from a classic basis or some of that content to them new experience.

B

So using all of these methods, which are now available, you can easily do that by running a code programmatically across all the hundreds of thousands potential, hundreds of thousands of sites within your tenha. So really really nice set of capabilities which are now available. Yeah.

A

And actually that this would be a really nice community project as well like a project for upgrading your classic homepage, the modern home pages. So definitely.

B

A

B

That one I wouldn't say that it's a community project because using this code you can actually do that. But then the community project would be having more control and bigger here, let's say solution on top of it. But technically anybody using this code can do that probably says: disappoint.

A

So yeah, ok, I switched to the code. I am in the provisioning, both modern pages sample, which is in P and P. So if you go to the PP poster, you will find this sample and in here for this demo, I come up throughout the previous demo. So the previous webcast. We ran across these demos, so the basics and whereas today we're going to focus on the newer elements. So what we're going to do and first step is create a client-side page with multiple zones.

A

So, let's press f5 to start this solution, it will ask me for a password and so let's and it will stop on the first breakpoint. So what we can do it over here is create a client set page with a named page with sections of the aspx.

A

First step, which was ready also available previously, the new thing is here, is like adding a zone so I'm going to add a zone to the page, a three-column zone. So you have three equally sized columns, then I'm going to add a zone with two columns, and you see the order that the second zone comes behind the first zone. I have a page with two zones, one with three columns, one with two cones, a next step, I'm going to add some webparts to that zone.

A

Now for this demo, I've chosen to create a third party per part, it's a basic hello world apart and like shown in the SP FX tutorial, which already installed to the site so that the web part is available I'm going to find it so I'm going to get all the available client side components. I'm going to look for my hello world web parts and I found it so good.

A

So we have that one available or you ever use that web browser we're going to add a simple text: control as well, so click I glanced at text control. Add that to the page, are you see the ad control methods? You can now specify where to add the particular control? So in this case it goes to page two to zone zero. So the first zone remember that this zone had three columns are not specifying a column which means it would date the default column, which is the first column.

A

So this goes to the leftmost column of the first zone. Okay, then, then I was a third party, we're past, which we loaded previously I'm, going to add that one twice to this page, first I'm, going to edit with a configuration saying hello world from control. One now put this in zone zero, so the first zone in section two is listed, the third column, the rightmost column of the page of the zone.

A

Sorry, so that's there then I'm going to add the same apart again with different configuration, but now I'm going to put it in zone one so the second zone and again there is no section, so it will end up. In the first column, you might wonder like okay, how do I know of the set of properties and there it has been a nice change in the workbench.

A

So if we go to my workbench so here after local host running workbench with my hello world web part, so if you create a web part, you can always click on this web. Our data button and switch to classic pages to get a good look at what are the custom properties? Why?

A

What are the custom properties that a process using? So you know through it again like this, so you see it highlight that X is the properties for this particular part by default. When you put report on a page, it will use the properties that you gave it at design time. If you want to change properties and create different instances having different settings, you can perfectly do that by looking at the properties like description but for the server roles, whereas we in our demo set description to hello rose from control one.

A

So we can configure the web past when you put them on a page, all right almost done. Let's save this page: saving, okay, then, and have let's have a look see if the pitch was actually curated. So here I am in a regular, modern web site.

A

Let's go to the home page first use the show you the zoom standard, modern web site. It has a custom theme applied, but sense that it's standard model in there the inside can go to pages, and you see our new page called page with sections. So let's have a look at that page is loading it loads. The controls- and you see already that things are on different places on the page, and so let's put a page in edit mode, make things more clear.

A

So we had a treat column and zone at first. So you see three columns. We put the text control in the left, one our custom third-party web part in the right side, and then we put the same apart with a different configuration in the second zone in the left section of column C over here, so that went okay, also notice. We have commenting.

A

So one of the new features is having comments on pages, so you people can use this to start the discussion on the page content I'm going to describe these changes and, let's flip back okay, next demo, we're going to read the same page again so I'm going to read it again, which gives me an object in memory. Representation of that page with is controls. You see, though, the three controls on the page one text to webparts.

A

Now, if you have multiple zones and sections it would be nice to be able to move a part to a different spot on the page which we can so we have a move method over here.

A

Well, essentially, you can move a web part to a different location, so I'm going to take the web part which is living in the first zone, first section first control, which is our text apart and move that to the section 2 of the same zone, sexy to the rightmost column with or 20 so be below the original one, which was to the first part of a part. So, let's do that then I'm going to switch the order of the zones. We had three columns.

A

First then, two columns I'm going to another round I want the two columns only in the first one, some change, the order. Okay and finally I'm going to add a new control to the middle column.

A

Which has been saved and third part of this demo is disabling. The comments remember that the page had comments, so you can commenting. Is this new feature which you can disable at page level, which this particular API call is going to do so? Save a comments we'll save this article page so can make over here the.

B

Comments can take installed in a site level, an extended level plus panel, but the big nine, a quick note on done. Yes, absolutely, let's see how the page will look like that was a complex change. There.

A

Was a pretty complex change? Remember envision, you kind of being able to manipulate your pages like this, so it's pretty cool so page in edit mode, just to show you the differences, so we have a two column as first, which was the last one previously so that went well. It kept the custom configuration of the web browser everything nicely stasis is we have our three column below?

A

We have our new text control and we see that the text control, which was living in the first column, now moved to the most right column as lost control on the page, so you can actually stack different controls in one section and control the order of them or change the order of them as well. So if we flexibility on dealing with the page and finally, you see commenting has been turned off, so the switch has been formatted. Li turned off for you now.

B

In practice, let to if a case on edit mode so except to clarify, what's actually happening here in the background- is that the destruction of the page is actually stored in a field within a beta slist, and that field has a real difficulty HTML structure, which is then defining what is it zone? What is a column? What is the web part? What is the properties and all of that and everything is stored within the column.

B

So, theoretically, you can absolutely do the same thing using the REST API s as long as you crack, the let's say, the secret of the structure, and but using this is maybe a are provided to you here now. You can say that it's really easy to use managed code and to automate operations, and maybe I shouldn't say this out loud, but probably at some points you know later, and it might be already when this video is getting out as well.

B

There could be operations for PMP PowerShell to do the same kind of modifications within the pages. But let's say when we get that one done. The number one thing is to have that support anyway. In the seasonal core component, yes,.

A

That's the first step, and we definitely will have this in the provisioning engine and in people who shell over time. That's good. It's really needed to do a provision. Modern, modern science, ok going on with the demo, so we talked about the zones and in the sections and how to move controls around great next path to focus more on different page types. So I want to start with a new space. Now. What is the news page in well?

A

Where does it show up is actually go back to the side to the home page see this default home page says this first positive apart, which allows you to create news. So when you click on at us, you create a page, and it will show up here as an item in this list. So this will show the top 5 pages.

A

Now you can do this using the UI, of course, which you can also do this programmatically.

A

So what I'm going to do over here is create a new page, give it two column, layouts and I'm, going to put text control on what, in the first column, alright and the image control on the second column. So this is an out of the box where part of the box first basket immature past that I put on the page, the particular configuration that's.

B

Relatively complex properties, yeah yeah.

A

A

At the control, alright can save the page. At this point, I have a regular client side, page, not expression. Now this page will be promoted as a news article. You can do this with any client side page that you have even existing pages. If you want to have them show up in the news, you can simply call the promote this news, article method and well mesh this page.

A

We have our news page popping up in the list. Letter click on this guy. It brings me to the news page, which is our two column page with the text and the image as simple as that.

B

In practice, once again, so again, this is a completely encapsulated part of the MPs essays encore. You can have a look on the boat, how we actually do that and see some if you need to do the same stuff using the REST API, it's a matter of updating certain properties and fields within the basics list, but this is once again over simplifying the actual implementation for your code. So you don't have to worry about the underlying secrets or the the implementation in SharePoint. Well,.

A

In this case, it is fairly simple implementation. It's essentially, as you mentioned, there's the page list item and whether it is a news article, not just a field in the page list item that you have to properly set with value, and the publishing did so, but using the API makes it more easy and fluent for you, okay again, the next demo. So we talked about zone sections about news pages. Now, let's talk about home pages, so aside, modern theme site as this particular home page they're, all all the same.

A

So what if you don't want this homepage? What if you want to create modern tip sites with a different home page or flagging a scenario as I mention in the beginning? You want to create a home page for your classic theme sites without using a modern page.

A

So you start again sooner way when I create a client-side page. The only difference here is that you specify a layout type. So by default, all pages have the out type article in this case and specifying layout type home, which is the home page.

A

Then everything is just the same as before you can create a flexible layout, so I'm going to sort three column, I'm going to add three text columns a three text controls each in one column. Okay, so like this, let's see if the page at this point I have a home page sitting in system, but it's not showing up as home page. Yet so, if you refresh the site, it's not being used.

A

So the final step here is calling the promote s home page, which will tell the SharePoint site, like you, have to use this page, which is home and let's go to s your home page.

A

If I now go back to the site, I click on home, I have three column home page. Three, sorry essentially I hope. The demo is showing you that that anything is kind of possibly can make really complex home pages, with 20 sections having different layouts and with a massive amazing.

B

Whatever content yeah, oh they.

A

Shouldn't do that from a performance perspective and interval maintenance perspective, but I think you can do whatever you want when it comes to creating a client-side pages. So.

B

It's an it anyway. It's such a typical scenario that customers want to have their own standardized home page, which is having some sort of a welcome to this site and welcome to Burke one side, and this is our project site, and these are the things and this for the instruction. So it is a relatively typical scenario. So, no doubt this is this will be highly used. Edi.

A

Yep and final one, you should do in a demo. You want to clean up stuff, so I'm going to select my default page home today, specs as homepage so again, loading the page and say promoters home page and even now. Go over here.

B

A

I'm back to where I was yep.

B

So now a few questions right now we didn't actually cover this, but what if somebody has to check out check-in functionality, is enabled on that list? Other side pages list? Does it work with the modern pages that works.

A

As well, that's a good good question this one.

A

B

A

The client side, page controls I.

A

Do with while I don't see it immediately, but there is a check-in option. I think it's in the canvas flip page. So.

B

But basically you know we don't actually need to have a look on that. That's absolutely fine, but it's the the same Kay classic SharePoint capabilities where, if somebody enables to check out check-in and the traffic versions and everything we can still do that too, using this IPS as well. Yes,.

A

So if you would create like a page in in the UI, if I go over here,.

B

A

Pages and create a new side page.

A

And give it a name, save I, didn't click, publish and page shows up here in not publish site trust.

B

A

B

0.1 very yeah.

A

Right absolutely, but then you can use the publish methods on the page to actually publish it. So that's built in us all parts of them move. It definitely possible yep. Absolutely.

B

Make sense, oh.

A

B

A

Back to the sides, one block I had one last night: I talked about no slides any mobiles on the site. All this is explained in our MSDN guidance, which you can get over here and Chris O'brien did create already in March a nice blog post explaining the basic product. Editing is still very relevant and it shows some different samples on how to use this API to customize your client-side pages with that well, but on for my son, my process and so keep seeing comments from your site.

B

No, not really I, think it's a great set of KPIs and it really autumn helps to automate defining the default betas and defining the evolved content on a side and also the scenario which we talked about it creating, let's say or not, my creating transforming the classic SharePoint team sites to be using modern experiences.

B

So you can absolutely use this API to automate that across all of the science and and no doubt that it would be a nice community project in thinking around that one as well to to have some sort of a centralized solution where you can control the logic of my creating existing classic pages to modern experiences. Because no doubt, if you think about the classic pay, sharp sure gave us always two columns three columns.

B

And then there was individual with parts you could theoretically identify what are the web parts and get the modern replacements of those and all of that logic implementing define.

A

Mapping rules which classic yeah bypass modern webparts how to map one to digital, how to map the properties and then apply that on on skill. Yeah, absolutely absolutely.

B

And then have a Power Core PowerShell with the setting up that definition and blah blah blah. Okay, there's a lot of opportunities there, but anyway yeah out of the group cool right well,.

A

Guys, thanks for watching that's.

B

It just yeah thanks for watching and please give us feedback if you're missing something please let us know, I think it's covering the basic scenarios and I like mentioned will provide, will be additional webcasts, probably on the on the provisioning engine, support for all of this modern capabilities in the future, as well, depending on when you're, watching the video but I, think that's it Burt. Thank you. Yep thanks.

A

Everyone bye, bye.

A