Microsoft 365 Community PnP Customer Stories, 17 Oct 2017

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: SharePoint PnP Partner Story - aequos - Building SharePoint Online Intranet for IDRC

Description

In this SharePoint PnP Partner Story, we'll have a closer look on the PnP Intranet Starter kit and how aequos built an Intranet for IDRC based on this solution. PnP Intranet Starter kit is a modern open source intranet solution for SharePoint 2013, 2016 and Online.

A

Welcome everybody: this is SharePoint patterns and practices webcast or in this case it's more around or partners story. So distant. We can talk about IDRC, which is a customer case which has been built on top of the BMA started intranet, which has been developed by a friend Cornyn. My name is Lester. You wanna I'm, a Senior Program Manager from SharePoint engineering and I'll, be jumping in every now and then today on asking questions but I'll, let Dennis and Frank to actually go through and walk through.

A

What is the PNP store the Internet and how it can be used to have a real live customer story, but let's start with an introduction, so Dennis and Frank I think Frank is going to start with the introduction. Then we moved to Dennis so Frank, quick, intros yeah. Thank.

B

You thank you, as of my name, is Franco new and founder and CEO co, sentient that echos and I'm also an this development MVP. Thank.

A

You and then we have Dennis as well as the customer representative right.

C

So I'm Danny, thank you. I'm the little drone project manager for IDRC and I was the customer from that project. Excellent.

A

So now, like mentioned I, let Frank and corn Frank and Dennis to actually take over the presentation, I'll jump in and interrupt the presentation every now and then, if they're super super interesting things which we should be asking stuff but take it away. Denny I think you're starting yeah.

C

So here's the idea: RC stands for the International Development Research Center. We are a crown corporation in Canada. What we do we fund research in developing countries and we provide researchers with final financial resources, advice and training to help them find solutions to local problems.

C

The mandate for this project was to renew the actual intranet that we used to have which was Allen's intranet.

C

We had to leverage SharePoint technologies. We had to minimize the investment in both time and money for development, for developing a solution for the intranet I DRC's about five 350 doing daily users. We have about 50 contributors and the internet was released on June 12 2017 to create the intranet. We actually did an agile methodology project we built on iterative autonomy, automated deployment, we use SharePoint 2013 sp1. All the browser were supported, so Safari Chrome, I, 11 and Firefox, and we started the project with the PNP intranet solution from aqueous.

C

B

Thank You Danny Antoinette, just a quick recap on this solution, so the PNP Stata Antoinette was first introduced one year ago on September 2016. So basically it's a start up. Publishing internet solution force, posture point: it uses the classic publishing experience so in this solution. Basically, you are multiple navigation menus all driven by taxonomy, so you have a main menu, a header, footer and so on.

B

This solution is totally responsive, so it supports mobile mobile devices. For this one we used the bootstrap framework. It also supports the multiple languages, so the base the default solution comes with French and English languages.

B

For the technical part, this solution is poured by the the PNP tool so for the provisioning, for instance, we use the remote provisioning ensign for automated deployments and we all we use also the SP P n PG s, so the JavaScript library for for all the shop on communication requests its uses. Also modern web stack tools like typescript web pack and so on. We also used the Katya's for all the the UI and the component behaviors.

B

So by this way there is no server-side dependencies. So you all! You need is a psycho election and a workstation, and you can just deploy the solution. The whole solution without connecting on a shotgun server, so the solution runs like I said in a in a psycho election in as I another isolated site collection. So all you need is a blank psycho election publishing a phishing site and pin people shell command, let's, according to your target shop, one version and that's it so it was the 1.0 version.

B

Then we had a one point treat so with this version. We we've added a bot framework integration, so it demonstrates how to integrate about with authentication within your intranet within sharepoint, and also includes the support for sharepoint, 2013 and 2016, and the latest version. The current version is the 2.0 version released the last month, so September 2017, and this version is very particular because it we used uses the the design from IDC project. So then he will show you in a few minutes.

B

What is the the original solution and the main difference between the first version? It is about the multi-language, the multi-language support, so in this version we use one site per language. So, like sub-point versions do so, this is the main, the main difference. So you can get this solution on the the PNP github repository and it's free. So so you can use it for your own environment with no problem.

B

So I think the new we will present the original solution for ideas here in sure. So let's, let's denia, present present solution.

C

Alright, so thank you Frank I present you Mahalo Mahalo is the current entry at IDRC. Mohali stands for places it's in Swahili and also in Arabic.

C

So, like Frank said, this was developed using the shirt, the starter intranet PNP from top to bottom, so Mohali have a employee directory that is which is linked to the user profile in SharePoint.

C

We did a little tweak to that, adding some display, templates and also a end index, so you can click to get multiple names, so we use specific this taken place to display picture names, tiles and so on.

C

