Microsoft 365 Community PnP Webcasts, 9 Jan 2017

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - Customizations options with SharePoint Online “modern” experiences

Description

PnP Webcast around customization options with SharePoint Online modern experiences. Notice that this webcast has been recorded on December 2016 and additional capabilities are being released to modern experiences gradually. More details from blog post at https://dev.office.com/blogs

A

Welcome everybody: this is chiffon battles and practices so webcast at this time, and we cannot talk about something super super exciting. So we cannot talk about what are the customization options with sharepoint online modern experiences and with modern experiences we mean the modern team sites, modern lists and libraries and the modern pages which are available within the sharepoint online, and you need to be aware of the let's say, the the existing or current capabilities how to customize those things if you have customization requirements.

A

One thing what I want to note before we actually start and even do the introduction. So the recording of this webcast has been done on december 2016. We will add additional capabilities and the customization options to all of these modern experiences gradually after well, gradually on a monthly basis and so on. So whenever you're watching this video, if you're watching this, for example in summer 2017, the situation could be completely different. So please go through dynasty and guidance, which is also available around the modern experience customizations.

A

We will keep on updating that one as we go through now. My name is Esther. You wanna I'm, a Senior Program Manager from the ship on the engineering side and with me today is Burt. Johnson Burt will do the intros.

B

Yes, sir, so hello, everyone, my name is Bert Hanson I'm, a service engineer also in SharePoint team and ready some great information around experiences. Absolutely.

A

This is awesome stuff, yes, I would say that. Obviously, awesome is a relative statement, but the key point is to understand what are the customization options for time being and where we're heading from a customization perspective as well before you do.

A

The actual content just quickly explaining ship and others and practices, is a engineering driven initiative, which is work where we work together with community and the bees and not non NVP, is to provide code samples, guidance, documentation, community calls case studies and our themes are within the shipment framework ship and adding model Microsoft graph and office 365 a what if this guidance actually applies, the shipment online and on-premises as well SharePoint framework when we are recording this webcast is not available yet in the on-premises.

A

But it's it's like it's gonna land in the on-premises in the calendar year of 2017, on Docs correctly to plan a kms SharePoint DMV is tetris to remember where you can find a lot of webcasts code, samples and additional assets as well, but let's actually jump into the topic of today and really the key topic.

A

What we wanted to cover is concentration on the fact that there's a lot of people and a lot of customers who have existing customizations within the SharePoint Online on the classic experience so in the classic theme sites or in the classic lists and libraries. So how would I actually make them work in the modern experiences or which of them will work within the modern experiences? So we're going to walk through today in the webcast, the X that the current let's say, situation around the customization and mentioned already?

A

This is evolving, so we are gradually introducing additional capabilities and additional support for the modern experiences as well.

B

If there's a great question, so what if those poor experiences are great, but what, if I don't want today, you already make the jump, so we have options to actually control the behavior of the more experiences you connect since you turn them off or not absolutely.

A

So that's a good to keep topic after they start as well in the intro, so all of the stuff. What we're going through today, you can control when the modern experiences are taking into use within your tenant in a tenant level or in a site level or in a list level or /library level. So we're not taking the classic experience away from a sharepoint online. That's not going to go away and the modern experience is out there, but there are certain, let's say, differences from a support perspective from a customization suppose perspective.

A

So it's up to you to make the decision when the modern experience is in quotes is a mature enough for you to take into a use. If you have customization requirements, if you don't have a customization excrements requirements, the modern experience is no doubt is faster. Its fluent it's responsive, there's a lot of additional benefits out of the modern sites as well. So the topic of today is around the fact that you built customization. You have a business requirements who cannot?

A

Actually, you need to enable those within a sharepoint online, and like mentioned you can control when you start taking at the modern experiences into use good. So one of the things just the kind of a pinpoint we do have an existing MSDN guidance available around the the modern experiences and the customization of the modern experiences as well. So right now, when we're recording this one, there's five articles in MSDN around this. So what is supported? We provide code samples, PowerShell samples how to control this.

A

We also pinpoint this tenant level and a site and a and a list level settings how to enable or disable the modern experiences as well, and this will be gradually updated whenever new capabilities are introduced. So you can actually follow up on these articles whenever you are looking into the current status of a customization options within the modern experiences now, let's actually concentrate on the existing status or the current status of the modern experiences mentioned already quite a few times and in the initial slides we have now released the initial version of the modern experiences.

A

But this is not the full story. We are adding additional capabilities, additional things available to the modern lists, sites and pages. So only the initial version is now out. There are some limitations around, for example, the classic customization scenarios. I would like to have a widget in the top right corner. I would like to have a custom branding and we can walk them through today as well. What if this stuff will be evolving? So please follow up on on the support and follow up on the articles. We will be updating them gradually as well.

A

Really the key point to kind of a consider is that evaluate what you have currently within your customizations and move, and when the functional and visceral performance can be achieved, it might be that your functional business requirements can be achieved actually using the new modern capabilities, because there's a lot of additional capabilities within the modern experiences, so the modern sites and modern canvas and the modern web parts are available within the modern site. So it might be that whatever the the ad lean web part, you have can be actually achieved using out-of-the-box capabilities.

A

So you don't have to use those customizations anymore within the modern science, but really the key point. If you have a a significant amount of customizations to understand what you have, what is the functional and business requirements for them and then evaluate the existing status of the modern experiences? So can you take them in to use and if you can't just disable the modern experiences or control where to take the modern experiences in two years couch?

A

