Add a SharePoint "New" icon anywhere!

 

Would you like to flag a paragraph or an item in a bulleted list on your home page as "new" and then have the new flag disappear after a certain date? While it would be nice if we could reuse the new item functionality found in SharePoint lists and libraries, we will have to write our own. As we want to keep this as simple as possible we will add the expire date as the image's "Alternate text" attribute, which is easy to do while inserting images into a page.

In a nut shell, the basic steps for your users are:

1. Edit the page or the web part
2. Insert the NewFlag.jpg image (you will need to tell them the location or the URL)
3. Add the expire date as MM/DD/YYYY as the "Alternate Text"

Step 1 – get an image

You can't just use the SharePoint New icon as it is stored as a sprite and not a simple image. We could use a SPAN tag, an IMG tag and a CSS class, but that's too much HTML for our site owners to add each time they want to flag something as new. So we need to find or create an image… you can draw your own in Windows Paint or you could capture the image from a SharePoint page.

Capture the image:

1. Add a new item to a list or library (so we can see the New icon)
2. Capture the current screen  (press PrtSc on your keyboard or use a screen capture tool)
3. Open Windows Paint and paste the screen capture
4. Use the Select tool and select just the New icon
               (for 2013)         (for 2010)
5. In the Paint Home ribbon click Crop and then save the file as NewFlag.jpg
6. Upload this file to a SharePoint library such as Site Assets, or if you have access to the server, upload the file to c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\Template\Images   (use 12 for 2007, 14 for 2010 and 15 for 2013)

Step 2 – add some JavaScript to the master page

1. Open your site in SharePoint Designer (2007 for SP 2007, 2010 for SP 2010, etc.)
2. Find and edit your master page (default.master for 2007, v4.master for 2010 and seattle.master for 2013 – note that the your master may be different!)
3. Scroll to the end of the master page and find the </body> tag
4. Add the JavaScript from below, depending on the version, just in front of the </body> tag
5. Save your master page

Step 3 – test it

1. Go to the home page of a test site and edit the page
• for 2010 and 2013 home pages: Site Actions, Edit Page
• for 2007 basic pages: Site Actions, Edit Page
• for all web part pages: add a Content Editor Web Part and get it in text edit mode
2. Add the new text   ("Free laptops until Tuesday!")
3. 2013
• Insert the NewFlag.jpg image from wherever you uploaded it next to the new text
  
• Set the Alt text to the expire date (i.e. 12/24/2013)
  
4. 2010
• Insert the NewFlag.jpg image and add the expire date as the Alternative Text:
  
  
  
• For testing, add one image with past date and one with a future date.
  
  
5. Save your changes – expired "new item" flags should now disappear

 

 

The JavaScript code:

For 2007 and 2010

<script type="text/javascript">
// TechTrainingNotes.blogspot.com

function TTNNewFlags()
{
  var TTNimgs = document.getElementsByTagName("img");
  for (var i=0; i<TTNimgs.length; i++)
  {
   if (TTNimgs[i].src)
   {
    if (TTNimgs[i].src.indexOf("NewFlag")>-1)
    {
       var TTNflagdate = new Date(TTNimgs[i].alt);
       if (TTNflagdate < new Date())
       {
         TTNimgs[i].style.display="none";
       }
    }
   }
  }
}

// for 2007 and 2010
_spBodyOnLoadFunctionNames.push("TTNNewFlags()");


</script>

---

 

For 2013

<script type="text/javascript">
// TechTrainingNotes.blogspot.com

function TTNNewFlags()
{
  var TTNimgs = document.getElementsByTagName("img");
  for (var i=0; i<TTNimgs.length; i++)
  {
   if (TTNimgs[i].src)
   {
    if (TTNimgs[i].src.indexOf("NewFlag")>-1)
    {
       var TTNflagdate = new Date(TTNimgs[i].alt);
       if (TTNflagdate < new Date())
       {
         TTNimgs[i].style.display="none";
       }
    }
   }
  }
}

// for 2013
ExecuteOrDelayUntilScriptLoaded(function () {
      if (typeof asyncDeltaManager != "undefined")
        asyncDeltaManager.add_endRequest(TTNNewFlags);
      else TTNNewFlags();
  }, "start.js");


</script>

---

Thanks to Daniel Laksana for his tip for delayed load of JavaScript in SP 2013: http://blog.symprogress.com/2013/09/sharepoint-2013-execute-javascript-function-after-mds-load/

 

.