Microsoft 365 Community PnP Shorts - Guidance Videos, 18 Apr 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with building custom app pages for SharePoint Online using SharePoint Framework

Description

This video demonstrates in practice how to get started with the app pages in SharePoint Online by using SharePoint Framework 1.8 or newer version.

Any web part can be exposed as an app page by adjusting the web part manifest settings. App pages are then shown as an option in the page layout picker. They can be also programmatically deployed if needed.

More details on the app pages in SharePoint Online is available from the following article: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages

A

Hello in this video we'll have a look on how to get started with app pages in SharePoint Online. So how can we create a single part updates in SharePoint Online and expose that to be available for any users when they're creating new pages? So let's start this by creating us a solution and in this case we're not gonna, actually take an existing web part which would be impossible as well and then expose that existing a web or as a single part, a page, but let's start with a clean table.

A

So let me actually clear this one and let's actually create a a folder for us. Let's call this single single part and let's go to the that folder as well. So first things. First, we also need to create our project, so let's actually execute the selections. There's certain things to consider here as well. So, let's, let's start the yeoman generator and talk about these options in a second as well. Now, obviously, it's gonna ask the default basic questions.

A

Yes, a single part is completely fine as a solution we aren't targeting on SharePoint Online, because the single part that pages capability is only available at least currently in SharePoint Online. This is going to be in a current folder because I'm already in the solution folder- and this one is interesting.

A

So do you want allow 10 on that mint, the choice of being able to deploy solution to all sites immediately we don't run into any future deployments, and all of that so the default answer here is obvious in this case would be yes, and that means that whenever we install this webparts solution to the App Catalog and if it contains any single part where a single part app pages, it will mean that those will be immediately available across the whole tenant when persons and people infusers are creating new pages.

A

So that's that's one thing to be absolutely aware of these things. So let's say yes to that: one: we're not going to actually have any API permission. So that's fine and let's create a bit part. So when you create actually single product pages or a pages, they are actually web parts. So you can consider our web part as an up page, it's being just exposed in a different way. Almost like Mike teams.

A

Tap development is the one option for webpart app lets, say: presentation, the single part updates or an app page presentation is a one option for a web part as well. So let's, let's see what that means in practice as we create the solution deploy that to the tenant as well. So let's call this my call single single single part, page and some sort of a description doesn't really matter in this case. I'm not gonna, actually do any code, so we're not gonna care if it's a react or knockout or none JavaScript based.

A

So we cannot use the non JavaScript case just to create the actual web part or the solution to be available, and let's speed up a video at this point, so we can continue when the scaffolding is completed and david gear, another scuffle thing has been completed and we can actually have a look on the solution. We'll need to adjust the solution slightly or the webpart settings to make it exposed as a single part at pace in the solution so because setup related on the related on the solution structure, so nothing special.

A

Obviously there we created a webpart solution, and so we have a webpart micro, single part. Bates are here and to be able to expose this webpart as a single part. At page, we need to adjust this support at host section though so this is the same setting which we adjust to say that this web part is actually teams tab, but in this case we're adding here a shape on full page as the option.

A

So if I do a comma here- and we can see the different options available right now, we support three different options to be exposed. The web parts of a part can be a sharepoint web burn. It can be exposed as a co point full page and it can be exposed as a team's tabs, and you can absolutely have multiple of these choices as well. So now, let's actually expose this at a sharepoint full page.

A

Let's do save and let's actually not do any modifications anything else than done and let's see how it is exposed in the SharePoint site. So let me immediately do now. The cup bundle does the ship so I'm getting everything ready to get deployed. Now that we already updated the setting that this web part will be exposed to say, add page so I'm kind of under the solution I'm going to deploy the solution eventually in a second to my tenant, and then we can use the new page layout picker to actually see this one in practice.

A

But give me one second: as the the Gollop tasks are running and the web card, the web pack is now bundling the solution, and then we have a relatively fast command, which was called package solution and that's the ship and that's gonna then create the SPP at kpk chief file, which is actually the solution file which is then containing all of the JavaScript and all of the other settings, and so that everything is automatically hosted by sharepoint. So now this my solution solution has been created.

A