So what mentioned this is absolutely a great time and create opportunity to review your existing customizations. So the modern experience has have numerous additional capabilities: additional benefits, additional functionality, additional web parts, which you can actually use assets natively within a SharePoint Online, and that's really really. Why we're introducing the modern experiences as well.

A

One of the let's say, most classic scenario from within the SharePoint Online, is that a chip on isn't responsive guess what modern experiences are fully responsive from a page perspective, lists libraries and a site and perspective as well, so they actually scale based on a device which is natively. You don't have to do anything less than one device which is accessing the site, so you don't have to have and more and let's say, a responsive, customization applied to a site like you had to do previously.

A

That's a good example of a a customization which you can then drop as a requirement for the future, and you don't have to maintain that as well and really within the customization perspective, evaluate individual things. What you have is it actually even used because many times what we're seeing when people are moving, even within the classic scenarios, moving from farm solutions to the adings and now with adding solutions into the SharePoint framework or forward, they might actually have individual capabilities as an customization. But nobody is using them.

A

So it would be really really a vice to do an analysis of the existing capabilities and really think through. Is this truly needed? It's this customization, something what we want to maintain, because whenever you have a customization which you're maintaining, that is increasing the costs of your deployment as well good.

A

So, let's start with a a site and more insight and and more on list creation. So whenever we create or when we, if we want to create a modern site, we actually are creating an office 365 crew, so office 365 groups have a modern steam site associated to them by default. So you can actually go well, you can go to an office 365, you can create an office new office, 365 group and there's actually a site tab nowadays within the UI.

A

If you go there using the outlook UI or if you create a new modern team site using the create functionality in the SharePoint landing page, you will actually get an office 365 group, but you will land into the modern team site. So there's numerius, let's say routes in quotes how this office 365 groups are created, but every single office, 365 crew, has also a modern team sites associated to it, or vice versa. Every single, modern team site has office raises to five growth associated tourists in it as well.

A

You can provision these modern team sites programmatically. So what you need to do is hit the cruise endpoint in a Microsoft graph to create a new crew, and this is slightly evolving. The the following statement on a slide so access the files collection in the kerbs endpoint to start the modern team site provisioning that should be combined to the crews creation. But initially, when we created a modern troop using this much of craft endpoint, you would have to access the files collection once to get the modern teams.

A

I took a bit to be created as well. One thing yeah.

B

If you're using the the PNP components, IPB powershell of india core component, you don't really have to worry about the two different steps. So you have kind of encapsulated both steps and easy to use, powershell, commandlets or easy to use extension method for you. So essentially, you have to run one line of code to create your modern themes automatically. Absolutely.

A

Absolutely and and one thing to call out on the on the creation right now. Currently, you have to use and user context to access the cruise endpoint, and this is really a limitation in the croup s-- endpoint in a max of graph.

A

It does not support at only execution or at only support it doesn't have their polymer support, which no doubt is a limitation which we need to be aware, because if you do have a let's say, back-end process with the first progressing requests in a synchronous way, you will need to then use an access token, a user based access token to get stuff done. We are targeting to address this cat and the additional support for the app only is hopefully coming a relatively soon, which is always a relative statement.

B

There is also a slight kind of around a little bit so meaning, if you have an access token, you can work with a refresh token and you can automatically refresh your access token up to ninety days, so he can get grabbed once an access to a particular user and then keep refreshing that one until it's end of life. So advise you some time, but it's not the final solution that we need. Yes,.

A

Now and one thing to be kind of aware- and we kind of a pinpoint that one already within this introduction slide, we will go through these limitations, Monte laughs, coming slides as well, but these modern team sites have the new script capability enabled or the scripting has been disabled.

A

It depends on a terminology what we're going to use for the statement, but what it means is that there are customizations in quotes, limitations in their slides and the no script or the the scripting being disabled means and that people cannot upload files, for example, which have a possibility to have custom scripts in them. You cannot use user custom actions and so on.

A

All of these limitations are called out within the support article mentioned on a slide as well, and we put that one in the in the video notes as well, so you can easily access them. Obviously, all of these slides are links and everything else this is mentioned also in the MST and guidance, but let's actually have a look on the on the.

A

How do we provision these modern team sites and in this limit, we kind of use the BMP powershell, because it's actually the most simplistic way of provisioning and modern team sign, but you can just as well use managed to steal sharp code if you want to provision modern team sites or obviously you can manually create modern team sites as well, but let's jump to a demo and let's come back on the slides after a while okay.

A

So let's have a look on: how do we create a modern team site within a SharePoint Online so based on a tenant level setting you can control the modern team site creation also from a UI perspective, all what will be shown for the inducers whenever we start creating a site from a SharePoint capability within a shipment online?

A

If you enable the modern team sites, you will see this modern way of creating a new site, and that will that's then available, and this will actually create an offer site which is associated and office 365 crew, and that can actually do that right now, because let's create the site programmatically. In this case, we kind of use PowerShell, but it's you can absolutely use a managed code as well.

A

The alternative routes for creating a office 365 group with them with a modern team sign, is to go to your outlook and then click create in here and you walk through the settings and you look actually get office 365 group and then you go to the sites tab and you get to the actual modern team sign. But we wanted to create this programmatically. So in the demo we can now use the the PowerShell to make that happen.

A

So let me switch to my PowerShell and this is the PowerShell I'm gonna actually slightly slide that one on the right. So let me squeeze that slightly. So we can see the modern team site to be created on the on the crews list on on here, but let's walk through first. What are we doing here so we're using the BMP powershell BMP powershell commandlets are available for you to install from a github. I will add the link.

