Welcome!

Agile Computing Authors: Liz McMillan, Elizabeth White, Harry Trott, Ilya Bohaslauchyk, Prince Kumar

Blog Feed Post

For tips for using jQuery with SharePoint Display Templates

In preparing for my SharePoint Display Templates talk (#SPC3000) at SPC14, you'll be seeing a lot of posts from me in the coming weeks about the components that make up my demos.  Today, I wanted to talk briefly about using jQuery with display templates.  Display templates are really nothing more than JavaScript so using jQuery seems natural. However, in my experience with them, there are a few things to be aware of.

1) Don't assume jQuery is loaded already

The SharePoint product team has managed to do some amazing client-side things without using a single line of jQuery.  Out-of-the-box, you might find it gets loaded on occasion by certain web parts.  For the most part though, you shouldn't have any expectation of it being there.  When you start working with display templates, you might notice $ is defined, but it won't be what you think it is.  If you aren't sure it's loaded, you can always check the developer toolbar on your page.

DisplayTemplatejQueryDeveloperToolbar

That means you need to load it yourself.  For most of you, your first option is to include it in your master page. However, if you want to make a display template that doesn't have any external dependencies on the branding, you can opt to load the script yourself.  Display templates have a method called $includeScript to help you load external scripts.  The first parameter is always this.url.  In this example, I uploaded my jQuery file into the same folder as the rest of my display templates.

$includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/jQuery.2.0.min.js");

You can also use this with a CDN if you prefer.

$includeScript(this.url, "https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.0.min.js");

If you prefer, you can also register scripts with SP.SOD.

2) Know how to get element IDs

When learning about display templates, I find that one of the easiest to understand is Item_TwoLines.html.  This particular template does a good job of showing how IDs are generated and rendered.  Most templates follow this basic premise.  First generate a unique id for the display template using ctx.ClientControl.get_nextUniqueId() and append a meaningful string to it.  In this case, it generates an Id and appends _2Lines_.

var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_2lines_");

That gives us the base id in which all subsequent controls will use.  For example, the encodedId might look something like.

ctl00_ctl53_g_4c262258_fbac_4368_83cf_626d56131ca1_csr1_2lines

To generate the element ID for the div containing everything in the display template, it appends to encodedId with another string.

var containerId = encodedId + "container";

This gives us an id for the div like the following.

ctl00_ctl53_g_4c262258_fbac_4368_83cf_626d56131ca1_csr1_2lines_container

The display template then uses that generated id when it is rendering.

<div class="cbs-Item" id="_#= containerId =#_" data-displaytemplate="Item2Lines">

Now, you might be thinking, ok great, I can work with that Id and do something.  Maybe something like this even.

$('#' + containerId).append("<p>Really good search result!</p>");

You can do that but only at certain times.  Read on...

3) Don't try to access the DOM in the middle of your display template

What do I mean by that?  Let's look at the rest of Item_TwoLines.html.

<div class="cbs-Item" id="_#= containerId =#_" data-displaytemplate="Item2Lines">

    <a class="cbs-ItemLink" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_">

        <img class="cbs-Thumbnail" src="_#= $urlHtmlEncode(iconURL) =#_" alt="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureId =#_" />

    </a>

    <div class="cbs-Detail" id="_#= dataContainerId =#_">

        <a class="cbs-Line1Link ms-noWrap ms-displayBlock" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">_#= line1 =#_</a>

        <!--#_

        if(!line2.isEmpty)

        {

            // don't use jQuery here!

        _#-->

        <div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_">_#= line2 =#_</div>

        <!--#_

        }

        _#-->

    </div>

    <!--#_

        // don't use jQuery here either!

    _#-->

</div>

Display Templates let you do some old school classic ASP style spaghetti code.  So you might think what if I try to reference an element inside that if statement or maybe you just add a new script block past the end of the last div.  You can try it and your script will execute, but your jQuery won't find anything when you try to reference an element by id.  That's because it's not on the page yet.  If you look at the script that is generated for the display template, you will see that all of your HTML is pushed onto the ms_outHtml object.  This allows all of your display template HTML to be pushed onto the DOM at once in a more efficient manner.  How do we work around that?  Read on...

