Welcome!

AJAX & REA Authors: Elizabeth White, Hovhannes Avoyan, Brett Hofer, Jason Bloomberg, Carmen Gonzalez

Blog Feed Post

Using display templates to feature new search results in SharePoint 2013

For many versions of SharePoint, you have been able to configure the number of days the new indicator shows up on a document in a library.  For example, here is how a new document is indicated in a document library.

SearchDisplayTemplateDocumentLibraryNewIcon

I’ve worked with a number of user experience designers and they are always adding these new indicators to the search results wireframes.  Today we’ll look at a relatively simple technique to show this indicator on the search results screen.  I’ll assume you have some basic knowledge of display templates so I won’t go through all of the basics.  There are plenty of posts out there to help you get stared with that. 

For my example today, I wanted to show a new indicator for all documents regardless of what result type happened to be used.  This means we need to modify the file Item_CommonItem_Body.html.  Normally, the best approach for display templates is to make a copy of an existing one and then modify it.  However, we don’t have this option when we want to make the changes global.  My recommendation is to keep a working copy of this file somewhere before you make modifications.  However, if you really mess it up, you can always grab a working copy from another site collection. 

To modify the display template, go to the site collection hosting your search center and go to Site Settings.  Go to Master pages and page layouts and then navigate to the folder Display Templates –> Search.  Here you will find the Item_CommonItem_Body.html file.  You can either download a copy of the file or simply click the Library tab and look for the Open with Explorer icon.  From there we can edit the HTML file and make our changes.

SearchDisplayTemplateMasterPageLibrary

The Common Item Body file display a lot of the key fields that you see in all search results such as the title, hit highlighted summary, and URL.  We need to write a few lines of JavaScript.  We effectively want to determine the date associated with the file and compare it to another date to determine if the file is “new” or not.  In my case, I went with anything in the last 60 days.  I admit this is not very new but worked well for my demo content.  We’re going to set a new variable isNew and then use it later to display our new indicator.  Here’s the JavaScript.  I inserted this in the main script block just before the line starting with “var clickType” (around line 65).

var isNew = false;

var newDate = new Date();

newDate.setDate(newDate.getDate()-60);

isNew = ((new Date(ctx.CurrentItem.LastModifiedTime)) > newDate);

We’re going to add our new indicator right next to the Title of each search result.  To do this, look for the _#= titleHtml =#_ line.  We’ll add our code after that.  First create a JavaScript block to check if isNew is true.

<!--#_

            if (isNew) {

_#-->

Then we add the code to add our new icon.  In this example, I am using the same one from the document library.  I found the necessary HTML by using the IE developer toolbar.  One customization I made to this is that I added the LastModifiedTime to the title tag of the image so that you can see the date when you hover over the icon.

<span class="ms-newdocument-iconouter"><img title="New - _#= ctx.CurrentItem.LastModifiedTime =#_" class="ms-newdocument-icon" alt="New - _#= ctx.CurrentItem.LastModifiedTime =#_" src="/_layouts/15/images/spcommon.png?rev=31"></span>

Now we need to close our if statement with another script block.

<!--#_

            }

_#-->

Now, we just need to save our file and see the results.  Execute another query from your search center and the items that are new should now be indicated.  In the example below, the resume and the XML file are new.

SearchDisplayTemplateNewIcon

I showed this to @JennferMason and she thought this was neat but thought we needed a better new indicator.  So then I decided to use the one on the site content page.  Again, I used the developer toolbar and replaced the HTML with the following.

<span class="ms-vl-recent ms-textSmall" id="recent-c831c747-a40d-4cb1-9e8c-3da27e089e19">new!</span>

Here is what it looks like now.

SearchDisplayTemplateNewText

You could even combine the two if you really wanted.  Use whatever works for you.  Now, what I will say about this technique is that search looks at the date the file was last modified and not the date that it was uploaded to SharePoint.  That means if you worked on a document offline and haven’t touched it in three months and then decide to upload it, it would not be considered “new”.

This is just a simple example of some of the things I’ll be showing in my display templates talk at SPC14 this year.  If you are interested in learning more, be sure and attend that session!

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.