A

So, obviously, on the on the video recording as well like mentioned, you can use manage code as well in the PMPA sites, core component, which is released as a nuclear package. There's a simple methods to do exactly the same operations as with the powershell. It's so much easier to actually demonstrate this with powershell, so we're using the powershell commandlets for that.

A

In my case, I already have some assets available within the within my location, so here's some of my scripts and there's the logo which we're gonna use to PNP logo and then in the in the later part of the demo or in second demo. We can also apply a custom theme to that existing site, but let's concentrate first on creation of that theme.

A

Sign or a modern theme sign, and one thing what's really really important to realize is that when you create a modern theme sign, it's actually super fast, comparing the de plastic side as well. So the modern theme sides are. There is a significant changes on the way how we provision these sides from a free dinner sharepoint online. So this happens relatively fast, so we can actually see that life happening. So we can actually see that the brilliant group to be listed on the left side relatively fast. No, since we use the p.m.

A

paper shop, I'm gonna use the connect BMP Microsoft graph, which is a a comment late for me to connect to the Microsoft graph itself.

A

Let's actually execute that I'm gonna sign in using my alternative accounts, I'm coming to sign in with the right account which is associated to this particular tenant office staff B&B on Microsoft and not gonna, say my password out loud I've done that in some of the recordings accidentally as well so signing in- and this is really for me- the signing against the Asha ad so and I'm requesting in the powershell and requesting the crew pretrial. All the user read all permissions so.

B

Essentially, versa: we are using as you're a geek group api's and not sharepoint api sticker essence. Yes,.

A

Yes, really important thing to realize, so we're using Azure ad group say behind to actually make this happen if I want, I can actually see that I do have now an access token, so we can actually see the access token if I'm signed in properly, but for some reason I'm not actually getting that. So, let's do not even more do need to just show. It just show the variable, oh yeah, so that's for me being not prepared there we go. Thank you.

A

That's why you are helping me with this demos, so there's two access token, which is now valid for a certain time frame. Now we do have the new PNP, unified group comment. Let technically the name. Unified group is an old term. It should be called office. 365 group, but but again the command hides itself is creating an office raises to fight group to office resist file using this access token, which is already saved within a PowerShell session.

A

So what do we do here is that we call the new BMP, unified crew, could give it a display name week. A description and really important thing is the the mail nickname.

A

This will be actually the URL of the site as well, so it will be, then the tenant names last sites last the URL of the site, whatever we put us on mail and nickname and then I can also associate additional members the site or that group automatically and I can define its at a private and I can also upload automatically a logo for that crew. So we can actually associate the custom logo for the group as well. So let me execute that one thing to kind of repeat our once again.

A

The previous step here is not actually needed. So, as you can see, I did not paste or use the access token. Within this movie and a unified command comment. Let the access token is already taken care of by the comment light itself, because we executed the connect to BMP Microsoft graph in the previous step. So if I now execute this one, it will actually start creation of the of the group itself, and now it seems to be that I have a small typo, so I have a local JB.

A

Tp key as the group logo path and I'm getting an exception that the crude local file does not exist, so let's actually double check the name that it's actually fine, a local JP key and let's actually double check that it's correct. So let me do this I'm going to copy the full path. So we get this one working without investigating what did we do wrong good?

A

So, let's actually execute that one one more time and there we go execution has started and now, if I close that one, we should see relatively fast on the left side when the pray, lien crib will be created and it will have actually the local associated to it as well. This one does take a while, well I, wouldn't say tastes of while, but it doesn't take as long as a classic SharePoint site to get created and it takes. It depends slightly on the under environment.

A

It depends slightly on the current load of the farm, which is hosting currently the office 365 tenant. How long does it actually take and mentioning on the on the powershell commandlets?

A

This were originally released in the november 2016 release of BMP powershell and, together with the PMP chase and BMP, see some core component support and we did do and we're doing updates on this comment, let's on a monthly basis, so you want to use her Wester latest version of the BMP powershell will release a BMP stuff on every single first Friday or the the following Monday of a a month.

A

Good now the new Piper unified group has been created and added as small its bits. A small issue here: I didn't actually put myself as a member, so I'm not getting that group to be visible directly in the cruise, but I can actually get the site URL of the group which was created using this variable now, because the PowerShell is giving me, the crew project and I can actually execute or get the information around the group object and we can see that their site URL already associated to it.

A

So if I now take the site URL, it just executes that one. We can see that we have krillium group, let's copy that one and we'll open that one in a krauser. So we can actually see that it's available and opening that in the in the prow. So we can say that we have this crew created and it should have a custom logo associated to it. It does take a while to get that one processed on the on the side as well.

A

So now, if I go, for example, on a home page, we can say that it's a modern team site with the modern team site capabilities and everything is what the more inexperienced like as an example. It is fully responsive and it's scaling based on the on the device size natively without any customizations or itself cute.

A

One thing to notice on this: one is that now, when we have the crew created or a site created and if we do want to modify or if we do, for example, when I used to be a big power, shell for the BMP provisioning engine to apply lists and libraries content types, the design we need to reconnect to the site using the PNP connect B&B online, and that means that we are using the sharepoint online connectivity against that site which is now created within my tenant. So let's actually quickly do this.

A

So it's gonna ask me to sign in an office FB and be on Microsoft and my password.

A

There we go signing in and let's double check that we have the right context. So let's execute that one and in the context object what we actually have there there we go OOP. Actually, let's cancel that let's get the web and then, let's make sure that we actually have the web object available. So we can actually say that we have the web object, which is a SharePoint client-side object, model web object available and then we're going to start operating with that.

