CODEWITHSUNDEEP
javascriptasp.netsharepointsharepoint-2010sharepoint-2007
Jake
Jake

Reputation: 1390

sharepoint 2010: custom column with javascript

I wanted to know if it is possible to create a custom column that will get me today's date everytime without the need of updating an item in the list?

my end goal is to to be able to calculate how much time left or exceeded between a destination date and today's date.

I thought about a placing a code like this hidden on the page and then somehow referring to the innerHTML of the date div when I create a calculated column.

today = new Date();

   D = today.getDate();
   M = today.getMonth() + 1;
   Y = today.getYear();
   document.getElementById('date').innerHTML=D+"/"+M+"/"+Y;

   <div id="date" style="display:none"></div>

anyone has any thoughts about how this could be done?

Upvotes: 1

Views: 2899

Answers (3)

Ryan
Ryan

Reputation: 24432

You've said you want to show a count down/count up column to display the number of days between a date and todays date, e.g.

Task X | Due 20th Feb | Due in 5 days

You can not do this directly in a custom column as you can't ensure that server side code will run on a page view (e.g. your custom field type CODE will not run on a normal list view), but you can use JavaScript (with or without the custom column).

This post details 4 ways to get a countdown field working including two by Christophe of pathtosharepoint.com fame that sounds like it fits your requirements :-

You could take the idea here combine it with a custom column to output the javascript refs as shown by @Ivan or you can just add the javascript to a page via a CEWP.

Upvotes: 3

Rony SP
Rony SP

Reputation: 2628

Include a content editor web part in the page (newform.aspx / editform.aspx) and use jQuery (or just plain JavaScript) to handle the setting of default values.

Edit: some example code:


In the lists newform.aspx, include a reference to jquery. If you look at the html code, you can see that each input tag gets an id based on the field's GUID, and a title that's set to the fields display name.


now, using jquery we can get at these fields using the jQuery selector like this:

By title:


$("input[title='DISPLAYNAMEOFFIELD']");

by id (if you know the field's internal guid, the dashes will ahve to be replaced by underscores:

// example field id, notice the guid and the underscores in the guid ctl00_m_g_054db6a0_0028_412d_bdc1_f2522ac3922e_ctl00_ctl04_ctl15_ctl00_ctl00_ctl04_ctl00_ctl00_TextField

$("input[id*='GUID']"); //this will get all input elements of which the id contains the specified GUID, i.e. 1 element


We wrap this in the ready() function of jQuery, so all calls will only be made when the document has fully loaded:


$(document).ready(function(){
 // enter code here, will be executed immediately after page has been loaded
});


By combining these 2 we could now set your dropdown's onchange event to the following


$(document).ready(function(){
 $("input[title='DISPLAYNAMEOFFIELD']").change(function() 
 {
      //do something to other field here 
 });
});

Upvotes: 2

Ivan Vagunin
Ivan Vagunin

Reputation: 361

You can create your own field type and set javascript for rendering, like this:

<FieldType>
...
<RenderPattern Name="DisplayPattern">
<HTML><![CDATA[<script src="/_layouts/MyDateTime.js"></script>]]></HTML>
<HTML><![CDATA[<div><SCRIPT>GetCurrentTime();"]]></HTML>
<div id="date" style="display:none"></div>
<HTML><![CDATA[");</SCRIPT></div>]]></HTML>
</RenderPattern>
</FieldType>

Then put MyDateTime.js with GetCurrentTime function definition into layouts folder and you're done. For more details on declaring custom field types see: http://www.spsamples.com/2011/06/sharepoint-indicator-field-type.html

Upvotes: 2

Related Questions