Search Display Templates – Staff Directory

Ok now its time for Search Display templates, as I promised I’ll blog what I did so far in search.

First I really like what MS did to Search in SharePoint 2013, its really awesome , you can customize the results , refinements and many more.So let me start with what can we do with Display Templates.

As you guys already noticed, the search display templates are divided in to two parts, “Search” & “Filters“, depend on the requirement we need to work either of them but mostly it will Search where we have flexibility to edit the search results display templates (which is most common thing :)).

I’ll not list regarding how many templates or filters are there, but remember we basically need HTML for edit any templates in SharePoint 2013 ( you have already noticed that).

Remember: Never ever touch the JS files, it will screw up things, we can achieve most requirements with HTML template itself.

So to just give you an example like display Staff Directory in a table format ofcourse not loosing the coolness of what comes OOTB, first we need to edit the query to show only people for select People results from result source, and select property filter as”contentclass=spspeople” (you can copy paste it), after this the results will display only people results but its like one row and column.

OUTPUT:

Now its time to change display template that will do 2×2 table, you can any HTML editor but I did this using SPD 2013 as its easy to open the files.

First make a copy of Item_Person results template, then change the name to desired and look at the html you will see “if” statement with all the attributes that will be displayed and the conditions are in DIV, so if you want to customize the single item of the search results you need to add properties(it should match the internal name of the UPS Profile property) in that IF statement and make change to the DIV below code in the template.

Next to display in a table format you need make change DIV basically we will DIV as “tr” and rest “td” 😛 its that simple guys. Ok now make UserContainer as tr instead of DIV

" " 

Ok to make life look at the code below

                                
                                
                                	

                                  

                                        

                                    
 
                                
                                
                                
                                    
                                     
                                     
                                        

										
                                            

                                                _#= displayName =#_
                                              
                                            
                                        

                                            

 
                                                
 _#= displayJtitle =#_ 
                                            

												
                                            

 
                                                
 _#= displayDept =#_ 
                                            

                                    



                                 
                               

Note: I did custom properties like Company and Department in “if” statement and then made changes to the above code.

So the end out put is 🙂 Please comment if you have questions.