A

One good example is that we want to double check what is the web template and configuration for the web? So let me do that so I'm going to do an execution is, and we can say that that particular site is not an STS. Has one like the classic team side is group has zero, which is a modern team site.

A

Just a pinpoint are not going to execute this. You we do have in the PM a PowerShell also comment, let's for getting all of the unified groups or you can filter the unified groups or get information using the group ID or one particular group. You can also delete and set additional settings on these groups using the PMP PowerShell common plans, but I think that's from a programmatic of a perspective. I think we covered what we were planning to do any pointers for me: resigned Burt, oh.

B

No specifically, I think did is a pretty extensive support, EF we haven't shown or commandlets or just more around working with or 65 groups, so which could go check it out. If you want yes,.

A

Absolutely excellent: let's switch back on the slides and come back on the on the on this one's for a customization perspective. So back on slides.

A

Good, so let's concentrate them on what is actually supported with modern theme sites currently and like mentioned, this is December 2016 as status and run the customization options. So we want to keep pinpoint this because many of these are kind of a let's say classic customization scenarios within a SharePoint Online. So you would be aware what is the situation with in the modern theme sites related on the on the classic scenario? So don't? Actually you don't run into surprises planning to take the modern theme, science into a use?

A

And then oh, this isn't working and so on now, on the printing side, you can apply a custom theme to a modern theme, son we're looking into having additional printing capabilities in the future. But we don't have any exact details right now announced and we don't have an exact schedule for getting all of this stuff announced or publicly available, but we're looking into having let's say, additional printing scenarios and layouts available within the modern team sites as well, because right now, there's no support for custom master pages or no support for custom. Page layout.

A

So essentially you're right now currently limited on a1 canvas on a page, and you cannot actually switch that to be multi canvass layout like within the classic themes. So.

B

Actually, a single column where you can put content, but not yes, IP address owns that kind of there. Yet yes,.

A

Exactly the web part zone is probably the easiest way to explain a canvas as well so right now it's one canvas. It's a one column, it's a one web part zone and vertical web part. So from a customization perspective, there's no support for frontpage modification right now. What we mean with this one is that you cannot actually go using api's and modify what's what are the wet parts, for example in the front page of the modern themes nights or what is the content and text within the front page of the of the site?

A

That API no doubt is in the roadmap once again, but we don't have a popular schedule or or exact time when we will announce even the public schedule. Yes,.

B

Sir, what about what about actually adding pages so I have this modern theme site, but I also want to format. Eclis, add additional pages. Is that also today, you're not.

A

Right now we don't have an API for that one as well. So there's this limited, limited, API capabilities for this we're looking into addressing this relatively fast as well. Okay,.

B

A

No support for app only creation. We mentioned this one already in the previous lines before the demo. You have to use a user token, the creator modern about office 365 group technically and which will then create the modern Tim site as well.

A

There's no support for user custom actions in JavaScript because of the no script or the scripting is disabled within their site. So the classic scenario where somebody is using this site user custom action and associates a JavaScript there, which is then drawing, for example, let's say global navigation or header or folder, and that scenario is currently not supported. You can do SharePoint framework client-side web parts in the modern team sites, so you're able to use them. We do have a concept called code parts in the roadmap.

A

We mention actually this one in the Atlanta or in the Ignite raining ignite conference, and but we don't have an exit schedule for that one either. It is coming at some point and that will then enable more structural way of having a chava script embedded on the on the site for a certain scenarios.

A

There's no support for layout changes, currently kind of a mentioned already under the branding section. What's called out here explicitly as well.

A

The subside are currently still using classic template so when you're creating a modern team site, if you create a sub-site underneath the modern, the root side of the site collection, which is a modern team, sign, there's no modern, sub-site options available. So when it created in a sub-site, it is actually using a classic mode, which you can, however, customize to be like a modern team sign and we're gonna talk about that one slightly later in the slides as well.

A

Know we mentioned the no script order the fact that when, when a site has scripting disabled again, once again, it depends on a terminology. What you are using. These are the let's say the high level things which are not available when the scripting is disabled on a sign, and this actually applies on a classic theme sites as well.

A

If there's no script setting is enable and so safe sign as a template, not available save document library as a template not available solution gallery theme gallery not available, you can apply a custom theme like mention, but you cannot actually define a custom theme in the theme gallery: help setting HTML field security, sandbox relationship and designer and uploading certain files which potentially could include a script.

A

So these are not available within the site within the is kind of a site, and then there are certain set of web parts which are not available on the sites as well. No to be fair, if we concentrate on the modern T inside the web parts, the set of web parts which are available are completely different, but the new script setting can be actually enabled in a classic theme site as well, and that would also mean that this set of web parts would not be available within the classic theme site.

A

So quickly kind of a reiterating certain key scenarios, because we went through quite fast, the previous slides as well so can I use my component printing with modern sites. Yes, you can but you're limited to use a custom theme for the company printing, so right now and logo of the site, so you're able to set the logo for the crew. We were able to set a custom theme, but you cannot use custom master pages or alternative layouts, which group could be a big limitation or it might not be a big limitation.

A

Once again, it depends on your business requirements and what are you planning to use that site for what about? Can I associate a custom script somehow on a modern team sides, and the answer is no. This is not supported.

A

Currently, the only thing what you can do is that you aren't able to use a client-side web parts on the modern team sites or headings as well, so the classic adings and app adding sorry client-side web parts or adding parts whatever we want to call them or imports. So many terms, it doesn't matter cladding a classic things where we have an iframe. Those also call it within the modern sites as well, but you cannot associate that custom javascript using let's say the classic user custom action scenario. Did they small and science all.