We have an Oregon decks, which is not a part of the PNP solution. It's actually a third party web part that we acquire and also connect to the User Profile.

A

C

Allows you to with the manager, position and assistant position to actually get a drill down of the current org chart.

C

We have an elf Center. We can actually contact as well and beam in Canada and being a government agency. We have to be compliant in French and in English, so the intent is available in both French and English.

C

Here is my name this one. Actually, the login button that we had, we actually relocated. The internet salute me every morning and asked me if I would like to accomplish some task being search. Driven intranet was a requirement for the entry, so the real-estate of the searchbox actually play a big role in that internet. The internet can be searched into multiple scope, so we have three scopes for intranet. For documents referred free people which are result as result type search results, I, don't remember you configuration and in the back end Frank.

C

What's the name of those one.

B

This is the control, but it certainly such navigation. So this is a you can control them by social syndication. So it's a built-in so point feature. Thank.

C

You here's the main navigation. The navigation is a functional navigation perspective from the information architecture, it's also driven by a term store in SharePoint. It creates mega menus with two levels.

C

Then we have the news section, which is the section on the Left top side up to ten news.

C

We also have events on the right side. You can actually add an event to your Outlook calendar as well.

C

We do some marketing campaign from the communication division when if the business requirement was actually dis, separate stuff, like career opportunities and acting from the main news, so we created a tabular navigation on the right side for both career and acting.

C

We insert the tweet feed and we also have some Quick Links, so we're in the first quarter, actually of the intranet. So for now the footer has being left empty, but we will actually create a survey pretty soon to get work on probably a fat footer that contains the information that users are looking for the most once you're.

C

Okay, so there's also search display templates for multiple type of license.

C

If you search for manual, it would actually get different this book and plate depending on the type of content, and it was also a custom search, refinement panel instead of being on the left side. Frank actually created that one, and so you can filter by content, which is pages PDF and so on, and you can also get a range from the a nice looking calendar from the mobile perspective.

C

The application rather quite nicely from mobile click and I always have the title: the search option and the menus.

C

We started the project with a custom brand like prepackaged branding and since we actually bought it, we kept it and it allows you to actually get some kind of my CSS pre-built in the solution that we have. So we actually leveraged the previous investment that was prior to actually get Frank on board for the solution. But we were actually able to leverage the investment later down. The road.

C

For navigation, Frank will probably cover a little bit of that later. But if we go on edit mode.

C

So there is actually a translation for that page, but if the transition will not actually exist, you would come here type to pay the page in French and then click create I'll actually create a new page in French, with a with ID that would be associated with the English version of the page since we're in the production environment I'm not going to save those changes and I believe that sums it up.

A

So a few points here from her to face up born again, so this one is saying on premises: SharePoint, 2013 environments, it's just that it's been a while for me to see that kind of a thing. Oh, what's wrong with that! Sharepoint! Oh! It's on premises! Yes of course, but it is a good reminder that this solution does work in 2013, 2016 and sharepoint online and it's the same. Modern web stack development in all 10:1. That's right, Frank! So there's a really difference from that perspective. So.

B

All the JavaScript code is a deployed store in this type library of the design collection. So you can upload upload new files or data solution without touched in the content types and so on the shop instructor. We have also a configuration list on the site collection to control the cache settings and navigation settings.

B

So this is the site, the site, content yeah, because because this is a JavaScript based solution, we have to control the performances we have to improve performances. So we with we have implemented cache mechanism. So then I show you the cache control. So if you say yes, we use the local storage to store, for instance, the navigation nodes are, and so on so.

A

B

Improves the performances absolutely.

A

And that's that's a really really good point. You had it in the slide as well and mentioned, and will back on the more technical stuff after this time as well, but the performance is really related key here as well. So, even though you are doing a client-side development, quite often people think that then I can I don't need to do. Caching, an answer is no. No! No.

A

You need to do caching, because, if you're running from a client-side, you can actually hit SharePoint really really fast and hard if you're always requesting, for example, taxonomy navigation terms, and then you try your navigation base. No, not that's just I would say even insane, because how often will the navigation chains well once then, maybe twice in bi-monthly, maybe I don't know or once a month it's not like.

A

You need to go in every single request and re-execute and check is the taxonomy navigation has been changed and those are the things what we people should be caching or if you have search treatment, results like in this front page, probably the news they are either search, driven or they're content driven results. You can actually cache them as well or do a cookie paste, let's say storage, so you understand that. Well, we have a news from the past, which is refreshed in every 30 minutes as an example.

A

If that's not a if that's sufficient I, don't know, there's multiple debates, but on the on the well refresh rate of these things. But the key point here is to remember is that the client-side caching is super super important to make the performance acceptable.

A

Future I think that's it. Let's flip back on the solids and I think Frank is going to do it quite as slightly more detailed on what's in the in the packets available from the PMP github repository. So let's flip back on the slides and continue from there. Okay.

