SharePoint PnP Demo - react-display-hierarchy

1. React - Display Hierarchy
react-display-hierarchy
Nanddeep Nachan (@NanddeepNachan)

2. Nanddeep Nachan
Consultant - SharePoint, Office 365, MS Azure
Speaker | Author | Blogger
C# Corner MVP
Microsoft Certified Professional
Certified Scrum Master (CSM)
Certified Professional Photographer
@NanddeepNachan
Nanddeep.nachan
/in/nanddeepnachan
nanddeepnachan
NanddeepNachan@gmail.com
nanddeepn

3. https://github.com/SharePoint/sp-dev-
fx-webparts/tree/master/samples/react-
display-hierarchy

5. deprecated
SharePoint Online
SharePoint List

6. var dataOne = [
{
id: 1,
name: 'Portfolio',
parent_id: undefined
},
{
id: 2,
name: 'Web Development',
parent_id: 1
},
{
id: 3,
name: 'Recent Works',
parent_id: 2
},
{
id: 4,
name: 'About Me',
parent_id: undefined
}
];
* Portfolio
* Web Development
* Recent Works
* About Me
array-to-tree(dataOne)

7. const initechOrg = {
name: "Bill Lumbergh",
actor: "Gary Cole",
children: [
{
name: "Peter Gibbons",
actor: "Ron Livingston",
children: [
{
name: "And More!!",
actor: "A complex tree with multiple
levels of children!"
}
]
},
{
name: "Milton Waddams",
actor: "Stephen Root"
},
{
name: "Bob Slydell",
actor: "John C. McGi..."
},
]
};
<OrgChart tree={initechOrg}
NodeComponent={MyNodeComponent} />

8. sp-pnp-js array-to-tree
react-orgchart
SharePoint Online
SharePoint List
Client-side web part

11. Company Management Hierarchy Project-based Structure Document Library Structure
Resource Hierarchy for Access Control Supply Chain Hierarchy Family Tree

12. THANK YOU
@NanddeepNachan
Nanddeep.nachan
/in/nanddeepnachan
nanddeepnachan
NanddeepNachan@gmail.com
nanddeepn