Microsoft 365 Community Community Demos, 12 Feb 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Call Demo - Latest new capabilities in modern experiences - Feb 2019

Description

This community call demo is taken from the SharePoint Developer monthly community call on 12th of February 2019. Demonstration covers the following capabilities, which were released early 2019 for the modern pages and experiences: Mega menu, site header, footer, custom title region, section backgrounds, custom thumbnails etc.

Presenter - Vesa Juvonen (Microsoft) - @vesajuvonen

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

A

B

Demo is actually work sure what are the more important experiences and enhancements which we have been releasing within the past two weeks and for some of you this might be a recap on the on the plot post and what we've been releasing in the tech community, SharePoint blog.

B

But let's actually have a look on those in practice, so you'll see how they actually work in practice and how you can modify them and we can have a discussion in our window around those capabilities and in the second demo which I get to after this one is around the upcoming self-service provisioning service and I'll, explain what it is and the timings when we get to that model. But anyway, let's talk about the modern portal experiences.

B

So I wanted to have two slides first here which just to explain what had what were the announcements now so, first of all, and there was announcement on 31st of January around the mega menus site, Harold's and footers, which are now rolling out. They are going that they should be available now, if you're in first release. Tenants.

B

For example, in my first release they announced which I'm going to use as a demo and woman they are available already and they will be then rolling out worldwide later in March, and this means that you can actually use the mega menu option. You basically have an option of using the in quotes the classic menu or the classic style of a menu. Well, then, you can select the mega menu way of rendering or sorry and then there's a option of defining the header and I'll get back on that.

B

You'll see that one in practice pretty soon so you can actually adjust the header size and to be a standard or compact. We might actually introduce additional header sizes in future, so you are able to then adjust the rendering logic of the site and then there's a the footer functionality in which this around the fact that you're able to define a standard footers inside of the content. So basically, these are right now only for modern pages but you're able to add static links.

B

There you're able to add images there you're able to add text in the footer section as well. Now let me actually show this one in practice. Well, actually, let's go to the second demo as well and second slide as well. This is how well I prepared for my demo and the second thing what I want to actually show in practice on the demos. Demos is the one which we announced yesterday, which is around the modern, pates and Huntsman's, and this is also available right now already into first in target release.

B

Tenants basically, first release tenants and it's actually planned to be rolled out by end of February worldwide, so relatively fast rolling out and what that one actually has, and what at the new capabilities is the custom title region. So you having different options of defining how the page header section is getting rendered. You can use the one the standard one, which was there already more than you, can use the the color blocks and all of that and we'll see that one in practice in a second.

B

You can also use the section backgrounds which actually was listed on another one as well, and you can do custom, thumbnails and custom description before the bait is, in the pages metadata, so kind of a classic scenarios, which are then unplugging people more and more to move from the classic pub losing to the modern purposing. Now that the what and publishing is more and more enabling and donated capabilities now, let me actually demo both of these in practice.

B

So let me jump to my demo tonight, and this is just a random III turn and I'll come back on how these sites were created slightly later now. These are basically example, sites based on the lookbook. If you are familiar with the SharePoint look look, which is a super useful resource. Let me actually show that one in practice.

B

So if I search for SharePoint lookbook, you can actually find a site owned by our SharePoint design team, and we have a quite massive SharePoint design team now adays, which is responsible of defining the look and feel and the graphics and the experience is within the modern SharePoint and they basically then created a a ship on to look for ignite 2018, which is then a great resource of getting innovation around the different kind of sites.

B

You can actually build using a modern shape one now these sites like set in here, are basically using the Luke to look and feel, and these are coming from the lookbook. So we can use, for example, the marketing the site as an example and when we start testing the branding capabilities now in here as an example. So let me actually go to the site settings and let me go change the look option and this is the new chance to look functionality which you can see here.

B

So basically, we have a different way of managing the or we are creeping, the all of the branding capabilities in this group and then from here we can select, for example, the theme in my case. My tenant is full of themes and there's an example themes and example, mock-up themes for contours or whatever companies we can actually define a header section.

B

We can define the header section and we're able to set those settings in the header and come back on the on those settings in a second, we can define the navigation within my whole case. Right now is the the make a menu style, navigation or, but we can also fall back on the classic, so you can actually absolutely control or do the similar rendering as the classic style as we used to without making any oh- and please remember, to meet yourself in your joining under call. Now. How do we get to make a menu?

B

You need to be in a target at release option right now. This is going worldwide relatively soon. So now, if you only have a one level of navigations, then you don't actually see the make a menu rendering style. So that means that if I, if I click apply- and let me actually close this one, so you need to make sure that you have a three level three level navigation section in your navigation and after that, your menus are getting rendered as a mega menu.