B

Right this one we're talking about custom javascript is disabled, so applies to the custom CSS. So this Web has an alternate CSS, URL property, where you can hook up a custom CSS file, which is simply used in to make a site more responsive. That approach also doesn't work in the modern sites. Correct, yes,.

A

You're absolutely correct on that, so that's setting you can technically. You can add this at that setting on the web object, but it will be ignored for the modern side, so you cannot associate a custom CSS using that kind of a way. The only really supported branding option right now is the custom theme which you can apply on the side, which is a good scenario to actually quickly have a look on.

A

So how do we apply a custom theme to a modern team site, and so how do we make the modern theme sites to use company-specific brandings? So let's have a look on this one and come back on the slides after that.

A

So let's have a look on how we can customize this newly created modern theme side. So we can I use this awesome creature created previously. It has the logo and everything else, probably on the side as well. We are able to have a customer for a site for the modern team sign and like recover it in the slides, depending options. Folder and modern team signs are slightly limited right now. The only really supported option is to apply a custom theme.

A

There will be additional capabilities in the future, but they're not yet announced, or we don't have a exact schedule and details run them to be shared right now. So a custom theme I wanting to be aware on the custom theme side, is that when we, if we actually go to the site settings, if I could first go to the site contents and then I go to the site settings of the sign. You actually notice that we don't have a link to the theme gallery.

A

So the compost or compost look gallery or theme gallery in the site settings and that's because this is a no script side. So whenever the the site has a no script adding in enabled, you cannot actually add additional theme options that the gallery itself, but that does not, however, means that we would not be able to apply a custom theme, because we can still do that programmatically and it's fully supported to do so. So let's actually make that happen.

A

Probably the first question quickly going true is that okay, so how do I create my custom theme? So I can create my custom themes using this awesome stool, awesome tool which was released back in 2013 or something numerous years ago, which is called to SharePoint color palette tool version, 1.0, 1.0, zero, no idea why there's two zeros actually on the version- and this is a free tool which is a available from a sharepoint from a microsoft download site.

A

So if you search for it, you'll find it, you can install that and you can use it to create a color file and SP color form. The UI itself is still showing a classic side, but the SP color file itself is absolutely usable within the modern theme sites as well. Now, in my case, I've actually created the SP color file in the past already so I'm gonna actually just use that one which have been already created and waiting within my folder of the demos.

A

So I can say the SP color file here and has my background image which I'm gonna apply to the site. So, let's make that then happen so I'm gonna switch to a PowerShell side and in my PowerShell, probably first checking that I'm in the rightful folder which is good and then I'm gonna scroll down.

A

Here we can connect that particular site, so let's actually execute that one and we are in the office FB and PS tenant on microsoft.com, so I'm gonna sign in on this one and after signing in using the PM a PowerShell to connect BNP online comment. Late I can double check and do operations against the site using the PMP powershell commandlets.

A

So this could be useful at this could be familiar for you if, if not, please have a look on what is a PMP powershell, because this is an awesome way of manipulating sharepoint, online or on-premises sites using them scripting. All of these operations are also available using managed code using the PMP sites, core component, which is released as a nougat package. So, with a single comment lets you can upload file or single method. You can upload a file, a single method.

A

You can apply a theme and so on now, in my case, what I want to do is that I'm actually going to upload my SP color file and my background color to the site assets folders I'm, going to use the ant BMP file common plain. So let's execute these two fellows and upload those files available within the site. So they are now in the site, asset folder within the site, and we can quickly quickly have a look on that one.

A

So if we go to the site contents and then have a look on the site assets, we can see the files available in here wanting to be aware on the location of this files, because this is a no script site. You cannot just create a random folder and upload the files in a random location, so they have to be available from a known location, very able to upload them in again, one of the limitations in the no script sites, themself and modern list- is no script site as well.

A

Let's go back on the PowerShell side and then I want to do, and then is that I'm actually building in the right URLs, which we're going to use for applying and the theme to the site, and then we cannot use a season apply theme operation. This is actually out-of-the-box. Client-Side object, model method, not BMP extension, and for that one we're saying: hey use that color palette and that background and create the theme and apply that to the site itself. No execution of this one does take quite a long time, especially within the modern team side.

A

There is a and we're looking into that one, how to make that one, faster and and in this case, I'm also adding the request timeout just in case for infinity, so the request timeout is based on the service side timeout after this one, but since it takes a while I'm going to execute this one, but we can't pause the video until the execution is fully completed. So let's execute that one.

A

It starts executing and those operations, and let's pause, the video for this one and we'll come back in in a second to have a look on the side which has been the custom branding apply.

A

So now we executed the comment. Let's, and this is one thing, what actually might happen to you for the time being, and this is one of the things what we're working on as well. So when you're applying a custom theme to a modern team site, this actually takes quite a long time like mentioned before we started executing this one. That's why we set the request timeout to infinite it.

A

Unfortunately, what happened in this case in slightly depends on the on the on the load of the server and the operation, actually timed out on the server side, and that doesn't mean that the command order, the customization was not applied. It means that the connectivity between the client-side object model and the server was disconnected by the server side connection, but the execution of the theme actually is still applied. So the execution of the of the custom theme, the design most likely, was fully successful.

A