4) Use jQuery inside of OnPostRender

Any jQuery manipulation you want to do really needs to occur in a post render event using AddPostRenderCallback.  You just register a function and this will get executed when all of the HTML for the display template has hit the page.  Think of this is as your $(document).ready() of display templates.  Take a look at the code snippet below to see how we would have executed our previous example.

AddPostRenderCallback(ctx, function () {

    $('#' + containerId).append("<p>Something</p>");

});

This will execute the line of code inside the function once the display template has rendered and then you will get the expected results.

 

If you are just starting with display templates, hopefully you have found these quick tips useful.  We'll be covering this in more detail at my session at SPC14.  I hope to see you there.

Follow me on twitter: @coreyroth.

Read the original blog entry...

More Stories By Corey Roth

Corey Roth, a SharePoint Server MVP, is a consultant at Hitachi Consulting specializing in SharePoint and Office 365 for clients in the energy sector. He has more than ten years of experience delivering solutions in the energy, travel, advertising and consumer electronics verticals.

Corey specializes in delivering ECM and search solutions to clients using SharePoint. Corey has always focused on rapid adoption of new Microsoft technologies including Visual Studio 2013, Office 365, and SharePoint.

He is a member of the .NET Mafia (www.dotnetmafia.com) where he blogs about the latest technology and SharePoint. He is dedicated to the community and speaks regularly at user groups and SharePoint Saturdays.