B

Thank You Danny for for this presentation, just a quick, quick slide about improvements made from between the the public version and and the original version of the piece, a Taranto net and the version for IDRC. So, first of all, we've made a lot of improvements about the performances we will I a lot of the in the local storage of the browser to store useful values like configuration, values, our navigation nodes and so on. So we don't have to to fetch them every time we load, we load the page. So it's it's very important for performances.

B

Also, we turned on the the G sunlight support force upon 2013. So, if you don't know about this, this feature it allows you to to reduce the the payload size of you requests so to enable it you it's by default, it's activated on top 1 2016 and support online, which you have to turn down in a shop in 2013. So to do this just set a special editor in your request, so to give to enable it also, we we've added some new features like people directory complete a complete new search experience.

B

Also, some display templates for news and events and the the most important one complete invisible design, completely responsive design directly taken from the IDoc solution. So thanks to to IDC for for sharing, maybe the new you can can talk about your motivation to share this. This solution for to the community.

C

Yes, so we did a lot of research to actually before we start the internet, and we look at a lot of solution that were SaaS solution for sure. Internet and I was quite pleased actually fine. That people were really active in the open-source community about sharing their solution and I knew actually Frank from the previous SharePoint Saturday experience. I know that it was really good. I was actually try trying to contact him for this project, so I was able to actually contact them. We had a good discussion.

C

He actually show me his product and that totally aligned with what ideas is doing, which is helping the community and we're proud to be able to actually.

C

Add to the community as well, then.

A

I have to jump on this one, it's great to hear, because this is the whole point, why we're doing the PMP and the SharePoint patterns and practices, and we want to build the community on the common knowledge of the community as well. So it's it's excellent, hear those words from IDRC as well.

B

So, thank you, so I will show you, so the next slide is about the the the the difference between so you've seen. The original original solution from I, DLC and I will show you the public version of this antoinette, which is the PNP start of antoinette v2, so I will chip into my screen and I will show you. So this is the public version of the PNP start of antoinette. So, as you can see, this is pretty much the same as the ID SC solution. The main differences like I said, is about the language support.

B

So in this version you have one sub-site per language. So by this way it allows you to you to benefit of the Mui of SharePoint, so you can so webparts and so on will be translated automatically.

B

So this is the main. The main difference also like I, said we are integrated above so in this version you can activate about so it's here and it show you. This is not. The code is not include. The bot code is nothing coded in the solution, but you can you can get it on my github repository my only github repository and it show you how to to interact with eyeballs in an authenticated context, so in SharePoint Forex, for instance, I'm in support online.

B

You can just play with robot and do some research in your sub-point site directly in your shop and site. So this is a quick feature that you can use to improve the search experience. So you have a quick integration, a demo of distinguishing.

B

So this is basically the same. It's fully functional, so you can just deploy it and use it. You don't have to make any custom any further customization. You can just change the logo. Your background image and you're good to go. The deployment is just done a PowerShell and it takes about 20 minutes to deploy. So it's pretty quick and- and you can use it in a single site- collection isolate it. So there is no risk of conflicts with all other site collection or search configuration at academic configuration in your tenant or farm.

B

So you can get it. You can get this! This solution in the PNP repository and you have all the details to deploy it and all prerequisites to they pull this solution in you in your environment, so, like I, said, supports shop on 2013-2016 and support and with the same code base. So it's a very few of you, so you want to use it not. Is it eight to use it, and this is the list of main features of this solution and.

A

Obviously Anita chompin in here, let's go back on the. If you can go back on the poro, but yeah. No doubt Frank can absolutely help on getting this things up and running.

A

For anybody who is looking into that or people can actually look into the source code as well, if they're skilful enough, but can we get back on the on the intranet still on if you can share the back on the on the backdrop or oh yes, few questions here, because, obviously, if people are looking into having let's say, purposing or intranets in shipment online, that they would have a typical set of questions. First question laid it on the languages. Is that okay?

A

Are you using the multilingual capabilities within SharePoint, the no one who that completes blackout on my head? What's the what's the reparation sorry, variation.

C

B

Don't use variation because, as you can, as you know, violations rely on time and jobs. Yes,.

A

B

With this happen, Tonya you don't have access to time, observe so from a user point of view of Iassogna are very painful. If I can say for users, they have to wait as the translation for pages it's. No, it's not sustainable.

A

Yeah and absolutely agree on that. I just wanted to kind of address that question, because somebody might be thinking that a variation is the multilingual solution in SharePoint. Online answer is no, it isn't that's not really what it's for, because variation is a crate for replication of the here. Okay and replication of the content.

A

As long as you can wait that to happen, plus the fact that it's kind of assuming that the structure for English and French in this case would be identical, it doesn't really work that well, if you have a different content between deployment, is and even even I've worked in the past for larger, let's say global companies which have 300,000 employees even in that scale. Nobody has the resources to write all of their stuff in multiple languages.

