Microsoft 365 Community Community Demos, 25 Apr 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - Modern Page Model handling with PnP/PnPjs

Description

This community call demo is taken from the SharePoint Framework community call recording on 25th of April 2019. In this video, Federico demonstrates usage of the PnPjs library to easily manage and control modern pages.

Notice that the page template scenario demonstrated in this video is an old solution before the out-of-the-box solution was released. Please use the native out-of-the-box scenario for page template handling.

Presenter - Federico Porceddu (Avanade) - @FedericoSPDev

The code sample is available from https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-command-page-model-pnpjs

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-25th-of-april-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

Hi guys, my name is Federico porchetto I am a seer developer in Ireland, Italy Italian, basically in sardinia. At the hour of the Technology Center today, I'll show you one Hospital SPF extension allows a user to define the on page model and we use them easily without expert paste in place, but directly into the modem marketing site. So you can find my reference.

A

Let's see together, general needs every time you need to create a page model for our biblical publication, for instance the page of the employee of the month with the post on general manager, etc.

A

So, if you need to people often need to create people Akali editorial pages with the same composition such a start sestra, this kind of needs is frequent and usually in internet portal and most likely for the reason sure pointy and release it last month is feature us out of the box in a SharePoint align. So many times to worship went in for this really important improvement. What issue today is how to build our own feature of page model, adding our personally using experience.

A

I did not intentionally consider to build a composite architecture, so don't use your furniture flow because we want to study, understand the power of p.m. PJs and use a clean solution. So a solution consisting in am a boolean side column apply to their page library.

A

So what they think is that we can market pages model and relies on SPF a fix station which help to create a new page from a page model list. So the P side is at the bullish, a column to the pitch library, and maybe it is a model. For instance, then, with an ask fits list view comments, annexation, using PP, GS and office um fabric. We should dialogue with a list of bismallah, so we can start my demote.

A

So this is my modem decide to go to the fridge library and we can see the command. The specific succession and, as you can see there is a column, is modern Dolan. So there are some pages, our market as a model, and some it is no. So what you can do is, for instance, mark this page like employee of the month as a mother, and it's easy, because I just need to modify this column.

A

Ok, so what they did is market futures models, so I can start to open my presentation and issue a model with shows trace button, and there are two choices: the first provide to you to create enough coded page, defying use in PJs a page, and we create a page with our people who have part on the on the right, a classic text on the left, and we study our coded and the other.

A

So you can see all pages market as modem, so I can choose. One of these and I can create a page.

A

So- and it's really quickly.

A

Perfect so the page is created and even more so I can go to the new page.

A

Perfect, so I can start to edit this page and modify, and these are really good part of started, so I modified better than create from scratch and look the code and my solution is publish it in github. Obviously, and we can start with this standard. Sp SP FX, this exit.

A

Okay- and there is only one comment and.

A

What we can see is that there is the EMP stop, obviously in their own init method and in on execute. There is a switch with my page modal dialog. This is my definition, page modal dialog.

A

Sorry is some rumors okay.

A

Okay and my page for the dialogue is then the peace dialer that is a SharePoint frame of dialogue. So in my content there are what is the constructor and the first goal, 2 p.m. PJs, so I can retrieve all pages with, is model equal, true and get all pages and put inside my drop-down. So this is the extractor in the render there is the dialog, obviously, and with district I can manage the state and I can choice.

A

Which part render so there are the chest group etc. The most interesting thing in my opinion, is that the part with the security action so I create a page model helper with all my function and I create custom, page method, and this method under are all because with p.m. PJs. So if we choose the kids are, is a saree the case a I start to build with p.m. PG s simple page, so the page name I chose in the front-end and revive all web parts and what it did is build. My.

A

With a lot of with all properties, so as we know web parts, fans and web parts, we can set properties as just where we text button.

A

I decided to build my own page, my own client-side web property for the people were part, for instance, so I can use the all the power of type script and, after all, I can just add the control and in the column and the section and save the page before it is a bit common because I decide to deserve a comma for this page, for instance, but these are just a sample in the case B the page model basic from an existing pages.

A

As you can see, there are less lines of code because the from strong 1 dot, 3.0 I've, if I, remember well in PDS or for this extension item that is copy page. And so, if you, if you means you like to copy a page, you just call this station method and it's a really easy and powerful and I think this is all from my side. So thank you very much great.

B

Demo really interesting to see how you use p.m. PJs and move it in there. So that's awesome to see and a really great application, you've written there, so very cool demo, the code and everything was shared there in the chat, a link to that. So everybody could check that out and learn from that. So thank you. Frederico for that demo.