Microsoft 365 Community SharePoint, 19 Dec 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint modern page tutorial: Tour sample web part

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on December 19, 2019.

In this 13-minute video, Federico Porceddu, SharePoint/Office365 Technical Architect - Avanade Advanced Technology Center, Italy, configures an open source SPFx React web part used to build a dynamic guided tour of the various elements on a SharePoint page. Information about a selected element is displayed in a pop-up box or "modal." Within the modal, the user can elect to view the next or previous element in the tutorial. On page tours are a quick way to acclimate the viewer to the elements of a page. For page owners, this is a quick, contextual and low-cost tutorial solution.

Presenter: Federico Porceddu (Avanade) | @FedericoSPDev

Supporting materials:
• Sample code - https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-tour-pnpjs
• Blog Post: https://www.federicoporceddu.com/2019/11/23/sharepoint-modern-page-tutorial-an-spfx-tour-sample-webpart/

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

A

Our body, my name, is Federico porchetto nice to meet you I'm, a senior developer in Avenel Italy, actually embedded in Cali in Sardinia at the Avila that once said the country center, and here you can find my contacts. That's good today. I, shall you on SPF fix webpart, allows you to build a guided tour inside our shop point more page using an obvious solution, namely the reactor GS.

A

Let's see together, general needs. Usually suicides are user friendly, especially motor ones, sometimes, especially in the context of adoption of a new site like a new modern Internet. Is it is good to offer the users the possibility of having a page guide like a tour or a tutorial and to improve site adoption. You could create a video guide or a well explained documentation. However, some user don't do not have the time to read documentation or watch the video they will just like to use the new site.

A

So for this type of and users most of them, you can create a dynamic tour, so user while can use the new site while learning and all feature of the new site. Let's see what experts are should be, so when you start to a model will be displayed with a description of the highlighted area and you can go to the next step or back navigating inside the page. So the user will see the description and we let the opportunity to preview the advice.

A

What the publisher for a forum building this the sample I made some implementation and design choice that they want to share with you. This web part merely illustrative or we can sit on top of SharePoint framework, so how to use and how to ascend with custom, render the property field collection, data from PMP and SP fix property contours and how to retrieve all SP fix were part in the current page using p.m. PG s and how to include external react component.

A

Like react gia's the solution, my choice is to persist the configuration of the page in the web property itself without using our centralized support, custom list, I studied for educational purpose, obviously because I wanted to depend the property collection that property control.

A

What about the property pain? Yeah the prototype in allows you to choose the web part from a list of all webparts on the current page, specify at the city text like a step description, the sorting at the warden according to which it will be shown in the tutorial and enable or not step with it, or there are processing costs. Having made this choice so as a pro, you can use this webpart multiple times into the same side.

A

For so, if you have a lot of pages you wanted to implement at or under course, if you delete the web part instant, you lose the tour configuration. A real important side of the solution is the Dom dependency is a critical point so like to talk to critical points and future improvement solution. The solution using react to GS this opus resolution as a pendency on the dome of the page.

A

So what it did is try to minimize it using the data tag, data SP feature instance, d and taik about the fact that every where part has one, but obviously this could case a solution break to moon tomorrow. If tomorrow, door will be modified, and the other critical point is that the tour consists on the body of the page, so you can define a tour for web parts and not for the chrome layout like ad and footer, which live off to the page. Obviously, this aspect limits the solution, but, as usual, man is a sample.

A

So please and waiting for your suggestion to improve and discuss the solution. Let's good demo time, we can see this Web part in action like this track. Here we are so, let's look at it. Works applied to this really cool side. It is the landing taken from the shore point, look boo sample and what you can do is start with a configuration. The tour this is the web part is a simple button and the configuration okay start the page and we can show the property pain and there are three properties, but only button labels.

A

So we can change the name of the button and subtitle, obviously, and the most important part is the configuration step option to show our property paying fee collection data. This is the property pain from user per component and in the first column there is the vapor list. So you can select the web part from the current page. So here you can find or web partner, obviously is it is dynamic. So if you add a remove web party change.

A

Second column is the description, and here you can go to use your en syrie advice. For your end users, the third column is the position, the orders, so the tour start in disorder SOE and you can enable or disable the status you can. You remove a stop step without deleting of configuration.

A

Let's see that report in action. So, for instance, we start with the first action and I think it's a really cool. This result because I, like it very much this approach in it is a rat jazz, is well integrated in a super page, so you can go, you can see the model and the relay and the Skip sure you're, choosing your parallel, obviously and go to the next step or clicking the arrow or just using the keyboard.

A

The next and back and I think user can improve the current page, not approve the can learner and guided the current page, so they can stand. Where is my tools? Where is my documents and I? Think this approach is quickly and with a lot of epicness? So if you want so to add- or is it connection, if you want to add another step, it's easy because you can modify these properties and just use the same property pain.

A

And up here, so you can choose another web for like recent documents, for instance, this is the present documents tabs.

A

The tests and the position, so you can use like these and, for instance, activate all previous steps and save a let's start again. The tool and this from my carny configuration let's get and in the court, so you we can see mutation and would like to deep just the get reports pitted. This is in the tour webparts. So, with this meter, I can retrieve the current page using p.m. PG s, obviously, and just navigate with some for each in Section columns and retrieve old controls and put my state from so I.

A

You state and I use this event for the property paying coffee. We should start this haven't fine when you open the right property, pain and so I call make a true apart and set the load indicator force. A lot in filter indicator. It's really cool, because in the auto box offered from the property pane, you can specify a loader and load akin the nickel to the daytime, and if you want to show the low load indicator or not so this is the load indicator, be checked.

A

So when you start edit, okay, when you started it with our refresh.

A

Okay, because fire only the first time- and we are the easiest, loader and I think- is a call it use. This loser.

A

Yeah, we can see my custom render presentation for this tab because of a need more space to write description, so the property payin collection that use all the textbooks and I would like to use this area and I did the custom renderer. So this is the way and just implement the own update. Events on and I will change events sorry and on update for make. This is the information to the property page data control.

A

The second class is the tour t6.

A

Okay and I would like to show to you the competitive date in these react events, I just call and to thrive the tour that are inside the property of the web part. So using this Vinton I can get settings and the react gia's component used to property the selector, and this is the Dom dependency, so I designed everything in this way, the term dependency, because I need to retry the Weber today the web part is a city, and this is the content. So this is the description back to the web part.

A

This is how to use the comparator, and so in the company of the etiquette or the configuration and bind to the steps with a state variable and I think that the code deep is a fish and is all from a side. So thank you. A lot full rotation.

B

Really great actually to stuff fredericka and like, like mentioned already by Frederica, the really the key challenge of this one I studied it actually acts as the dome would be an API, so debates demand. So whenever there will be changes potentially on the dome structure, it might actually break the functionality. So people should be aware of that.

B