@ThingsExpo Stories
SYS-CON Events announced today that Massive Networks will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Massive Networks mission is simple. To help your business operate seamlessly with fast, reliable, and secure internet and network solutions. Improve your customer's experience with outstanding connections to your cloud.
SYS-CON Events announced today that CAST Software will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CAST was founded more than 25 years ago to make the invisible visible. Built around the idea that even the best analytics on the market still leave blind spots for technical teams looking to deliver better software and prevent outages, CAST provides the software intelligence that matter ...
Everything run by electricity will eventually be connected to the Internet. Get ahead of the Internet of Things revolution and join Akvelon expert and IoT industry leader, Sergey Grebnov, in his session at @ThingsExpo, for an educational dive into the world of managing your home, workplace and all the devices they contain with the power of machine-based AI and intelligent Bot services for a completely streamlined experience.
Because IoT devices are deployed in mission-critical environments more than ever before, it’s increasingly imperative they be truly smart. IoT sensors simply stockpiling data isn’t useful. IoT must be artificially and naturally intelligent in order to provide more value In his session at @ThingsExpo, John Crupi, Vice President and Engineering System Architect at Greenwave Systems, will discuss how IoT artificial intelligence (AI) can be carried out via edge analytics and machine learning techn...
SYS-CON Events announced today that Datera, that offers a radically new data management architecture, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Datera is transforming the traditional datacenter model through modern cloud simplicity. The technology industry is at another major inflection point. The rise of mobile, the Internet of Things, data storage and Big...
In his session at @ThingsExpo, Arvind Radhakrishnen discussed how IoT offers new business models in banking and financial services organizations with the capability to revolutionize products, payments, channels, business processes and asset management built on strong architectural foundation. The following topics were covered: How IoT stands to impact various business parameters including customer experience, cost and risk management within BFS organizations.
SYS-CON Events announced today that CA Technologies has been named "Platinum Sponsor" of SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CA Technologies helps customers succeed in a future where every business - from apparel to energy - is being rewritten by software. From planning to development to management to security, CA creates software that fuels transformation for companies in the applic...
SYS-CON Events announced today that Pulzze Systems will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Pulzze Systems Inc, provides the software product "The Interactor" that uniquely simplifies building IoT, Web and Smart Enterprise Solutions. It is a Silicon Valley startup funded by US government agencies, NSF and DHS to bring innovative solutions to market.
From 2013, NTT Communications has been providing cPaaS service, SkyWay. Its customer’s expectations for leveraging WebRTC technology are not only typical real-time communication use cases such as Web conference, remote education, but also IoT use cases such as remote camera monitoring, smart-glass, and robotic. Because of this, NTT Communications has numerous IoT business use-cases that its customers are developing on top of PaaS. WebRTC will lead IoT businesses to be more innovative and address...
WebRTC is great technology to build your own communication tools. It will be even more exciting experience it with advanced devices, such as a 360 Camera, 360 microphone, and a depth sensor camera. In his session at @ThingsExpo, Masashi Ganeko, a manager at INFOCOM Corporation, will introduce two experimental projects from his team and what they learned from them. "Shotoku Tamago" uses the robot audition software HARK to track speakers in 360 video of a remote party. "Virtual Teleport" uses a...
When shopping for a new data processing platform for IoT solutions, many development teams want to be able to test-drive options before making a choice. Yet when evaluating an IoT solution, it’s simply not feasible to do so at scale with physical devices. Building a sensor simulator is the next best choice; however, generating a realistic simulation at very high TPS with ease of configurability is a formidable challenge. When dealing with multiple application or transport protocols, you would be...
SYS-CON Events announced today that CA Technologies has been named “Platinum Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CA Technologies helps customers succeed in a future where every business – from apparel to energy – is being rewritten by software. From planning to development to management to security, CA creates software that fuels transformation for companies in the applic...
In his session at @ThingsExpo, Dr. Robert Cohen, an economist and senior fellow at the Economic Strategy Institute, presented the findings of a series of six detailed case studies of how large corporations are implementing IoT. The session explored how IoT has improved their economic performance, had major impacts on business models and resulted in impressive ROIs. The companies covered span manufacturing and services firms. He also explored servicification, how manufacturing firms shift from se...
SYS-CON Events announced today that Elastifile will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Elastifile Cloud File System (ECFS) is software-defined data infrastructure designed for seamless and efficient management of dynamic workloads across heterogeneous environments. Elastifile provides the architecture needed to optimize your hybrid cloud environment, by facilitating efficient...
SYS-CON Events announced today that Golden Gate University will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Since 1901, non-profit Golden Gate University (GGU) has been helping adults achieve their professional goals by providing high quality, practice-based undergraduate and graduate educational programs in law, taxation, business and related professions. Many of its courses are taug...
Recently, WebRTC has a lot of eyes from market. The use cases of WebRTC are expanding - video chat, online education, online health care etc. Not only for human-to-human communication, but also IoT use cases such as machine to human use cases can be seen recently. One of the typical use-case is remote camera monitoring. With WebRTC, people can have interoperability and flexibility for deploying monitoring service. However, the benefit of WebRTC for IoT is not only its convenience and interopera...
When shopping for a new data processing platform for IoT solutions, many development teams want to be able to test-drive options before making a choice. Yet when evaluating an IoT solution, it’s simply not feasible to do so at scale with physical devices. Building a sensor simulator is the next best choice; however, generating a realistic simulation at very high TPS with ease of configurability is a formidable challenge. When dealing with multiple application or transport protocols, you would be...
WebRTC is the future of browser-to-browser communications, and continues to make inroads into the traditional, difficult, plug-in web communications world. The 6th WebRTC Summit continues our tradition of delivering the latest and greatest presentations within the world of WebRTC. Topics include voice calling, video chat, P2P file sharing, and use cases that have already leveraged the power and convenience of WebRTC.
An increasing number of companies are creating products that combine data with analytical capabilities. Running interactive queries on Big Data requires complex architectures to store and query data effectively, typically involving data streams, an choosing efficient file format/database and multiple independent systems that are tied together through custom-engineered pipelines. In his session at @BigDataExpo at @ThingsExpo, Tomer Levi, a senior software engineer at Intel’s Advanced Analytics ...
SYS-CON Events announced today that Secure Channels, a cybersecurity firm, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Secure Channels, Inc. offers several products and solutions to its many clients, helping them protect critical data from being compromised and access to computer networks from the unauthorized. The company develops comprehensive data encryption security strategie...