A

It's just impossible, it doesn't happen, there's always the main language and then there are secondary languages and that's when the variation is not a suitable solution. It just means that in this case, this is a great solution, there's a a different people who would be managing French and different people who will be managing English version, and that's it good to go so.

B

Just to show you the translation mechanism so for every page is for each page. We have a special layout with a custom control here and you can just translate the page lets them on the English side. Okay and if I want, for example, in French, just go, and it will copy this page within the French side. So and then we have an association with a grid between the two pages and that's it that's very it.

B

So all the UI is controlled so by the Mui, so the language is controlled by the Mui because we're, for instance, we are on on the French side here and we'll be used, a special JavaScript library to control all the custom, libraries and so on. Yeah.

C

B

As you can see, all the the pages turn to French all the others and and so on, yeah. So.

A

B

Is basically the basically the the mechanism for for the multilingual, multi-language support and.

A

That's it that's a cute design, because Mike mentioned now now you can, you will have any very different people managing probably French and English content, because, most of all, especially if there's multiple additional languages, because there isn't that many people in the world who can write five languages as an example, so anyway good good. The next question. What I wanted to actually quickly tackle. Is that because you've got this question every single time your you have, we had this demonstration so you're using a custom master page. What now yeah is that recommended or not?

A

So now you can start and.

B

From my point of view for a publishing site, I think it's not it's not a shame to use a custom master page 14 site. We don't you, you don't have I, think you don't have to use a master page. But when you talk about internet defense, the first thing you want is that your internet shows the the brand of your company. So if you want to do this kind of design, honestly, it's very difficult to do without a custom master, page okay and especially if you want to do some some responsive design and so on.

B

It's very it's very, very difficult. So honestly, I try to not use a custom master page, but isn't just not possible to do this kind of thing. Yeah.

A

Just let me reiterate on that one as well, so customer master betas are absolutely supported in classic publishing sites. You can absolutely use them if you know the impact of that decision. That's what we that's, why we don't explicitly anywhere within our documentation, typically mention what is the best practice and what's not the best practice, for example related and monster, page users or not.

A

We say that if you can avoid them, it's worthwhile to actually avoid them, but again, if your business requirements mandates that you need to do something like this one, probably the custom masturbates is the easiest way and most cost efficient and most future friendlier way to make that happen. You just need to be aware that your custom masturbates might block some future scenarios, but that's just being aware of that and to be fair that the classic purposing scenarios in SharePoint Online they do quite often require a custom master page.

A

Now the modern purposing, which kind of is getting there with the communication sites, it's too early to yet to make any any final conclusions on that one, but that one doesn't actually support customers. The pages at all, so there's no way for doing customers debate is in communication science, but with classic buff missing, which we're seeing in here absolutely supported, absolutely can be used, which reminded me that I'll probably do a to-do list of myself that we should do some sort of a a intranet in their communication sites.

A

How can what's the possible currently webcast in the PNP, but that's a different topic, so let's get back on this presentation.

C

Question I would like to add that the solution is kind of easy to deploy and actually maintain and also tweak, if you need it not being SharePoint pure developer or a super admin, guy I can actually deploy a solution, may change to the code and and so on, so that was not too hard actually catch up and for those people who would actually struggle with the implementation of that I believe that Frank actually made available some really well-done document on.

A

His website, absolutely yes, yes, so please do check Frank's company website also for additional information on this. One absolutely good point. Thank.

B

A

Cute I think we can continue on the slides, I. Don't have any curve balls right now, waiting so feel free to continue.

B

So this is basically it you can see the the the all feature of the the PNP starter Antoinette's so feel free to try it in your own turn enter form, and if you have question not hesitate to to contact me directly or by the or by get up so.

A

Thank you once again, Frank and Dennis for presentation so and thank you. Frank I've been saying this quite a few times in the in the community course. Thank you for your contribution for the benefit of the community as well, because these kind of contributions help other people to understand the right ways of doing customizations as well sure if we are talking about classic boxing scenarios. There's the customers debates is a debatable discussion. You don't have to go there, but there's a lot of other goodies within the solution as well.

A

If you want to avoid, even though you would be building, let's say, collaboration, science and and the solution is nicely demonstrating, for example, the provisioning techniques, so that you can really really easily and fast set up your deployment but Thank You Dennis. Thank you, Frank, any less rhythm! You guys around this.

B

Dope we're.

A

All done excellent, so thank you guys for presenting at please have a look on the on the solution and the URLs for will be in the video notes as well. Please contact Frank if you need to have more information around how to set things up if the basic guidance and readme is is not sufficient, but thank you for this one and we'll come up with a new webcast. You know later Cheers, bye, bye. Thank.

B