PreSaveAction for Sharepoint Form Fields Validations

HI All,

 Today I will share you one very useful in-built JavaScript functionality, which is used for validating the form fields. Obviously u can go for “Calculated columns”, “Column Validations”, “List Validations” for some validations and required result.

But,,,,,,, Sometimes, the requirement could be quite complicated..

Eg :

#“Start Date” less than “End Date”

##Out of two fields, if one is filled then save the item else cancel.

Likewise this can be used for many validations which we cannot do OOTB.

Ok, now I will give the basic code,

if the requirement is “End date” should not be earlier than “Start Date”..

========================================================================

<script language=”javascript” type=”text/javascript”>

function PreSaveAction()

{

var date1 = getTagFromIdentifierAndTitle(“INPUT”,”DateTimeFieldDate”,”Start Date”);

var date2 = getTagFromIdentifierAndTitle(“INPUT”,”DateTimeFieldDate”,”End Date”);

var arrDate1 = date1.value.split(“/”);

var useDate1 = new Date(arrDate1[2], arrDate1[1]-1, arrDate1[0]);

var arrDate2 = date2.value.split(“/”);

var useDate2 = new Date(arrDate2[2], arrDate2[1]-1, arrDate2[0]);

if(useDate1 > useDate2)

{

alert(“The End Date cannot happen earlier than the Start Date”);

return false; // Cancel the item save process

}

return true; // OK to proceed with the save item

}

function getTagFromIdentifierAndTitle(tagName, identifier, title) {

var len = identifier.length;

var tags = document.getElementsByTagName(tagName);

for (var i=0; i < tags.length; i++) {

var tempString = tags[i].id;

if (tags[i].title == title && (identifier == “” || tempString.indexOf(identifier) == tempString.length – len)) {

return tags[i];

}

}

return null;

}

</script>

========================================================================

U can just do some simple tweaks in this piece of code and can do magicsss :)

See you next time… byyyeee..:)

JavaScript for DateTime Picker - SharePoint

Hi All,
 In my previous post, i shared about the "onchange" event.
If u had tried this on "DateTime" field, u would have faced the difficulty.
I faced the same and it took time for me to sort this out:P

Ok, i will tell u the tweak to make that working.

In a Datetime picker there are two ways of changing the date.
Condition 1) Picking from the Image which is on the right side of the control.
Condition 2) Directly changing the date in the Textbox.

"onchange" works for the condition 2).

But condition 1) is mostly preferred by the users.

For this situation we have to use "onvaluesetfrompicker" event. I will show you one sample code.

There is one Datetime picker field - "Publishing date". This field should not be less than today. If it is less then, an alert has to come and "Save" button should be hided.

========================================================================

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript">

$(document).ready(function()
{
 today = new Date();

getTagFromIdentifierAndTitle("input","DateTimeFieldDate","Publishing Date").onvaluesetfrompicker = function() {ChangeEvent1()}; //This checks condition 2
getTagFromIdentifierAndTitle("input","DateTimeFieldDate","Publishing Date").onchange = function() {ChangeEvent1()};  //This checks condition 1

});


function ChangeEvent1()
{

var dateSelected = document.getElementById("ctl00_m_g_5cee28ab_e950_4028_95bc_0cb0d55ec872_ctl00_ctl05_ctl09_ctl00_ctl00_ctl04_ctl00_ctl00_DateTimeField_DateTimeFieldDate");
var pubdate = new Date(dateSelected.value);

if(pubdate<=today)
{
$("input[value$='Save']").attr('disabled', true); //button hides
alert("Publishing Date should be greater than Today's Date");
}

else
{
$("input[value$='Save']").attr('disabled', false); //button shown
}
}

function getTagFromIdentifierAndTitle(tagName, identifier, title) {
 var len = identifier.length;
 var tags = document.getElementsByTagName(tagName);
 for (var i=0; i < tags.length; i++) {
 var tempString = tags[i].id;
 if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
 return tags[i];
 }
 }
 return null;
}

</script>
========================================================================

Have a great day :)
See u all on the Next post :D

JavaScript onchange event - SharePoint

Hello guys,
  Today also, I am going to share one interesting thing in JavaScript combined with SharePoint.

Let’s say, U r working on an Edit form. There is a Text box field(Title) and u need to do something when there is a change in the Textbox value.
How to do it????

Hmm, there is an JavaScript event to check this – “onchange”.


========================================================================
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript">

$(document).ready(function()
{

getTagFromIdentifierAndTitle("input","TextField","Title").onchange = function() {ChangeEvent()};

});


function ChangeEvent()
{

//do something
alert('hi');
}

function getTagFromIdentifierAndTitle(tagName, identifier, title) {
 var len = identifier.length;
 var tags = document.getElementsByTagName(tagName);
 for (var i=0; i < tags.length; i++) {
 var tempString = tags[i].id;
 if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
 return tags[i];
 }
 }
 return null;
}

</script>
========================================================================

Check the below post for validating different type of fields like Choice (dropdown),Lookup etc..
http://blogs.msdn.com/b/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

Have a good Day :)

Excel Sheet to SharePoint List

Hi All,

Today i am going to share one useful and interesting thing about, Excel and Sharepoint...

Okay, Let's come to the situation...

U have a Sharepoint List and U are asked to generate an Excel spreadsheet from that..

AAAhh, i know u will say easyyyyy.. 

Single step : Ribbon control- Export to Excel :)

Ok Now, the other way around.. U r given an Excel sheet and asked to make a Sharepoint List from that...

There are some ways, 

U will first think to create a List and go to the datasheet view of that.. Copy paste that data into this view...

HMMM, That’s good.. But there is one easy and clean way to do this....

*****************************************************************************************

Make that Excel data into a table.. Steps are below

1) Select all the Data in the sheet.

2)Go to Insert Tab and Select "Table".

3)Save this.

Tip: U have to change the Default headers “Column1,Column2..”. This will be reflected as Column names in Sharepoint List...

Ok Now, Go to Sharepoint à Site ActionsàMore OptionsàListàImport Spreadsheet

1)Try creating a list based on this template

2)Next screen u will be asked to give the file location. There specify the location of Excel Sheet and select “Import”.

3)Your Excel will open with this dialog box. You can select the range of the data and range type from the dropdowns. Finally click on “Import”.

4)You have got your Sharepoint List ready….

Happy SharePointinggggg :DJ…

Trick for Fixing Broken Sharepoint Pages

Hi All,

At times you may need to recover a page after a code change makes it impossible to render, or you might have some orphaned web parts (web parts that have been closed and not deleted) on a page that you need to restore.

You can try to open the page in Sharepoint designer in Maintenance mode.

To enter into Maintenance Mode ,
1) Usual Way : Open the browser and select the Page Tab on the ribbon menu. Then click the Edit Properties button. once the Menu changes, click the Open Webpart Page in Maintenance view link.

But, there may be some times , the page wouldn't get render due to some code changes done.

2) So the easiest way is by appending ?Contents=1 to the end of the page URL- for example. http://SharepointDesigner2010/default.aspx?Contents=1

Here you can delete the broken webpart to restore the page..



Thats it :D :) :)