Click here to close now.

Welcome!

AJAX & REA Authors: VictorOps Blog, Yakov Fain, Elizabeth White, Ken Fogel, Automic Blog

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
VictorOps is making on-call suck less with the only collaborative alert management platform on the market. With easy on-call scheduling management, a real-time incident timeline that gives you contextual relevance around your alerts and powerful reporting features that make post-mortems more effective, VictorOps helps your IT/DevOps team solve problems faster.
Roberto Medrano, Executive Vice President at SOA Software, had reached 30,000 page views on his home page - http://RobertoMedrano.SYS-CON.com/ - on the SYS-CON family of online magazines, which includes Cloud Computing Journal, Internet of Things Journal, Big Data Journal, and SOA World Magazine. He is a recognized executive in the information technology fields of SOA, internet security, governance, and compliance. He has extensive experience with both start-ups and large companies, having been ...
Skeuomorphism usually means retaining existing design cues in something new that doesn’t actually need them. However, the concept of skeuomorphism can be thought of as relating more broadly to applying existing patterns to new technologies that, in fact, cry out for new approaches. In his session at DevOps Summit, Gordon Haff, Senior Cloud Strategy Marketing and Evangelism Manager at Red Hat, will discuss why containers should be paired with new architectural practices such as microservices ra...
The industrial software market has treated data with the mentality of “collect everything now, worry about how to use it later.” We now find ourselves buried in data, with the pervasive connectivity of the (Industrial) Internet of Things only piling on more numbers. There’s too much data and not enough information. In his session at @ThingsExpo, Bob Gates, Global Marketing Director, GE’s Intelligent Platforms business, to discuss how realizing the power of IoT, software developers are now focu...
Operational Hadoop and the Lambda Architecture for Streaming Data Apache Hadoop is emerging as a distributed platform for handling large and fast incoming streams of data. Predictive maintenance, supply chain optimization, and Internet-of-Things analysis are examples where Hadoop provides the scalable storage, processing, and analytics platform to gain meaningful insights from granular data that is typically only valuable from a large-scale, aggregate view. One architecture useful for capturing...
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 ...
DevOps is about increasing efficiency, but nothing is more inefficient than building the same application twice. However, this is a routine occurrence with enterprise applications that need both a rich desktop web interface and strong mobile support. With recent technological advances from Isomorphic Software and others, it is now feasible to create a rich desktop and tuned mobile experience with a single codebase, without compromising performance or usability.
SYS-CON Events announced today Arista Networks will exhibit at SYS-CON's DevOps Summit 2015 New York, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. Arista Networks was founded to deliver software-driven cloud networking solutions for large data center and computing environments. Arista’s award-winning 10/40/100GbE switches redefine scalability, robustness, and price-performance, with over 3,000 customers and more than three million cloud networking ports depl...
The speed of software changes in growing and large scale rapid-paced DevOps environments presents a challenge for continuous testing. Many organizations struggle to get this right. Practices that work for small scale continuous testing may not be sufficient as the requirements grow. In his session at DevOps Summit, Marc Hornbeek, Sr. Solutions Architect of DevOps continuous test solutions at Spirent Communications, will explain the best practices of continuous testing at high scale, which is r...
SYS-CON Events announced today that Open Data Centers (ODC), a carrier-neutral colocation provider, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. Open Data Centers is a carrier-neutral data center operator in New Jersey and New York City offering alternative connectivity options for carriers, service providers and enterprise customers.
Thanks to Docker, it becomes very easy to leverage containers to build, ship, and run any Linux application on any kind of infrastructure. Docker is particularly helpful for microservice architectures because their successful implementation relies on a fast, efficient deployment mechanism – which is precisely one of the features of Docker. Microservice architectures are therefore becoming more popular, and are increasingly seen as an interesting option even for smaller projects, instead of bein...
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...
The explosion of connected devices / sensors is creating an ever-expanding set of new and valuable data. In parallel the emerging capability of Big Data technologies to store, access, analyze, and react to this data is producing changes in business models under the umbrella of the Internet of Things (IoT). In particular within the Insurance industry, IoT appears positioned to enable deep changes by altering relationships between insurers, distributors, and the insured. In his session at @Things...
Even as cloud and managed services grow increasingly central to business strategy and performance, challenges remain. The biggest sticking point for companies seeking to capitalize on the cloud is data security. Keeping data safe is an issue in any computing environment, and it has been a focus since the earliest days of the cloud revolution. Understandably so: a lot can go wrong when you allow valuable information to live outside the firewall. Recent revelations about government snooping, along...
In his session at DevOps Summit, Tapabrata Pal, Director of Enterprise Architecture at Capital One, will tell a story about how Capital One has embraced Agile and DevOps Security practices across the Enterprise – driven by Enterprise Architecture; bringing in Development, Operations and Information Security organizations together. Capital Ones DevOpsSec practice is based upon three "pillars" – Shift-Left, Automate Everything, Dashboard Everything. Within about three years, from 100% waterfall, C...
PubNub on Monday has announced that it is partnering with IBM to bring its sophisticated real-time data streaming and messaging capabilities to Bluemix, IBM’s cloud development platform. “Today’s app and connected devices require an always-on connection, but building a secure, scalable solution from the ground up is time consuming, resource intensive, and error-prone,” said Todd Greene, CEO of PubNub. “PubNub enables web, mobile and IoT developers building apps on IBM Bluemix to quickly add sc...
Data-intensive companies that strive to gain insights from data using Big Data analytics tools can gain tremendous competitive advantage by deploying data-centric storage. Organizations generate large volumes of data, the vast majority of which is unstructured. As the volume and velocity of this unstructured data increases, the costs, risks and usability challenges associated with managing the unstructured data (regardless of file type, size or device) increases simultaneously, including end-to-...
The excitement around the possibilities enabled by Big Data is being tempered by the daunting task of feeding the analytics engines with high quality data on a continuous basis. As the once distinct fields of data integration and data management increasingly converge, cloud-based data solutions providers have emerged that can buffer your organization from the complexities of this continuous data cleansing and management so that you’re free to focus on the end goal: actionable insight.
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...
The Internet of Things (IoT) is causing data centers to become radically decentralized and atomized within a new paradigm known as “fog computing.” To support IoT applications, such as connected cars and smart grids, data centers' core functions will be decentralized out to the network's edges and endpoints (aka “fogs”). As this trend takes hold, Big Data analytics platforms will focus on high-volume log analysis (aka “logs”) and rely heavily on cognitive-computing algorithms (aka “cogs”) to mak...