B

So it's basically it's just a matter of having enough links to be able to render then your menu as meka menu, so it is static links by default in the recommend. Now. The second thing in here is really around to cite a slide here, so let's actually modify its life at this side. We want to actually change the look and feel understand a slightly more refined design. We can modify our best at local here, so we can actually modify that easily from the header section.

B

We can also choose if the header is standard or if it's compact and compact basically means that it's rendering in a smaller area and obviously based on your feedback in the future. We might have additional options in the header, rendering still the make a menu, and everything else remains the same. But if you have a look on the standard is much wider and the search is in a different location.

B

If I do apply, you can actually say that the search with the compact menu actually close, that is on the same level as the following on search sites, so we're basically squeezing a slightly the size right now. Now, let me go back on the change, the look and the header options. We can also define at the background so which is coming actually from the theme.

B

So, depending on the theme of the site, we were able to then use the background and define the background for the site, which makes a lot of sense now now, in my case, I'm actually gonna do the contoso electronic marketing, because I want to change the header to use a orange background. So we get nice. Look and feel like we have in the in the SharePoint loop and that's the header section. Now the navigation was basically going to make a menu and cascading.

B

We might have future options here and future settings here as well at some point, and then we have the food or section in here. So let me actually say whatever I was doing here. Let me scroll down, so you can see that there's a desta standard feedback and get mobile app, which, by the way, the feedback, menu and button you can actually nowadays set that to be disabled in a tenant level and it's not being rendered in the modern pages.

B

Now, if I scroll down, we can actually see that there's a footer and you can actually see that even to make a menu sorry, the feedback menu is getting hidden, so that is getting now fixed from a rendering perspective. Now, how do we actually then modify this footer and what is the footer? Well, first of all, it's really important to understand that now that the footer capability is getting rolled out, it is enabled by default for communication sites, and this might be slightly confusing. The feature crew made a decision around this one.

B

So by default for every single communication side it will be enabled and I think that's that's included in the announcement, but just to make sure that you are aware how to control that we also have a documentation in the SharePoint.

B

If dogs around the SharePoint site, footer and in here we are also making sure that you're able to well, which we show you the PMP PowerShell commands how to control is the footer enable or not, so by default, the food will be enabled for every single communication side when it's getting rolled out, but you can write a PowerShell script loop in your site's and then set the food or enabled Falls, and that will basically then make sure that it's it's not getting enabled.

B

Now let me get back on the contoso land market marketing page and let's actually modify the slightly the footer. So let's go to the footer section. We can control the visibility, that's basically the same as we can do with the with the PowerShell. Let me actually apply that so we get the footer available.

B

Do I need to move okay, there's two footer there we go and then I can actually upload a local in my case, I'm gonna, just upload, for example the contoso logo. There that's pretty nice-looking cantos logo defined from this one, we're able to define food or name disabilities. So we can say something like contours or rocks, and we can actually say that being a static text and then on the menu and then on the food and navigation link. We were able to start adding navigation links in here as well.

B

So if you do something like SB, BMP, SharePoint tea and be adding that one there, we can add another one as a static link. Aka ms v PMP. Let's just call support and let's add one more: oh, let's add one more, so we can actually see that there's at least three of them: SP P and B tools. What are the typical links? What people are having in footer and then let's apply that let's save apply there, we go and close, so we can actually see that we have a SharePoint BMP link.

B

We have a supporting and we have two links in the menu and now that we start with a and one the basic setup of the of the footer is relatively simple. As you can see, they are static links, there's no mega menu capabilities right now in here, but the browser, those are being thought of already. So we might have a more expanding or bigger menus or footers in the future here as well.

B

Now, if you would need to have, for example, a custom folder which shows links based on user profile attributes or on which- and although the links might be dependent on the organization where user belongs to, then you would fall back on the SharePoint framework and then you would implement your stuff using the SharePoint framework settings. The setting the footer settings are basically on the site site level. So these are not getting leaked. They're not basically elaborate they're, not tenant level settings and they are only on the site level.

B

From this perspective, at least when we start with. So that's that's a important now.

B

What else did we want to actually show? So, let's have a look under timing.

A

There are a few questions in the chat area is about the ligament. Maybe we can absolutely share them and try to give an answer. The very first one I saw is: where are the links stored for mega menu and footers different location compared with navigation or same location, but with a different approach? So they.

B

Are actually stored in a navigation collection, so they are actually, as the web navigation objects now right now there is no direct access to that navigation entry in the season API, but you can use REST API and to the in today's a SharePoint dev weekly. There was an article from unloop static from content and code where he actually shows how to manipulate these things using a REST API, so I would definitely double check that article from Anoka so really good. It's good.

