Like JSLink, display templates are new in SharePoint 2013 and SharePoint Online. They work in conjunction with Search Web Parts, such as the Content Search Web Part that comes with SharePoint. Display templates use HTML and JavaScript to render content and allow you to specify which properties to show, where to place them, and how to style them. By using these templates, you have an immense amount of control over search results and how they are displayed. Figure 2-8 shows a standard Content Search Web Part placed on a page.
ChAPteR 2 ■ IntRodUCtIon to ShARePoInt FRont-end SoLUtIonS
We can change the display template being used by placing the web part into edit mode and viewing the Properties panel in the web part tool pane. Directly under Search Criteria, you will find the Display Templates area. There are two drop-downs in this section that allow you to choose how the content should render: Control and Item. Figure 2-9 shows the Display Templates area and drop-downs.
Figure 2-8. Out-of-the-box Content Search Web Part placed on a page
ChAPteR 2 ■ IntRodUCtIon to ShARePoInt FRont-end SoLUtIonS
Each of these items is a template, and they work together to render content. The Control template provides an overall HTML layout for your content. You can think of it as a container to hold all the search result items. It’s also a good area to load any JavaScript or CSS that you would like to use in the search results.
The Item template provides the individual HTML for each search result item. This template also makes use of Managed Properties on the search results, and allows you to control which properties are displayed. When used together, these templates provide a complete way to render your content.
You can view the out-of-the-box display templates by navigating to Site Settings, and then Master Pages under the Web Designer Galleries header. This will open the Master Page Gallery page, as shown in Figure 2-10.
Note
■
In order to use display templates and the Content Search Web Part, you will need to ensure that the SharePoint Server Publishing site feature is activated. If your site is using a Publishing template, this should already be activated. this web part is also only available in the office 365 e3 and e4 plans, or the enterprise version of SharePoint on-premises.
Figure 2-9. Control and Item options in the Content Search Web Part tool pane
ChAPteR 2 ■ IntRodUCtIon to ShARePoInt FRont-end SoLUtIonS
Clicking the Display Templates folder will display another page, with all the current display templates organized by folder. The Content Search Web Part display templates that are all located in the Content Web Parts folder, as shown in Figure 2-11.
Figure 2-10. Master Page Gallery where you can find the out-of-the-box display templates
Figure 2-11. Display Templates and the Content Web Parts folder
ChAPteR 2 ■ IntRodUCtIon to ShARePoInt FRont-end SoLUtIonS
When you build a new display template, you will only work with HTML files. Once you upload the HTML file, SharePoint generates the JavaScript file for you, and this is what it uses when rendering content.
With this model, you don’t need to worry about the scripting required; you only worry about the HTML—
and SharePoint does the rest. Display templates use managed properties from the search results to render content. The template uses a token system to render the content, as you can see in the following code sample:
<a class="cbs-pictureImgLink" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.
defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_">
The token looks like _#= variableName =#_. You can create your own variables to store content to be used later in the template. We’ll look at these in much more detail in later chapters.
Summary
In this chapter, we looked at the differences between server-side development and front-end development and explored some of the components that you can use for your custom solutions. With the latest versions of SharePoint, Microsoft is really stressing the advantages of not using server-side code for your development efforts. When it comes to SharePoint Online, it’s not available to you at all! As you have read in this chapter, they have provided a lot of options to build custom solutions that do not rely on server-side code. All of these solutions utilize HTML and JavaScript, making these solutions easily accessible to anyone who is comfortable building web pages.
In the next chapter, we’ll continue expanding on what we’ve learned so far. We’ll look at the Content Editor Web Part and how you can place HTML content directly on a page. In addition, we’ll explore the new Script Editor Web Part, which can be used in conjunction with the Content Editor. We’ll use some of the code you saw in this chapter and actually see it in action.
Figure 2-12. Display template with an HTML file and corresponding JavaScript file
When opening the Content Web Parts folder, you will find a bunch of display templates. Each template has an HTML file and a corresponding JavaScript file, as shown in Figure 2-12.