Using Client Side Technologies, like HTML, CSS, and JavaScript with SharePoint list and User Profile data to create a dynamic org chart in SharePoint 2013 / Office365

1. Confidential© 2015 Trellist, Inc.
Jennifer Kenderdine
SharePoint Services Leader
PRESENTED BY:
SharePoint Saturday Philly
March 11, 2015
USING CLIENT SIDE TECHNOLOGIES TO
CREATE A DYNAMIC ORG CHART IN
SHAREPOINT 2013 / OFFICE365
1

2. Confidential© 2015 Trellist, Inc.
Thanks to our Sponsors!
• Platinum:
• Gold:
• Silver:
• Swag:
• Venue:
• Coordinators:

3. Confidential© 2015 Trellist, Inc.
TriState SharePoint User Group
• Meet right here in the Microsoft office
• 2nd Tuesday of the month
• 5:30-8:00 pm
• Content for: End Users, Developers, IT Pros, Admins &
Architects
 Presentations, Demos, Open-Discussions
• More Info: www.TriStateSharePoint.org

4. Confidential© 2015 Trellist, Inc.
About Me
4
Jennifer Kenderdine
• Working with SharePoint since 2007
• Versions 2007, 2010, Office 365 and 2013
• SharePoint Admin, Designer, and Developer
• Passion for elevating the SharePoint experience through
Responsive Design and Client Side Rendering
• Find me:
 Twitter: @j_kdine
 jkenderdine@trellist.com

5. Confidential© 2015 Trellist, Inc.
• Client Side Rendering in Office365 / SharePoint
• Quick review of the requirements and resources
• Skills required to implement the solution
• Resources to implement the solution
• Full solution overview (Lots of Code!)
• Where to get more Information
Agenda
5

6. Confidential© 2015 Trellist, Inc.
Client Side Rendering in
SharePoint and Office 365
What is Client Side Rendering?
• Using client side code vs. server side code to change the display of
the data
 JavaScript, HTML, CSS
 Code lives within the SharePoint site
- Display Templates
- JSLink (replaces XSL Link)
 No solution deployment required
6

7. Confidential© 2015 Trellist, Inc.
Quick Overview of the
Requirements and Resources
Company Organization Chart
I. Hierarchical and Dynamic Display of Roles
• Any changes in the data will be displayed immediately
II. Clicking on the Role will display data about the role in a popup
III. Clicking on the Employee Name will display information about the employee in a
popup
• Requires connection to User information (I.e. User Profile Services, other HR database)
IV. Ability to Expand All and Collapse All nodes
V. Easily distinguish Parent roles from those that do not have child nodes
VI. Display various role types in different colors
• C Level, Director Level, Leader Level, Staff Level
VII. Easily distinguish interim and primary roles
7

8. Confidential© 2015 Trellist, Inc.
What skills are required to
implement this solution?
8
• SharePoint knowledge
 Understanding of the base SharePoint structure
- Location of Display Templates
 Object Model
- Programmatically accessing Sites, Libraries and lists
- Programmatically accessing User profiles
 Site owner knowledge
- Creating lists and libraries
- Adding list items
• JavaScript and JQuery
• HTML and CSS

9. Confidential© 2015 Trellist, Inc.
What resources are needed to
implement this solution?
9
• HTML Editor
 SharePoint Designer
 NotePad ++
 Visual Studio
• Browser
• Debugging Tools
• Google API Reference
• SharePoint API Reference
• Data to feed the chart integrated into SharePoint
 User Profile / Employee data

10. Confidential© 2015 Trellist, Inc. 10
Strategy behind the Solution
10
• The out of the box org chart interface does not allow for the popup displays
• Needed dynamic integration of multiple lists for the popups
• Google Org Chart API gave the most flexibility
 Display is created on page load, so additions or deletions are displayed on page refresh automatically
 JQuery and CSS could be used to change the look and feel
 Popups, and other links integrated without too much issue due to HTML integration
• Needed the ability to edit data and add new data on the fly – therefore SharePoint lists
made the most sense
• Display templates were used for single list data displays, while
HTML/JavaScript/JQuery/CSS were used for the org chart and employee data
displays where multiple data connections were required
• SharePoint Pages used for popups to utilize the integrated Modal popups
• Best to use integrated User Profile services which are synchronized with Exchange /
Active Directory. Data can be loaded easily using the CSOM.

11. Confidential© 2015 Trellist, Inc.
Full Solution Deployment
11
• Pages
• Lists
• Libraries
• Display Templates and
JSLink
• HTML
• CSS
• JavaScript / JQuery
reference libraries
DEMO

12. Confidential© 2015 Trellist, Inc.
Questions
12

13. Confidential© 2015 Trellist, Inc.
Reference Links
13
• Display Templates and
JSLink
 MSDN Article
 JSLink
 Client Side Rendering / JSLink
samples
• Google Org Chart API
• SP Services
 Get List Items
 User Profiles
- Search Principals
- Get User Profile by Name
• SharePoint Modal Popup
REFERENCES USED IN SOLUTION

14. Confidential© 2015 Trellist, Inc.
117 N. Market St. Suite 300
Wilmington, DE 19801
T 302.778.1300
F 302.778.1301
trellist.com
14