A

So about the upcoming question, which was are those links configurable with the dpmp provisioning engine? Let me say that we.

B

Can open it not yet not yet we can work on a basically one of the key players in there. Well police are asked in my designer. Let's put it this way: well, not only Justice game designer for the provisioning engine, but we've been now concentrating on the self-service provisioning in total.

B

But right after we get that one out for a preview, then we will start working on a new version of the engine as well and the provisioning schema and at part of that schema we will then support the footers and headers and few other things which are in pipeline right. Paula. Yes,.

A

And I'm really looking forward to start working on the next the release of the schema. Yes, a few more very quick question: what about security, trimming, audiences and culture in the mega menu and in the footer links? Is there anything.

B

Right now well, right now, as from a functionality perspective, these aren't just aesthetic links. So there is no accident, there's no permission. Validation in this link.

B

So is there something coming well, that's always depending on atom and that's always dependent on how many customers are actually asking those things, and is it reasonable to implement that now you can implement some of these kind of capabilities using SharePoint framework using the header and footer placeholders, and we are looking into having more placeholders in the future, so potentially might actually have a placeholder for navigation in the future, not that you're overriding the whole navigation, but you have a placeholder to go inside of the navigation to add personalized links, which would be then more easier way for you to get access on the navigation elements rather than overriding the whole navigation section, which hopefully makes sense, and that's that is absolutely in our pipeline and I.

B

One of the key things for the modern portals is that we need to enable more more placeholders and customers. The extensibility points, not customization, not a sensation. Mass customization point extensibility points just to make sure that I'm using the right terminology so anyway,.

A

Cool I don't see any other youjin question in the chat area, so maybe we can move.

B

On around it, this topic- yes, indeed, no, ok, so pretty cool looking site, and we wanted to also have a look on the modern pages and huntsmen so custom, title regions and section backgrounds, and all of that, so let's actually create a new page here and this slide. So if I add a page, it is obviously adding a a modern page on the side and and then I can modify this. Let me actually upload an image. For example, let's go one step up and some cool image. It actually was that a big enough.

B

Let me do that and then we can always modify the image on the right level and then we can start modifying how the bates hitter section actually is getting rendered. So obviously you don't have to use an image and you can get rid of the whole image and then we'll only have a page title and that's it and we could have a custom page really in all feel really important its article, even though, in this case this is actually a page.

B

So you don't have to have a background there. You can have a background there using the image and a title, this kind of the classic static, rendering option which we had for the modern pages. Already. The new options are then using a color clock, so you basically have this color block option and I can do something like text above the title BMB demo page, so we can actually make it more descriptive. We can add additional texts here as well.

B

I can also stand there tad if that makes more sense from your branding perspective or I can put it on the left as well. No rights and alignment. Well, that's a decision by vampire somebody show publishing date. We could actually do that as well. If we want to have an alternative text for the image as well now we can also do overlap, which basically means that we're overlapping then on that image, which is on the base as well. So now you have multiple options and then available on the page.

B

Now let me actually use the color clock and there's a huge section, obviously on the page, but in my case that's completely fine. Let me also do here, as let's add, actually some text and let me actually copy some lorem ipsum from.

B

From the text, and once again here, we go get some content in here we could have some content super important article. We could absolutely have multiple layouts and sections. We can do imitates on one side. We can do sections on other side, let's actually upload a one image. That's super important looking image.

B

Let's add that one on the page, let's add additional text on the base on the left sides- that's aligning nicely then there and then, let's close up the page with a full page text section from there and then the the new thing which is now getting rolled out. It's also that you're able to control the background colors of the section and what it means is that you're able to then use the theme color based colors, which are basically coming from the theme of the site and use that in the sections of the page as well.

B

Maybe the the full orange is quite hectic. So let me do a slight color there I'm not sure. Is it how visible that is for the other side of the screen and let's do publish obviously I probably seen this already. So we can actually promote this. We can post a news as a news on a page I can click promote option and I can do an email and then I'm basically sending this as an email to somebody, it's a nice-looking email than in inbox, which is then saying check this out check this out.

B

We in inside of the ship on the engineering we are using this actually quite quite a lot, so all of our communications nowadays, the in quotes official communications, metrics and progress and everything else that's being reported as a news articles and then we're promoting those using the email based promotions as an example, and obviously it's getting promoted on the protoss as well. But that's it. Let me close that one. It is a nice pretty nice. Looking page, we have commenting functionalities.

B

All of that and people are able to like and add comments on the page as well, so pretty nice looking getting experience, which is fluent, it's fast, no push backs, and it's performant as well.