So let me actually open a my file explorer in that folder and then we actually go to the SharePoint and solution, and there is my solution. So you know this. One is the one which I can technically send to somebody an email and table able to then host that way. Party entertainer. So in my case, though, we wanted to use my example tenon to test this functionality. So, first of all, starting from mid-april, you are going to see this new Bates layout functionality getting gradually rolled out.

A

So what you can do is save any width or any modern page as a template, and then the templates will be exposed to other users in a site, so by default there's three different templates from which you can pick and then that creates a site with an example content like that one or example, structures and all of that or you can create additional set of your own templates.

A

Now in here we have this new apps tab, which is available if there are any single part, app pages so, but bear with me, let's actually get our stuff first appoint and then we'll make sure that it is actually exposed properly on that tab as well and and then walk through the full end-to-end scenario there. So what we want to do is that we want to go to the app catalog in my case, I have quite a few solutions available here.

A

I'm gonna actually track and chop that this baby acacia file into App Catalog library, which is then getting that to be installed, and we did set the setting that this webpart would be immediately available across the tenant. Technically, you would be able to get the same behavior to work by employee, deploying the solution, only the let's say a new site, and then that would mean that only in that site you can create pages based on that page layout. Sorry single part, app pages instances being able to create a non specific site.

A

So technically, that is a possible. It is an option available for you as well for the solution design in my case, I want this single part updates to be available across the whole turn and immediately so I'm going to do to check boxing on there and deploy, and that's it now in this case, and now we have a new capability available in the single part, updated selection. So let me refresh the page just in case making sure that everything is refreshing on those speakers.

A

Let me go again to the new and choose a page and in here I can actually see apps tap. So if you didn't and didn't see the app tap or if you do not see the apps types in your tenant, it means that you haven't. Actually you do not have any single part. That page is installed in your catalog, so immediately when you install something in your catalog, it is then being exposed to the apps tab in this page speaker.

A

So here we go now we can see our cool single part updates and we have some initial values on there and we can then create a page based on this single part. App page definition, obviously we need to have a name for the page, my page name and depending on the settings, we can absolutely configure the settings configure the page as well so configure my instance on my single page or single page app yeah. That's absolutely fine. It's actually as save that one and save the settings we are actually now already.

A

We are in the configuration mode right now. So now, if we go back and request this page without the configuration mode, we can actually say that the experience for the users, and only for those people who have to sufficient permissions they're able to modify the settings of debates and this modification experience. You can actually adjust this in the manifest file as well, so you're able to say that my web part is not configurable. So therefore you cannot actually configure the instance in here, but that's that's, basically the experience.

A

So let me get back in back in the front page. Let me create a new page from here again we can see those page templates to be available. I can go to the apps. I can select the personal email and you can actually see that the personal email selection, our personal email, has a specific image exposed in the UI as well. So for my cool single part updates, I didn't do that for this one.

A

We have actually previously already set the image which should be presented and that can be done by using the icon image URL and tribute in the in the web part manifest. All of this is obviously documented or will improve the documentation gradually after the video is also getting out. So let me create a new page related on my personal emails, and here we go. There's my personal emails page. This one is supporting editing experience. So that's the reason why, again to the left side, the right side panel is actually showing up.

A

So it's called this personal email and let's do 10 10 messages to base shown and click Save, and there we go now we actually have a page which is technically a one wet part.

A

You own the experience and then you're able to it render whatever you want in here, and only those people who have to surface and permissions can edit the page or you can remove the editing, experience completely and potentially even provide your own editing experience if you prefer to do so, not necessarily recommend it, but definitely an option as well, and if you're wondering can I get rid of the header section in here.

A

You can absolutely reduce the header size, so you're able to go to the header and do a compact and that will reduce the header size. But right now it is not supported to completely get rid of the header section and header settings in these pages so that people do not get lost on where they are in the SharePoint experience. So that is not supported at the moment as we are recording this video and it's now meet April 2019.

A

But please give us feedback on your requirements and on your business requirements related on what you would like to see in this area as well, but that's it for now. So my personal emails is a single support updates or a single beit's, a page in a ship one. You can say that webpart being actually rendered here or I could be able to versus saved into the pages for my custom web part as well, and the only thing what we needed to do for the solution was to decide.

A

That is where will be this webpart exposed and we've set it up to be exposed as a SharePoint, full page application, and that then meant that it's available for selection in the page layout selection functionality, but that's it for this video thanks for watching.