The Problem
This past week we had a request from a client to display a list of employees to call based on a selected department. They asked that the menu specifically be displayed on the left side of the screen with the department users displayed in two columns in a box like display. They also needed to be able to manage not only the users and their information, but the departments as well.
The Solution
We needed some custom lists to allow the client to update their own departments and call lists. We provided a person link field to help with photographs, along with some custom fields that the client could use to better explain why that particular user should be called.
The challenge came in both the menu and the custom display. For the menu we utilized a content editor web part that linked to a custom html page. This custom page grabbed the department list and structure from the SharePoint API for lists and formatted it utilizing some custom CSS and JavaScript.
Clicking on a department would push that selected department into the query string which would give us a way to determine which users to show. We used a Query String Filter Web Part on the page to facilitate sending the values to our display web part area which was linked to our Who To Call list view.
To achieve a customized look of this list, we took advantage of a JSLink setup which allowed us to customize the list view to suit the customers needs.
Bootstrap provided us some layout options to achieve the look the client desired. Adding the JavaScript file under Master Page Gallery then Display Templates as a JavaScript Display Template allowed us to then use it as a JSLink file for our view.