Click here to close now.

Welcome!

AJAX & REA Authors: Elizabeth White, XebiaLabs Blog, Cloud Best Practices Network, Liz McMillan, Lori MacVittie

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
WSM International is launching a DevOps services division that offers assessment, consulting and implementation to large enterprises and organizations with complex infrastructures. This is the first independent services company to create a dedicated practice to help organizations looking to transition to the DevOps model. The concept of DevOps is to blend information technology (IT) software development with operations to optimize the computing infrastructure according to the specific needs of ...
SYS-CON Events announced today that Cisco, the worldwide leader in IT that transforms how people connect, communicate and collaborate, has been named “Gold Sponsor” of 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. Cisco makes amazing things happen by connecting the unconnected. Cisco has shaped the future of the Internet by becoming the worldwide leader in transforming how people connect, communicate and collaborat...
Temasys has announced senior management additions to its team. Joining are David Holloway as Vice President of Commercial and Nadine Yap as Vice President of Product. Over the past 12 months Temasys has doubled in size as it adds new customers and expands the development of its Skylink platform. Skylink leads the charge to move WebRTC, traditionally seen as a desktop, browser based technology, to become a ubiquitous web communications technology on web and mobile, as well as Internet of Things...
SYS-CON Events announced today that robomq.io will exhibit at SYS-CON's @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. robomq.io is an interoperable and composable platform that connects any device to any application. It helps systems integrators and the solution providers build new and innovative products and service for industries requiring monitoring or intelligence from devices and sensors.
The WebRTC Summit 2014 New York, to be held June 9-11, 2015, at the Javits Center in New York, NY, announces that its Call for Papers is open. Topics include all aspects of improving IT delivery by eliminating waste through automated business models leveraging cloud technologies. WebRTC Summit is co-located with 16th International Cloud Expo, @ThingsExpo, Big Data Expo, and DevOps Summit.
Hosted PaaS providers have given independent developers and startups huge advantages in efficiency and reduced time-to-market over their more process-bound counterparts in enterprises. Software frameworks are now available that allow enterprise IT departments to provide these same advantages for developers in their own organization. In his workshop session at DevOps Summit, Troy Topnik, ActiveState’s Technical Product Manager, will show how on-prem or cloud-hosted Private PaaS can enable organ...
DevOps tasked with driving success in the cloud need a solution to efficiently leverage multiple clouds while avoiding cloud lock-in. Flexiant today announces the commercial availability of Flexiant Concerto. With Flexiant Concerto, DevOps have cloud freedom to automate the build, deployment and operations of applications consistently across multiple clouds. Concerto is available through four disruptive pricing models aimed to deliver multi-cloud at a price point everyone can afford.
Today, IT is not just a cost center. IT is an enabler and driver of business. With the emergence of the hybrid cloud paradigm, IT now has increasingly more capabilities to create new strategic opportunities for a business. Hybrid cloud allows an organization to utilize multi-tenant public clouds, dedicated private clouds, bare metal hosting, and the associated support and services for the right use cases through an on-demand, XaaS model. This model of IT creates tremendous opportunities for busi...
Docker is an excellent platform for organizations interested in running microservices. It offers portability and consistency between development and production environments, quick provisioning times, and a simple way to isolate services. In his session at DevOps Summit at 16th Cloud Expo, Shannon Williams, co-founder of Rancher Labs, will walk through these and other benefits of using Docker to run microservices, and provide an overview of RancherOS, a minimalist distribution of Linux designed...
Business as usual for IT is evolving into a “Make or Buy” decision on a service-by-service conversation with input from the LOBs. How does your organization move forward with cloud? In his general session at 16th Cloud Expo, Paul Maravei, Regional Sales Manager, Hybrid Cloud and Managed Services at Cisco, discusses how Cisco and its partners offer a market-leading portfolio and ecosystem of cloud infrastructure and application services that allow you to uniquely and securely combine cloud busi...
Businesses are looking to empower employees and departments to do more, go faster, and streamline their processes. For all workers – but mobile workers especially – utilizing the cloud to reconnect documents and improve processes without destructing existing workflows can have a dramatic impact on productivity. In his session at 16th Cloud Expo, Mark Grilli, vice president of Acrobat Solutions marketing at Adobe Systems Incorporated, will outline new ways that the cloud is changing the way peo...
SYS-CON Events announced today that Vitria Technology, Inc. will exhibit at SYS-CON’s @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Vitria will showcase the company’s new IoT Analytics Platform through live demonstrations at booth #330. Vitria’s IoT Analytics Platform, fully integrated and powered by an operational intelligence engine, enables customers to rapidly build and operationalize advanced analytics to deliver timely business outcomes ...
Are your applications getting in the way of your business strategy? It’s time to rethink your IT approach. In his session at 16th Cloud Expo, Madhukar Kumar, Vice President, Product Management at Liaison Technologies, will discuss a new data-centric approach to IT that allows your data, not applications, to inform business strategy. By moving away from an application-centric IT model where data integration and analysis are subservient to the constraints of applications, your organization will b...
SYS-CON Events announced today that MangoApps 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. MangoApps provides private all-in-one social intranets allowing workers to securely collaborate from anywhere in the world and from any device. Social, mobile, and eas...
WSM International has launched a DevOps services division that offers assessment, consulting and implementation to large enterprises and organizations with complex infrastructures. The concept of DevOps is to blend information technology (IT) software development with operations to optimize the computing infrastructure according to the specific needs of the organization. According to a recent press release from Gartner, "By 2016, DevOps will evolve from a niche strategy employed by large cloud ...
SYS-CON Events announced today that Solgenia 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. Solgenia is the global market leader in Cloud Collaboration and Cloud Infrastructure software solutions. Designed to “Bridge the Gap” between Personal and Professional S...
SYS-CON Events announced today that QTS Realty Trust, one of the nation’s largest and fastest-growing providers of data center facilities and cloud services and a leader in security and compliance, 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. QTS Realty Trust, Inc. (NYSE: QTS) is a leading national provider of data center solutions and fully managed services, and a leader in security and compliance...
SYS-CON Events announced today that WSM International (WSM), the world’s leading cloud and server migration services provider, 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. WSM is a solutions integrator with a core focus on cloud and server migration, transformation and DevOps services.
SYS-CON Events announced today that Liaison Technologies, a leading provider of data management and integration cloud services and solutions, has been named "Silver Sponsor" of SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York, NY. Liaison Technologies is a recognized market leader in providing cloud-enabled data integration and data management solutions to break down complex information barriers, enabling enterprises to make sm...
Sematext is a globally distributed organization that builds innovative Cloud and On Premises solutions for performance monitoring, alerting and anomaly detection (SPM), log management and analytics (Logsene), and search analytics (SSA). We also provide Search and Big Data consulting services and offer 24/7 production support for Solr and Elasticsearch.