SharePoint 2020

The Vision for a Future of Clarity

Add Button to web part to Open any address in Dialog box

This is a script that you can use for SharePoint 2010 (untested in SharePoint 2013)

I currently use this script to open a list item’s NewForm.aspx page.

But you can use it to display and web address in a pop-up dialog.

And no JQuery is required!

Added notifications, if Ok or Cancel buttons clicked in the dialog.

Open Link button

dialog windows

Any URL can be displayed in Dialog

To test it out, just add this code to a txt or html file and link it to a Content Editor Web Part

<script type="text/javascript">

function portal_openModalDialog() {
var options = SP.UI.$create_DialogOptions();
options.url = "/_layouts/Upload.aspx?List={327D2CF7-F385-4969-8973-E6FD3908A996}&RootFolder="; //Change the URL to the page you require.
options.title = "Title of Dialog Window";
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
function CloseCallback(result, value) {
if (result === SP.UI.DialogResult.OK) {
SP.UI.Notify.addNotification("Your request has been submitted");
if (result === SP.UI.DialogResult.cancel) {
SP.UI.Notify.addNotification("Request cancelled");

<button name="button" type="button" onclick="javascript:portal_openModalDialog();javascript:return false;" href="#" target="_self">Open Link</button>

Pastebin Version: (opens in new tab)

May 3, 2016 Posted by | SharePoint 2010, SharePoint Javascript | , | Leave a comment


The Australian SharePoint Conference has been re-imagined!

The annual SharePoint Conference by ShareThePoint Ltd that has wowed over 400 people at each event for 6 years now becomes “The Digital Workplace Conference” – same quality, more content, and a wider audience. NOTE: Standard price is $770 incl GST. Where else can you get two days of international and local expert speakers and awesome content?

WHERE: Melbourne – The Pullman Albert Park 

Click here to download printable agenda (pdf, 365Kb).

Why Should You Attend?

1. Connect – meet like-minded people, make new connections, build your support network.

2. Learn – whether it be training, up-skilling or starting from scratch, the opportunities to learn from the BEST in the field are HERE!

3. Experience – new innovation and inspiring speakers. Walk away with ideas and momentum.

Who Is This For?

There is content suited to business people, managers, CIOs, executives, and end users.

Several sessions will also cover more technical aspects for IT Pro, Developer, System Administrator and Database Administrator roles.

If you are someone who sees the Digital Workplace as something to improve the way you work, increase your team’s productivity and deliver better results – come and learn how.

What Is Included?

Work on the paperless office by improving process workflows, automation and organising documents.

Come and learn about mobile collaboration, communication tools and enterprise social.

We pride ourselves in showcasing customer stories where you can see real-world examples and business sessions you can learn from (for super deep dive technical content, we recommend you attend TechEd).

Products Covered: Skype for Business, Yammer, CRM, OneNote, Office 365 and our usual awesome line up of SharePoint content.

April 13, 2016 Posted by | SharePoint 2010, SharePoint 2013 | Leave a comment

SharePoint display DOCX XLSX Thumbnails in Library

Just found this useful unknown feature for uploading and displaying DOCX or XLSX image cover thumbnails in a SharePoint 2010 Asset Library.

This works using SharePoint 2010 and a default Team Site template on a non-Publishing site, straight out of the box.

For Word and Excel 2010 and higher, when a Document is Saved As, there is a Save Thumbnail checkbox.



Select Rich Media Asset as Content Type; Video Content Type also works.





So far I have tried DOCX, XSLX, PPTX files.

PDF files do not display at this stage.

My next challenge is to get the Rich Media Content Type into an existing Document Library.

I’ve done some research and couldn’t find any other posts relating to this.
If anyone know of any, post them in the comments section.


Thanks for reading.

March 25, 2016 Posted by | SharePoint 2010, SharePoint 2013 | , , , | Leave a comment

Skype Lync 2013 Presence Indicator Web Part

This post is to embed a users Skype for Business (Lync 2013) presence indicator in a Content Editor Web Part for SharePoint 2010.

From reading this post:

The code works exactly for SharePoint 2010, though I’ve added a Sype button and when clicked opens the Chat window in Skype.

sype button




  • Replace the paths below with your SharePoint path.
  • Replace my name with another email address or SIP Address.
  • Download the the Skype image below and upload it to the same folder as the code below.
<script type="text/javascript" src="/sites/SP2010/_layouts/1033/init.js"></script>
<script type="text/javascript" src="/sites/SP2010/_layouts/1033/core.js"></script>
<style type="text/css">
img.presenceIndicator {
border-style: None;
height: 12px;
width: 12px;
border-width: 0px;
vertical-align: middle;
<img id="uniqueID" onload="IMNRC('',getElementById('uniqueID'))" showofflinepawn="1" src="/sites/SP2010/_layouts/images/blank.gif" class="presenceIndicator" />
<a href="">Brett Anderson</a>
<a href="">
<img width="86" height="32" role="Button" style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: -41px; BORDER-BOTTOM: 0px; MARGIN: 10px; BORDER-LEFT: 0px" alt="Skype chat, instant message" src="/sites/SP2010/scripts/Sypebutton/chatbutton_32px.png"></a>



Image button to upload to SharePoint server.

September 11, 2015 Posted by | SharePoint 2010, SharePoint 2013, SharePoint Designer 2010 | , | Leave a comment

Save list item as PDF file from Display Form using SWF buttons

This article explains how to add swf Flash buttons using TableTools to your List View and Default Display Form.

I’ve tested this in SharePoint 2010, using IE8. I have not tested this in SharePoint 2013 but it would work there too.

This is a pure front-end solution, using only SP Designer or notepad for those on a locked down intranet.

The only requirement is that your browser needs to be able to display Flash and SWF files.

The original post and code came from Danish Islam, which explains the how the code and buttons are linked to a List View.

Use jQuery Datatables for SharePoint List Webpart with export to CSV, EXCEL, PDF and Print features

The buttons contained in jQuery Datatable TableTools are:

Copy, CSV, Excel, PDF, Print.


This is the result of adding the script to the List View:


Note: The search box is live “Search as you type” filtering the list. The paging is Ajax and loads instantly.

All that you require are:

  • The files to be uploaded
  • Change the file paths in the the code
  • Change the file paths of the images in the CSS files.
  • Add a Content Editor Web Part to your List View or Display Form view.

If you place this script in a content editor web part above a list view, the full affect of Datatable Tabletools will be displayed.

Also, important note: Use the jQuery.js file that comes with the Datatables Zip Package.  Using jQuery v1.12 the buttons did NOT display and it took me a couple hours to determine it was the jQuery.js file.

<style type="text/css">
.even, .odd, .sorting_1 {
 background-color: transparent !important;
.dataTable THEAD TH {
 border: 0 !important;
<script type="text/javascript" src="/scripts/datatables/jquery.js"></script>
<script type="text/javascript" src="/scripts/datatables/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="/scripts/datatables/css/jquery.dataTables.css">
<script type="text/javascript" src="/scripts/datatables/dataTables.tableTools.js"></script>
<link type="text/css" rel="stylesheet" href="/scripts/datatables/css/dataTables.tableTools.css">

<script type="text/javascript" >
 $(".ms-listviewtable").prepend($("<thead></thead>").append($(".ms-listviewtable").find("tr:first"))).DataTable({"sDom": 'T<"clear">lfrtip', 

 "tableTools": {
 "sSwfPath": "/scripts/datatables/copy_csv_xls_pdf.swf"
 // Change this path according to file location 



For a List Display Item, I removed the CSV and Excel buttons and also added an “Email Link” button.


<style type="text/css">
.even, .odd, .sorting_1 {
background-color: transparent !important;
.dataTable THEAD TH {
border: 0 !important;
<link type="text/css" rel="stylesheet" href="/scripts/datatables/css/jquery.dataTables.css">
<link type="text/css" rel="stylesheet" href="/scripts/datatables/css/dataTables.tableTools.css">
<script type="text/javascript" src="/scripts/datatables/jquery.js"></script>
<script type="text/javascript" src="/scripts/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/scripts/datatables/dataTables.tableTools.min.js"></script>
<script type="text/javascript">
$(".ms-formtable").prepend($("<thead></thead>").append($(".ms-formtable").find("tr:first"))).DataTable({"sDom": 'T<"clear">rt',
"tableTools": {
"sSwfPath": "/scripts/datatables/copy_csv_xls_pdf.swf",

"aButtons": [


"sExtends": "copy",
"sButtonText": "Copy to clipboard"
"sExtends": "pdf",
"sButtonText": "Save as PDF",

"fnComplete": function ( nButton, oConfig, oFlash, sFlash ) {
SP.UI.Notify.addNotification('<img src="/_layouts/images/loadingcirclests16.gif" style="vertical-align: top;"/> PDF Exported to file ...',false);

"sExtends": "print",
"sButtonText": "Print this item"


"sExtends":    "text",
"sButtonText": "Email link",
"sButtonClass":  "DTTT_button_csv",
"fnClick": function ( nButton, oConfig, oFlash ) {
window.location='mailto:?subject=' + document.title + '&body=' + window.location;
} // end of tabletools




The Saving to PDF button is the only front-end solution I have found that works without for IE8 and SharePoint 2010.

Any comments, questions, hit me up. Enjoy.


August 9, 2015 Posted by | SharePoint 2010, SharePoint Designer 2010, SharePoint Javascript | , , , | 7 Comments

Display Todays Date in a Calculated Column with Javascript

Here’s what I used to display Today date in a Calculated Column with nothing but JavaScript in SharePoint 2010.

After a lot of research and trial and error, I finally have it displaying:

To display a date like this: 17/5/2015

Use this code:

=CONCATENATE("<p id='mydate'><script>var currentDate = new Date();var day = currentDate.getDate();var month = currentDate.getMonth()+1;var year = currentDate.getFullYear();document.getElementById('mydate').innerHTML = ( day + '/' + month + '/' + year );</script></p>")




Don’t forget to use data type returned as Number(1, 1.0, 100) This will convert the code to HTML

For U.S. Date, just swap the day and month over like this:

( day + ‘/’ + month + ‘/’ + year )

( month + ‘/’ + day + ‘/’ + year )


Update: The above code will only work for the first entry as the id name, i.e. ‘mydate’, needs to be unique.

So all you need to do is use another column that has Unique values, like a counter, or you could even combine two columns as thus:

 =CONCATENATE("<p id='"&PosNum&""&[First Name]&"'><script>var currentDate = new Date();var day = currentDate.getDate();var month = ('0' + (currentDate.getMonth()+1)).slice(-2);var year = currentDate.getFullYear();document.getElementById('"&PosNum&""&[First Name]&"').innerHTML = ( day + '/' + month + '/' + year );</script></p>"

The above code works and displays todays date for every Item.

 Date will now show as 20/05/2015

Hope this saves you some time😉

May 17, 2015 Posted by | SharePoint 2010, SharePoint Javascript | , | 2 Comments

SharePoint 2013 Composed Looks displays no items

I came across this while browsing my Azure SharePoint 2013 Site Collection.  Which I thought was strange considering my On-Prem SharePoint 2013 Site Collection displays the default templates.

Composed Looks - All Items

A quick Google Search, I came across this:

So the quickest and easiest way to get the templates into Composed Looks, is to create a sub-site and take a loot at the Composed Looks from that Sub-site.

On a sub-site I created all of the default template settings are shown as thus:



Useful Tip: This must be done from Internet Explorer (I used IE10), this will not work from Chrome.  I didn’t test it in Firefox.



Any questions or comments, post below.

September 17, 2014 Posted by | SharePoint 2013 | | Leave a comment

Add a PDF Thumbnail Hover Preview Column to a Document Library

I got this request from Jewell from my previous post:

Display PDF Thumbnail Preview on Hover in Search Results Web Part

“Is there away to apply this to a document library?”

Here are the steps to add a pic of a magnifying glass to a column in a Document Library.

So that when your mouse hovers, it displays the first page of the PDF inside an iFrame window.

The only down-side to having this implemented, is that as the user hovers over each PDF, it needs to download the entire PDF file to display the first page.

* Document Library with the PDF Preview column added

pdfs - All Documents

* On Mouse-Over

pdfs preview

Step 1: First you’ll need to create a workflow that copies the Document Name to the Title column.

Follow this post to do exactly that:

Step 2: Go to and download the Scripts Zip file.

You’ll need the 3rd Example files uploaded to a Document Library to hold your script files.

Step 3: Open up main.js and replace the text with this modified version: PDF thumbnail script .docx or the pastebin version:

Step 4:  Create a html file in the same folder as your scripts and paste the following:

Don’t forget to change the paths to your script files.

<script src="/server/site/scripts/jquery.js" type="text/javascript" ></script>
 <script src="/server/site/scripts/main.js" type="text/javascript"></script>
 border:1px solid #ccc;
Step 5:
Add the HTML file to the source of a Content Editor Web Part in the document library that holds the PDF files.
Step 6: Add a Calculated Column in the Document Library, call it Preview and select type returned as:
Number (1,2,3…).
Add the following from here:
or from here:
="<DIV><a href='..\"&Title&".pdf' class='screenshot' rel='..\"&Title&".pdf' ><img border='0' src='/_layouts/images/MAGNIFY.GIF' alt='' style='padding-right: 5px; padding-left: 5px; vertical-align:bottom'></a></DIV>"
That’s it! Now hover over the magnifying glass image and you should see the PDF thumbnail display.
Any questions or comments, post it below. Thanks for reading.

November 4, 2013 Posted by | SharePoint 2010, SharePoint Designer 2010 | , | 8 Comments

Hide Ribbon from Users with Read Permissions

Hiding the ribbon depending on users permissions.

Read access will hide the ribbon so it will behave like an anonymous user navigating to the site.

Open up your custom master Page in SP Designer 2010.

1. Add a display:none style to the s4-ribbonrow element so it looks like the below code

<div id=”s4-ribbonrow” class=”s4-pr s4-ribbonrowhidetitle” style=”display:none”>

2. add the below snippet inbetween the s4-ribboncont and the s4-ribbonrow Div

<Sharepoint:SPSecurityTrimmedControl runat=”server” Permissions=”ManageLists”>
<script type=”text/javascript”> document.getElementById(“s4-ribbonrow”).style.display = “block”;</script>

3. Close the control by adding the below snippet just above the the s4-ribboncont and the s4-ribbonrow Div


Your code should look like this:

<div id="s4-ribbonrow" style="display: none">

<Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="ManageLists">

<script type="text/javascript"> document.getElementById("s4-ribbonrow").style.display = "block";</script>



I have only tested this in SharePoint 2010 as I do not use SharePoint 2013.

I copied this from s SharePoint Design course I participated in with

For other useful tips, check out their Blog Posts:

October 30, 2013 Posted by | SharePoint 2010, SharePoint Designer 2010 | 1 Comment

Record Search Results Queries to a List using a Hit Counter

This is how I am using a Search Results page to record individual Users Search Queries in a list.  Each Search Query is displayed as how the user typed them in.

What I’ll explain is how we can grab the URL from the Search Results and strip out the unnecessary code to display only the User’s Search Query.

For Example

This Search Result URL:


Will be converted to display only what the user has typed in the Search Box, which in this example, is: “pdf“.

Each time a user types in a Search, their query is recorded with their name, date and keywords typed.

Firstly, you need to install and configure the “Hit-Counter and Star-rating for SharePoint” from Alexander’s SharePoint JavaScripts site.

Once you have this configured it and you can see the users data added to the  HitCounter List , we can now modify the HitCounterAndStarRatingForSharePoint.js file to include the Users keywords entered.

1: First create a new column within the HitCounter list call it UserKeywords.  Add this column to your default view.

2: Edit the HitCounterAndStarRatingForSharePoint.js  and scroll down to about line 218:  //Add item.  Within that block of code you will see the column variables, make a new line under ReferringURL:refURL, and type in the new column name which is attached to the variable as such:


3:  Then under the following code at about Line: 152

// Get url and referrer
refURL = document.referrer;

Add the following lines of code:

searchURL =;                               //returns string ?k=Users%20Search%20String
  modURL = searchURL.substring(3);                                   //removes characters ?k= from string
  decodedURL = decodeURIComponent(modURL);       //decode URL to translate encoded characters from string
  searchQuery = decodedURL.split('&')[0];                         //removes characters all after &

Each line I’ve added a comment that describes what each line does.  I don’t know how to write code in Javascript, so I had to Google Search each line to work out how to accomplish each Javascript function.

4:  Now you can test the Search Results page by entering in a Search Query and then checking the HitCounter List.

The UserKeywords column will now display the Search Keywords exactly how they are typed by the user.

Any questions, please comment below, thanks for reading.

July 1, 2013 Posted by | SharePoint 2010, SharePoint Designer 2010, SharePoint Javascript | , , | Leave a comment