So, let's actually have a look on the site itself and if we go to the site and do a refresh on the site, we can actually see the custom theme now my background and it's pretty pretty dim yeah. In this case, you can probably say that the guy, on the background standing like in the background image which we set for the side- and you can also say that the color has been color set- has been set to blue and the custom theme also is followed under on anywhere within the site.

A

So this is getting the site to be a consistent and there's a some level of a branding. It really depends on what kind of theme you are applying in this case. It's pretty white and and not a super super visible from your site perspective. So if I go to the document side in the same way, we have the consistent branding from a training perspective applied in here as well.

A

But that's it form. A custom theme apply man perspective and, like mentioned, we are working on getting these things faster, we're working on addressing, for example, that possible time and issue relating on themes and all those all of the guidance will be absolutely updated on the MST and are related on this one as well. But let's move back on the slides and continue the webcast on the presentation side.

B

What about customizing, modern, listen, libraries, so more experiences also applied to our favorite document, libraries and SharePoint lists, and there are a lot of things which are possible, but also things which is not possible. So what's the state's example around branding for branding good to know is that modern? Listen like this? Really, this Walker your custom themes or our user box themes, there's also fine, so the themes will nicely blend into the UI and you will see your colors and your logo being respected.

B

So great now, like with all the other modern experiences when it comes towards customer using custom master pages, are using custom page layout, that's not possible. Today, things will improve over time, but today that's a no-go. The same applies for J's link based field and view rendering the it will improve in the future, but the current J's link approach as it is today, which applies the classic libraries, is not supported for modern, listen, libraries and same applies a custom seders.

B

So if you would like to hook up a custom, CSS your site and have the custom CSS having certain impact on your list of library, it's not possible anymore, because she simply cannot use custom CSS on these pages anymore. Maybe.

A

At one point on the chase link thingy, there is an option for the lists. Isn't it worth that you're able to say that hey auto-detect and if the list has the chase link currently said it will actually fall back on the classic rendering? Yes,.

B

Absolutely so, with the modern list and I really experienced, we defaulted to turn it on, because we think there's a lot of value for most users to start using modern, listen libraries, but you also added mechanisms in there to automatically switch back to the classic experience if we detect certain customizations that you idiots and that are not yet available in the modern experience and J's link, rendering is one of those experiences VESA.

B

So if we detect a link field based rendering, we will switch back to classic mode unless the user really says like I want to visit the modern. So there's some creation in the scenario, but essentially we try to give you the best user experience possible, taking an account to your customizations yeah. It sounds great all right. One of the most commonly used customizations for vista libraries is actually adding custom entries in control button block menu.

B

So when you click on the three dots on the document, you get a pop-up menu, giving you some options to work with the document. You can extend that menu with your own entries or in the past. You could also add custom ribbons because the ribbon groups, bottles in the ribbons, etc. Everything is this. These options are still available.

B

So when you target your user custom actions for the Edit control application, which essentially is the recreation saying like I- want this option to show up in the pop-up menu when I right-click a document panickin on documents, that's there and you can also get your buttons showing up the ribbon buttons showing up in the toolbar I. Think the screenshot is really clarifying this really well. So the download all button at the left side here that that one is a regular button and that was added into an existing ribbon group.

B

So suppose you have one button showing up in the existing ribbon. It will go over here and be a button in the toolbar. If you ever had a custom tab for your application that custom tab is translated to a drop-down menu so that the ribbon name, custom, custom custom tab is then the drop-down button name and then individual buttons in your custom ribbon the sharpest entries in this in this drop-down menu. We.

A

Didn't and images yeah sorry on that one we didn't actually explicitly say this, but it obviously means the treatment itself is gone from the modern, Western libraries and that's why there is this conversion right? Yes,.

B

It's kind of confusing today because you have to target come on I thought ribbon to get something in the toolbar. So but that's kind of just this box did both experiences. So the same connection can work for you nice experience as it can work for photo modern experience, yeah and that's why the name ribbon will still be there, but in the modern experience ribbon. Isn't there anymore called the toolbar now yeah.

A

Which is which is probably a good thing as well. It's a slight discussion but ribbon I think we got a lot of feedback on the Reedman that in some sense it was a great great capability. But then again it was super super complex. So one of the things with the modern experience is to make things more simpler from an interior perspective. So now things are no doubt simpler from a user perspective, because we don't have a ribbon with multiple tabs and buttons and all of that stuff in the in top of the page.

B

Absolutely now, when we watched what people from the fields, we've seen several comments from people trying to add custom elements in the toolbar, for example, and having issues with it, and the reason for that is that there are certain limitations around using custom actions. I think that you need to be aware of they're, not that many limitations and they're not overly complex with just a few things which might bite you, if you don't know them. So one of the topics that is important here is the ordering so you've got complaints from people saying like.

B

Oh, my order is kind of switching like a the the menu entries or the buttons in the toolbar there Knox appearing in the order that I want them to appear, and today that's indeed the current situation, we're looking into improving that one, but the actual user custom actions is not respected. Reason is because we are implementations, client sites, you calling API, if not like user custom actions of this particular list, and it will apply them in the order that gets them from the API API is not respecting their.

B

The sequence attribute that you can specify a custom action, hence the order might switch it sometimes now, there's also a little bit good side here is that if you have a custom that, like I, showed in the screenshot in previous slides, you can really control the order of the buttons in that custom tab.

B

So if you really want to order the buttons you can do it with the custom tab approach and then control how the buttons are appearing another one that might bite you is the no chat with embedding I think already mentioned a few times in ins webcast, embedding JavaScript in the classic approach that we've been doing in the past. It's not possible and modern experiences, and this also applies to hooking up a user connection to a modern list of library.