@CloudExpo Stories
Cloud and Big Data present unique dilemmas: embracing the benefits of these new technologies while maintaining the security of your organization's assets. When an outside party owns, controls and manages your infrastructure and computational resources, how can you be assured that sensitive data remains private and secure? How do you best protect data in mixed use cloud and big data infrastructure sets? Can you still satisfy the full range of reporting, compliance and regulatory requirements? In...
Between the compelling mockups and specs produced by your analysts and designers, and the resulting application built by your developers, there is a gulf where projects fail, costs spiral out of control, and applications fall short of requirements. In his session at DevOps Summit, Charles Kendrick, CTO and Chief Architect at Isomorphic Software, will present a new approach where business and development users collaborate – each using tools appropriate to their goals and expertise – to build mo...
Chuck Piluso will present a study of cloud adoption trends and the power and flexibility of IBM Power and Pureflex cloud solutions. Speaker Bio: Prior to Data Storage Corporation (DSC), Mr. Piluso founded North American Telecommunication Corporation, a facilities-based Competitive Local Exchange Carrier licensed by the Public Service Commission in 10 states, serving as the company's chairman and president from 1997 to 2000. Between 1990 and 1997, Mr. Piluso served as chairman & founder of ...
To manage complex web services with lots of calls to the cloud, many businesses have invested in Application Performance Management (APM) and Network Performance Management (NPM) tools. Together APM and NPM tools are essential aids in improving a business's infrastructure required to support an effective web experience... but they are missing a critical component - Internet visibility. Internet connectivity has always played a role in customer access to web presence, but in the past few years u...
While Docker continues to be the darling of startups, enterprises and IT innovators around the world, networking continues to be a real mess. Indeed, managing the interaction between Docker containers and networks has always been fraught with complications. Without automation in networking, the vision of running Docker at scale and letting IT run the same apps unchanged on the laptop and in the data center or for any cloud cannot be realized.
The Internet of Things Maturity Model (IoTMM) is a qualitative method to gauge the growth and increasing impact of IoT capabilities in an IT environment from both a business and technology perspective. In his session at @ThingsExpo, Tony Shan will first scan the IoT landscape and investigate the major challenges and barriers. The key areas of consideration are identified to get started with IoT journey. He will then pinpoint the need of a tool for effective IoT adoption and implementation, whic...
SYS-CON Events announced today that Secure Infrastructure & Services will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY, and the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Secure Infrastructure & Services (SIAS) is a managed services provider of cloud computing solutions for the IBM Power Systems market. The company...
"SOASTA built the concept of cloud testing in 2008. It's grown from rather meager beginnings to where now we are provisioning hundreds of thousands of servers on a daily basis on behalf of customers around the world to test their applications," explained Tom Lounibos, CEO of SOASTA, in this SYS-CON.tv interview at DevOps Summit, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
DevOps is all about agility. However, you don't want to be on a high-speed bus to nowhere. The right DevOps approach controls velocity with a tight feedback loop that not only consists of operational data but also incorporates business context. With a business context in the decision making, the right business priorities are incorporated, which results in a higher value creation. In his session at DevOps Summit, Todd Rader, Solutions Architect at AppDynamics, discussed key monitoring techniques...
DevOps Summit, taking place Nov 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 17th Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to wait for long developmen...
SYS-CON Events announced today that dcVAST, a leader in IT infrastructure management, support service and cloud service, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. dcVAST provides cutting-edge IT services and IT infrastructure management services. dcVAST builds robust systems that are simple, secure and serviceable. dcVAST’s IT infrastructure support and IT services expertise can help companies r...
In his session at DevOps Summit, Andrei Yurkevich, CTO at Altoros, provided an overview of all the benefits and opportunities, as well as drawbacks of deploying Cloud Foundry PaaS with Juju and compared it to BOSH. Discover the features that overlap, and understand what Juju Charm is, what it is not, where you use one or the other or where you use both BOSH and Juju Charms together. Andrei Yurkevich is Cloud Foundry protagonist and CTO at Altoros. Under his supervision, the Altoros engineering ...
Cloud computing started a technology revolution; now DevOps is driving that revolution forward. By enabling new approaches to service delivery, cloud and DevOps together are delivering even greater speed, agility, and efficiency. No wonder leading innovators are adopting DevOps and cloud together! In his session at DevOps Summit, Andi Mann, Vice President of Strategic Solutions at CA Technologies, explored the synergies in these two approaches, with practical tips, techniques, research data, wa...
Shipping daily, injecting faults, and keeping an extremely high availability "without Ops"? Understand why NoOps does not mean no operations. Agile development methodologies require evolved operations to be successful. In his keynote at DevOps Summit, David Tesar, Microsoft Technical Evangelist on Microsoft Azure and DevOps, will discuss how Microsoft teams who have made huge progress with a DevOps transformation effectively utilize operations staff and how challenges were overcome. Regardless ...
Security can create serious friction for DevOps processes. We've come up with an approach to alleviate the friction and provide security value to DevOps teams. In her session at DevOps Summit, Shannon Lietz, Senior Manager of DevSecOps at Intuit, will discuss how DevSecOps got started and how it has evolved. Shannon Lietz has over two decades of experience pursuing next generation security solutions. She is currently the DevSecOps Leader for Intuit where she is responsible for setting and driv...
Software is eating the world. Companies that were not previously in the technology space now find themselves competing with Google and Amazon on speed of innovation. As the innovation cycle accelerates, companies must embrace rapid and constant change to both applications and their infrastructure, and find a way to deliver speed and agility of development without sacrificing reliability or efficiency of operations. In her Day 2 Keynote DevOps Summit, Victoria Livschitz, CEO of Qubell, discussed...
The recent trends like cloud computing, social, mobile and Internet of Things are forcing enterprises to modernize in order to compete in the competitive globalized markets. However, enterprises are approaching newer technologies with a more silo-ed way, gaining only sub optimal benefits. The Modern Enterprise model is presented as a newer way to think of enterprise IT, which takes a more holistic approach to embracing modern technologies.
Software-driven innovation is becoming a primary approach to how businesses create and deliver new value to customers. A survey of 400 business and IT executives by the IBM Institute for Business Value showed businesses that are more effective at software delivery are also more profitable than their peers nearly 70 percent of the time (1). DevOps provides a way for businesses to remain competitive, applying lean and agile principles to software development to speed the delivery of software that ...
“Oh, dev is dev and ops is ops, and never the twain shall meet.” With apoloies to Rudyard Kipling and all of his fans, this describes the early state of the two sides of DevOps. Yet the DevOps approach is demanded by cloud computing, as the speed, flexibility, and scalability in today's so-called “Third Platform” must not be hindered by the traditional limitations of software development and deployment. A recent report by Gartner, for example, says that 25% of Global 2000 companies will b...
SYS-CON Events announced today that FierceDevOps will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. FierceDevOps keeps software developers and IT operations personnel updated on the latest news and trends around the rapidly evolving role of the traditional IT worker.