Using Client Side Technologies to create a dynamic org chart in SharePoint 2013 / Office365
2 likes2,285 views
The document details a presentation on using client-side technologies to create a dynamic organizational chart in SharePoint 2013/Office 365, emphasizing the requirements and resources needed for implementation. It outlines the skills necessary, such as SharePoint knowledge, JavaScript, and HTML/CSS, as well as resources like HTML editors and the Google Org Chart API. The presentation aims to provide a solution that allows for immediate display of data changes and dynamic integration of multiple lists for enhanced functionality.
Using Client Side Technologies 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