B

Essentially, if you would kind of in your command action, instead of a basic URL working to pull your right host application, you would put some JavaScript. The result of this will be that it will simply not show anymore it's gone, so you can't do this.

B

The same for the very proper of script link, script, block properties which we used to embed JavaScript on all pages of site- that's not possible because you cannot use the script link, location anymore. So again it.

A

B

Won't render a.

B

Third little thing to be aware of is I think this is not will not hit most people, but there are people using custom actions and in the registration, ID property they specify a particular library ID. So if you really want to target your customers into one particular library, you could do this in the past in the classic mode. However, then, the modern experience to the eight that's not possible, so you can target a specific library ID. Nor can you target a specific content type ID.

B

So if you have your custom content type, we only show up the entries. Freaker's income type- that's not possible today, whatever does work is just regular template types like one for a list of 100 one for document library, which is you is also an in the demo system later on and a little small one is not sure if this will hips many people, but we noticed this during our testing work is that if you use an image map, so SharePoint has those nice image maps or this format- map 16 by 16 PNG file, for example.

B

This far out contains hundreds of images. You can pick the right one by it's just for any coordinates. That approach also doesn't work. You really have two points. The custom action to one particular image here for you, but all in all these are some limitations that you can work around I, think and if you do that, you do have a fairly good support for adding custom, toolbar buttons, custom menu entries in your custom list and library experience.

B

Can you associate a custom JavaScript's to render with modern, listen libraries? Unfortunately, today it is not supported so no way to have and use a custom action, calling custom JavaScript, no way to use J's link on a view owner fields to run your custom JavaScript, not today, not there today, but we're looking into the future to get support for a kind of a government way to embed JavaScript on your pages and also at that point and.

A

One thing maybe to mention on this one Kannamma, one of the let's say: clip stick scenarios for for embedding a JavaScript on the list and library level or in the site level has been that hey I want to have a global navigation, I'm gonna, have a global header or footer or I want to make sure that certain links are visible across, like all of the lists and libraries and any bait in the SharePoint, and that's like birth mention we're looking into having that kind of a support, but not using this classical mode.

A

So it will be it's part of the roadmap non-thinking for the printing and the future things and configuration things for their sites, but it won't be based on the user, custom action and a custom JavaScript on the baits itself. The scenarios what you usually get with a custom action, it's customer JavaScript, will be we're looking into enabling those scenarios, but using more in quotes, railed experiences.

A

So the scenario the functionality can be enabled, but it's more in its in some way controlled way of doing that and a more safer way to do that, because in SharePoint Online we are releasing a new versions really often so. We need to have a safer way for people to enable their typical business scenarios, rather than just relying on on a Chava script and a Dom structure within a page.

B

Absolutely so, if you need to split a feature today, just as good to know that it is something coming in the future. So when we do it, we don't send. This is a kind of key scenario for for many people, so it's being worked on yeah all right, so that was the theory.

B

Let's do a little demo, so in the demo, we're gonna show you how to use the PNP PowerShell to apply a custom people vision, template which will then generate for you, custom, toolbar buttons and a custom entries in the Edit control work menu of documents in this demo. We're gonna show you the you, can customize the experience with documents and libraries. So what we've done is we've created a regular theme side. So this is an SDS based site. We've saved concept also apply if you equate a modern tips, unlike like life shown in previous demos.

B

Now, let's go to our documents, library, the default comes library and what you'll see is is the modern experience really nice and shiny experience, responsive ruins, grace variance which the default toolbar buttons and the default have document popup buttons links that we talked about previously right, so this default perience now, let's add additional capabilities to this modern document library. So we want to add additional buttons and additional elements in this pop-up menu to do so.

B

I'm gonna use PowerShell, so people power shell to connect to the site and then apply a pin the provisioning XML file. So these statements will connect us to the site. Let's execute him. First.

B

And my passwords here we go you're connected good now before applying the templates. I want to quickly show you the template, so this first template is springing is using having actually a custom action to the Edit control block location. So this is one of the support applications if you can use to add custom actions to the model and listen I ever experienced, and it will essentially add a custom action in the.

B

If you select document click on the little dots that pop up menu, that's the one being targeted with the self control work, so add custom action over there to station type. This list and ID is 101. So be aware that you are limited to using that station, IDs like being regular template, ID, so 101 for doesn't maybe 100 for a plain list.

B

Then there is a title attributes and secretariats. Secret attributes are not respected, so we can have them in your XML, but are not really used and then there's actually the URL. So the action that you want to do when you click on that particular menu item, the other one, modern toolbar entries XML, that we're gonna apply, is slightly more complex because it same she could insert custom ribbon tab which is transformed into a drop-down menu in the our new toolbar.

B

So adding a download old button over here this guy and then we adding a custom ribbon the name custom tab over here and that custom ribbon has two custom groups which each have buttons so custom group to s1 button and custom group. One has two buttons notice: the order so I have custom group to first and then here's a good one, which means custom button. 3 is first and then after custom button one so and in this case this order will be respected. So you will see the birth disappear.

B

Wiegand because in this office with the tree, then customer the one that customer to do.

A

So bird on that one, so the sequence for that one, doesn't the croup sequence doesn't matter for that. One right.

B

Correct so the group sequence is not respected, but even.

A

For that extreme, it's it's around.

B

Yeah yeah, so we only look at the button, so it groups the self and not respect not not shown in your eye. They kind of disappear with what we do is we pass this command to high-definition XML block and we take the buttons in the order. We will see them in the XML yeah and all the rest. This kind of ignored.

