SharePoint 2020

The Vision for a Future of Clarity

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>")

 

calcColumnTodaysDate

 

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 ūüėČ

Advertisements

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

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: http://www.knowledgegroup.no/blogg/post/2012/05/13/Add-filename-in-title-field-using-workflow.aspx

Step 2: Go to http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/ 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: http://pastebin.com/Gb5mGw1c

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>
 <style>
 #screenshot{
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:5px;
 display:none;
 color:#fff;
 }
 </style>
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:
http://pastebin.com/XgQA85m7
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 | , | 12 Comments

Using Javascript URL in Calculated Columns

If you’re looking at using Javascript in a calculated column to call a URL, here’s a method that’s quick and simple to apply.

I found that when I attempted to run this inside a calculated column, the javascript url path removes the ” ” and therefore won’t run.

HTML Example of URL

<a onclick='javascript:openDialog("/server/site/CSSdocument.pdf");javascript:return false;' href="#" target=_self>

<img src="/server/site/CSS_Page_001.jpg" alt="" ></a>

So you could run the html inside a html file linked to the Content Editor Web Part first to make sure your Javascript works on the page, then add the Custom List with the calculated column below.

Instructions

First, create two ‘single line of text’ columns,¬†each containing the following text as default value

jscript1

onclick='javascript:openDialog("

jscript2

");javascript:return false;'

Then, I have two versions of syntax you can use. Make sure you change “The data type returned from this formula is:” to Number (1, 1.0, 100) ¬†This will convert your column to html.

Calculated Column Version 1

="<a "&jscript1&""&FileName&""&jscript2&" href='#' title='Title' target='_self'><img src='"&Thumbnail&"' alt=''></a>"

Calculated Column Version 2

=CONCATENATE("<DIV><a ",jscript1,"",FileName,"",jscript2," href='#' title='book' target='_self'><img src='",Thumbnail,"' alt=''></a></DIV>")

So from the examples above, each “jscript” column will be replaced with it’s code and which will use the “FileName” column as it’s URL.

It’s not as Dynamic as I would like, so this would suit a Site Owner who familiar with Javascript.

Any questions if it doesn’t work and would like assistance, please comment below.

February 20, 2013 Posted by | SharePoint 2010 | , | 6 Comments

Create PDF thumbnail view in column using iframes

This is how I created a thumbnail view of PDF files in a Document Library.

Using a Document Library to store PDF Files. Call it “Uploads”

1: Create workflow using SharePoint Designer to copy Name column to Title column.  This will allow us to use the Title column in a Calculated Column.  This Blog post describes the process: http://www.knowledgegroup.no/blogg/post/2012/05/13/Add-filename-in-title-field-using-workflow.aspx

2: Add a Calculated Column to the document library, call it “Preview”

Copy this formula:

=CONCATENATE("<DIV><iframe width='200px', height='200px', scrolling='no', src='http://server/uploads/",Title,".pdf#page=1&toolbar=0&scrollbar=0&navpanes=0&statusbar=0'></iframe></DIV>")

* change http address to your SharePoint server name and change to location of PDF files.  

3: ¬†Add a Content Editor Web Part to the Document Libary view and copy the link to Christophe’s Text to HTML code:

Or use the Calc column, Number option work-around.

<script type="text/javascript">// <![CDATA[
//
// Text to HTML
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length)
{
try
{
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>

") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
// ]]></script>

That’s it, upload your pdf files, test and adjust.

One down-side is the page does load a little slow as it’s trying to load multiple pdf files.

I’ve tested it on IE9 and IE7 using different hardware and the page loads fine for my purposes.

If someone knows of a solution that can be used to convert the first page to a picture thumbnail that would be better for performance, or if you have any questions, please post in the comments section below.

Thanks for reading.

Request from to Ben, here is the calculated column as it should appear.

*Please note, you must have the filename of the PDF in the TITLE Column.
* Using Number as the data type, you won’t require Christophe’s code snippet above.

 

PDFthumbcalc_column

August 10, 2012 Posted by | SharePoint 2010, SharePoint Designer 2010 | , , , , | 20 Comments