Microsoft 365 Community Community Demos, 28 Feb 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - Web part displaying hierarchical information from a SharePoint list

Description

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 28th of February 2019. In this video, Nanddeep Nachan (Sagitec Solutions) demonstrates how to build a SharePoint Framework web part, which draws dynamically organization hierarchy based on data on a SharePoint list.

Presenter - Nanddeep Nachan (Sagitec Solutions) - @NanddeepNachan

Code sample available from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-display-hierarchy

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

A

Thanks so, firstly thank you for giving this opportunity to present my work in SharePoint framework. So today this sample I'm going to demonstrate is about displaying the header information in SharePoint framework kind of a part which is probably stored in a SharePoint list. So before that something about me, my name is not 30 percent and I'm from Pune, India and I have been working with SharePoint of the 65 and microsoft visual over from that time, see shopkin MVP, Microsoft Certified CSM and also have published my first e-book on SharePoint people.

A

These are some social hurdles to get connected with me, so moving ahead for the actual sample, so I have been associated with SharePoint patterns and practices community since a long time with my smaller contributions. But this one is my first contribution as search for a safe one framework, so this sample is developed around the concept of displaying the header information stored in our SharePoint list, so it is developed using reactors and svff of Fortune 1.6, which was the latest available at the time of development of this sample.

A

So this sample can be accessed from this particular URL, which describes about how to install, configure and use this sample so sample also provisions the list as an asset which can be used as a starter point for start using this sample so going into the details of this sample. So what were the driving factors for us to implement this sample? So the idea behind you developing this sample is that we wanted to show the project based structure within each of the node in the structure represents a user or a department or a policy and procedure.

A

So by selecting that node, it will redirect to a specific page describing more about the responsibility is carried out by by an integer. So if we were looking out, firstly, something like an org chart which which is available in TAFE Dell, so that you can show the hierarchical data, but unfortunately there wasn't any direct hierarchical control available in office 65. You have fabric also, so we went ahead and we utilize of the NPM packages available to make this work.

A

So the intern packages use our s, VPN PJ's, which is deprecated now, but we are in process of updating our code for this. So this was just to simplify the common operations within the SharePoint and SharePoint framework. Then these second and PIM package. What we use is array two three, so that helped us to convert the plain area of nodes into one nested, this receptor.

A

So we have an array which is coming out from a SharePoint list and we are transforming that array into a nested data structure which then probably can be passed to a reactor or chart. So this is one of the NPM packages that is used and the last NPM package juice is the org chart which is kind of an visual component which helps for creating the organization charts kind of a data structure. So, for example, if you provide a JSON format, something like this and we use this whole chart react component.

A

So it will help us to render the data in in this particular format. So then, let's see like how the flow of this particular sample is so, as I said, we are provisioning and a set along with this sample, which will help us to get started. So it is a SharePoint list called as hierarchy, but in we are storing all the hierarchical information and then using SP PNP JS.

A

We are pulling the data from from there, particularly in a JSON format, and then we are transforming that JSON format, data which is a one one, dimensional data to two and three structure using this array to three NPM package, and after that we are passing on this data using or processing this data using the react or chart which will help us to display the or chart in a client side of a part. So maybe, instead of discussing this in the theory, let's see in the practical how it looks so let me just refresh this page.

A

So this is how the theoretical data looks like. So if I can edit this page here, we just have one property for this webpart called as list name here we can specify a name of the list wherein we are storing the entire data, and once it is done, probably will discard the change. So it will start showing us all the hierarchical data, and even this data we can associate it with any of the hue RL, for example.

A

If you want to show this to any of the oranges 20 of the URL, it can be directly done from here. So, for example, from here, we can now kind of mimic that this. This is representing any of the user or or a police or procedure, and we can link this to a page describing more details about it.

A

So then, just having a look at how is the backend data stored for this is that we have a simple title, then, a parent which is kind of an look-up on to the title, so that we can create an hierarchy of data and then, for example, if you want to associate this with any of the URL that is representing this particular entity, it can be placed here.

A

So since we have one URL representing this director of human resources, we can see that this particular lab graph is showing this node as nur erased, others that they are not you. They are not URL, since the URL is not mentioned over here, so maybe going back to the code.

A

So this code is again now using this org chart as the visual component for showing the organization chart and all of the data here is being pulled from from an service which is which is again using the SVP NPS to query the list and get the data.

A

So this service is pretty simple, that it just gets to the list and get the data for title parent, ID and and the other things, and then once we have that data here we are kind of kind of getting those into the hierarchical nose so that we can represent that in a one dimensional array, and once it is in the one dimensional array, we are performing that one dimensional array 2:23 using this array to tree in pin package and once it is fun form to the multi-line. One is a dimensional array.

A

We are stringify it using a JSON so that we can pass it through to the react component called as orchard and from there if it is been set to the react State and then that react state is used here to show the organization chart. So I am subtly surfing that was about how it has been implemented. We just go back to the slide for this closure. So then what are the practical scenarios in which we can use this as an example? So it is.

A

These are few of the practical scenarios in which we can use this as an sample. For example, if you want to show any of the company management hierarchy, then it can be used for, for example, if you want to show project based structure or maybe to represent a document elaborate structure in a SharePoint or if in case, we want to show the resource hierarchy for an access, control or supply change, hierarchy, or so, for example, if it can be used in a simpler way to show the family tree.

A

So, yes, I, guess that was all about this demo, so yeah. So thank you for giving this opportunity.