B

Okay, so this gives you a view on how to do this and the MZ an article contains this XML and also contains instructions on how to change this particular PP provisioning XML to apply it to a list, so in demo going to apply to a document library, but of course the same can be applied to a regular list right back to our powershell session.

B

So now I'm gonna just run those two guys, so I'm gonna apply two templates in one shot: I'm gonna press it and our EP PowerShell is applying these templates.

B

For demo, we chose to use p powershell, but obviously can also use just regular C, sharp codes and use of the extension methods. To do the same thing. This was really quick, so templates are applied. Let's flip back to the side, I'm gonna press console after refresh the page and what you'll see is first of all, we'll see this custom tab and download all button.

B

So you saw the elements we specified showing up and if we select the documents or SharePoint behavior works document and hits the the dots over here, we see our new custom actions popping up as well. I should have maybe Hugh's more compelling Viper's for these guys but yeah, but.

A

It's more visible, yeah x-axis is.

B

Yeah so I think this kind of summarizes the options for you to custom actions in a modern, listen librarians, so you can use the toolbar. We can target this control board menu. All other custom actions are not supported.

B

B

Another option we have around customizing is applying a custom theme. I'm, not gonna, show it in the demo, but the previous demo. The test I showed you library, where you can saw that the the background team that he applied showing up in welcome experience, so that would be there as well and the.

A

Names are who is buried, so the themes are applied on a site level, so they're not about a list of specific setting.

B

But today blended nicely in this.

A

B

Those custom themes and experiences will be coming in the future as well, so.

A

I started looking our toolbar and it's like okay: where did they go, but they also went away because you selected the document so there's this.

B

A

What are we actually showing from a contextual perspective, now they're right back again? Well, they are, they are here, actually they're visible, but we show some additional buttons under under it depends. Yes, we.

B

Showed a fixed number of we take a fixed arm of pixels to show buttons and if it's too big it overflows to this menu, and then you see them popping up over here. Yeah the custom tab always stays group together. So if order is important for you use a custom tab and then you can define the order inside here and so this kind of workaround, if you kind of, are not happy with the ordering, because now you see like custom tab down and old, it could be different next time. So that's why?

B

If you really want that consistent ordering use the custom tab approach, then you can control the order. It's alright, I think that sums up. This is a short demo back to the sides sounds.

A

Good good, so let's talk about also the the scenario which is really commonly asked. So what about? How do I convert my classic exercise to the modern experience and can I do that and what's actually supported so for time being there's no supportive mechanism for associating an existing classic site collection to an office 365 group- and this is really the key- let's say a limitation for the time being. This is in the roadmap, but the exit plan and schedule are yet to be confirmed.

A

So we don't have exact timeline or which we could share right now within the webcast and but from a Inc user perspective. You can actually enable the modern experiences within a classic side as well. So if you're not interested about the office, 365 group side of the of the modern modern site, you can enable the modern experiences within the classic side as well and and essentially what you do is that you create a more in page on a cut in quotes a classic site.

A

You associate that modern page to be a welcome page on the classic site using an API. So that's an API level operation because that's not exposed within the UI and then you configure the site to use the modern, Western libraries at this point, that site looks like a modern science, even though it's not associated for the time being to enact any existing of a 365 group. So from a into user perspective, it looks like exactly the same as the modern theme sign, maybe the the web part. Well, even the web parts.

A

You can actually make them work, but the default settings hmm are slightly slightly different. Wanting to be aware on this. One, though, is that, because of the modern page, has a one canvas. Maybe if you have a classic page, you might have multiple layouts and different other functionalities on the page. You would have to obviously change your layout and think again. What do we want to have on that?

A

Welcome page, there won't be any automatic, let's say transition or my creation between those I think we cannot implement such an artificial intelligence, which would do that in the right way and maybe a one additional thing to be aware: the create a modern page in a classic site. We covered that in the in the webcast already we do not have an API to do that for the time being, so you would have to do that manually for the time being again for.

B

It yeah we also have an API to actually kind of rearrange the web parts on your newly created page. Yes, so we miss a couple of key API, I, think structural basis across all your sites, exactly.

A

B

Once these DPI's become available, I think the scenario might become more physical. Today it is more one-off basis. You could do it, but it requires some effort. Yeah, absolutely.

A

Absolutely good, but I think that's it for this particular webcast into MSDN documents. You'll find additional, let's say, considerations and settings around hey: how do I control the modern experience in a site, collection or in a tenant level, or in a site and Anschluss in in the list level as well? We didn't tell them true in this webcast, because this is way too long webcast already, so we didn't want to extend the time time of the webcast either, but hopefully you were able to get a high level understanding.

A

What's the current status of this customization options within the modern experiences, and like mentioned so many times already, this is an evolving space, so there will be additional API additional capabilities, additional support gradually, as we move forward for introducing the modern experiences to share month online and eventually also to own premises for SharePoint 2016. It's because some of this stuff will be landing on the on the SharePoint 2016 at some point as well.

A

Any last words from your site, Bert.

B

Well, I would say really embraced the mobile experiences. We showed you today that you can't customize them. There are some limitations, there's a clear roadmap which will improve that story and for end users they just generate so much value and they're kind of a joy to use so restart them.

A

Absolutely absolutely there's a lot of benefits out of using the modern experience, there's a lot of new capabilities which are available which is not available in the classic sign, so please do evaluate them and start using them when it's suitable for you know down, but I think that's it. Thank you both for joining me and we'll come up with a new webcast. Sooner or later.