India-SPUG (SharePoint User Goup)

My client wants a Feedback form with ‘Submit’ and ‘Cancel’ buttons and when user clicks on ‘Submit’, validations of form fields should be done and a popup should be displayed with a message ‘Feedback submitted successfully’.

1. Create a custom list with all the required fields. Here I have a created a custom list ‘Feedback’.

2. Open the site in SharePoint Designer to create a new page that contains a custom list form.
3. In SharePoint Designer, on File menu, click New
4. In the New dialog box, on the Page tab, click General, and then double-click on ASPX.

5. On the Insert menu, point to SharePoint Controls, and then click Custom List Form.
The List or Document Library Form dialog box opens.

6. In the List or document library to use for form list, choose the list or library for which you want to create a form. To follow the example, click Feedback.

7. Under Type of form to create, indicate whether you want to create a New item form, an Edit item form, or a Display item form.
To follow the example, click New item form.

8. Click OK. The New item form appears on the page.

9. To attach a master page, on the Format menu, point to Master Page, and then click Attach Master Page. In the Select a Master Page dialog box, click Default Master Page, and then click OK. The Match Content Regions dialog box appears. To match the body of the page to the PlaceHolderMain content placeholder, click OK.

10. To save the new custom list form, on the File menu, click Save as.

11. In the Save As dialog box, in the large list box, browse to the list or library folder for which the custom list form was created.

To follow the example, in the Save As dialog box, double-click Lists, and then double-click Feedback to open the Feedback folder. In the File Name box, type FeedbackForm, and then click Save.

The FeedbackForm.aspx page appears in the Folder List in the Feedback folder.

Now instead of existing OK, Cancel buttons, I want to add my own buttons with associated JavaScript.

1. Open the FeedBackForm.aspx in Sharepoint Designer.
2. Locate the OK, Cancel buttons and make Visible property to false.
3. Use the following code to add Submit and Cancel buttons.

<input type=”button” value=”Submit” name=”btnSave” onclick=”javascript:alert(‘Thanks for your feedback’); {ddwrt:GenFireServerEvent(‘__commit;__redirect={/}’)}; ” style=”width: 101px”  />
<input type=”button” value=”Cancel” name=”btnCancel” onclick=”javascript: {ddwrt:GenFireServerEvent(‘__redirect={/}’)}” style=”width: 101px” />

And finally whenever the user wants to enter the feedback, user should be redireted to this newly created page. Follow the below steps to get this possible.

1. In the SharePoint Designer Folder List, right click on Feedback list and then click Properties on the shortcut menu.
2. In the List Properties dialog box, click on Supporting Files tab.
3. In the Content  type specific forms, select Item.
   
4. Click Browse under new item form and select FeedbackForm.aspx and then click OK.
5. Click OK.

Now open a new Feedback form and enter values and click on Feedback button. A popup will be diaplyed with a message Thanks for your feedback.

Wait… This is not over.

In this form, First Name, Last Name and Comments are mandatory fields. Even though you didn’t enter data into any of these fileds, a popup will be diaplayed, which should not happen.

For this you need to write some Javascript, which will validate the mandatory fileds and then diaplys a popup with message. We need to execute this Javascript on Submit button onClick event.

Note: For tips on Using Javascript to Manipulate a List Form Field, visit Microsoft SharePoint Designer Team Blog. There is an error in SharePoint Filed Type table. Actually the TagName of Multiple Lines of Text is textarea.

Follow the below steps to complete the validation.

1. Open FeedbackForm.aspx in SharePoint Designer.
2. Add the following Javascript code block at the top of page. (Just after <asp:Content id=”Content1″ runat=”Server” contentplaceholderid=”PlaceHolderMain”>)
3. <script type=”text/javascript” language=”javascript”>function getField(tagName, tagName1, identifier)
   {
   var length = identifier.length;
   var count = 0;
   var tags = document.getElementsByTagName(tagName);
   var moretags = document.getElementsByTagName(tagName1);
   for (var i=0; i < tags.length; i++)
   {
   if ((tags[i].title == ‘First Name’ && tags[i].value != ”) ||
   (tags[i].title == ‘Last Name’ && tags[i].value != ”) ||
   (tags[i].title == ‘E-Mail’ && tags[i].value != ”))
   {
   count = count + 1;
   }
   }
   for (var j=0; j < moretags.length; j++)
   {
   if (moretags[j].title == ‘Comments’ && moretags[j].value != ”)
   {
   count = count + 1;
   }
   }
   if(count == 4)
   {
   return true;
   }
   else
   {
   return false;
   }
   }
4. Now call this function from onClick event of Submit button. Finally, the Submit button will look like below.

<input type=”button” value=”Submit” name=”btnSave” onclick=”javascript:if(getField(‘input’,'textarea’,'TextField’))alert(‘Thanks for your feedback’); {ddwrt:GenFireServerEvent(‘__commit;__redirect={/}’)}; “  />

Microsoft SharePoint 2010 – The business collaboration platform for the Enterprise and the Web.

Click Here for the Sneak Peek of Microsoft SharePoint 2010

Here I will explain, how to resize the SharePoint OOB calendar. Final output of the calendar will look like this.

Follow the steps described below to get this type of calendar.

1. Add the Calendar web part to the Right Zone of an aspx page. Change the ‘Selected View’ to Calendar.
2. Add a ‘Content Editor Web Part’ to the same Right Zone.
3. Copy the following code to the ‘Source Editor’ of Content Editor Web Part and hide the web part (Layout -> Hidden)

<style type=”text/css”>

/* Tiny Calendar */
/* Remove week blocks */

.ms-cal-weekempty {display:none;}
.ms-cal-week {display:none;}
.ms-cal-weekB {display:none;}
.ms-cal-weekB {display:none;}

/* Shrink cells */
.ms-cal-workitem2B {display:none;}
.ms-cal-noworkitem2B {display:none;}
.ms-cal-nodataBtm2 {display:none;}
.ms-cal-todayitem2B {display:none;}
.ms-cal-workitem {font-size:0px;}
.ms-cal-muworkitem {font-size:0px;}
.ms-cal-noworkitem {font-size:0px;}
.ms-cal-nodataMid {font-size:0px;}
.ms-cal-todayitem {font-size:0px;}

/* thin out header */
.ms-cal-nav {display:none;}
.ms-cal-nav-buttonsltr {display:none;}
.ms-cal-navheader {padding:0px;spacing:0px;}
.ms-calheader IMG {width:15px;}

/* Abbreviate weekdays */
.ms-cal-weekday {letter-spacing:6px; width:22px; overflow: hidden;}

</style>

Original Credits: http://www.sugindia.com

1. Open the site in SharePoint Designer.
2. Open the default master page.
3. Place the cursor, where you want to add DateTime, usually at the top.
4. Place the following javascript code in the respective <td></td> tag

<script type=”text/javascript”>

var now = new Date(); document.write(now.toLocaleString());

</script>

Note: Preview is not available in SharePoint Designer. You need to open the site in browser to check the DateTime.

The major difference between Themes and Alternate CSS are

SharePoint User Group – India
http://www.sugindia.com

SharePoint Community Portal
http://sharepoint.microsoft.com/sharepoint/default.aspx

SharePoint Server Developer Server
http://msdn.microsoft.com/en-us/office/aa905503.aspx

SharePoint for Developers
http://msdn.microsoft.com/en-us/rampup/dd221355.aspx

Microsoft Office SharePoint Server 2007
http://technet.microsoft.com/en-us/office/bb267362.aspx

Microsoft is providing a list of articles, screen casts, web casts etc., at once place to help individuals learn how to develop on SharePoint Server 207.

For details visit http://www.microsoft.com/click/SharePointDeveloper/

This topic will explain you how to backup and restore a SharePoint site collection.

We can backup and restore the sharepoint sites using ‘SharePoint Central Administration’ and ’stsadm’.

In this demo, I am explaining how to backup and restore using ’stsadm’.

Backup:
1. Go to Start -> Run. Enter ‘cmd’ and click ‘OK’.
2. Go to following path.
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN
3. Type the following command to backup a SharePoint site (By using the same command we can take the backup of site collection also)

stsadm -o backup -url <url> -filename <filename>

In the above command, <url> will be url of SharePoint site.
<filename> will be backup file path.
Ex. stsadm -o backup -url http://sitename:1000 -filename d:\backupfile

Restore:
1. Use the following command to restore a site or site collection.
stsadm -o restore -url <url> -filename <filename> -overwrite
The ‘-overwrite’ flag will overwrite the site.

Ex. stsadm -o restore -url http://sitecoll:2000 -filename d:\backupfile -overwrite

Backup Limitations:
This method is not suitable to backup the site collection, which is having the size of more than 15GB.
This command backs up only the site collection, so anything outside the site collection scope is not included. Typical data outside of the site collection include:
1. Shared Services settings (For ex. Search settings).
2. Custom webparts, if any. (You need to place the dlls in GAC)
3. Web.config

Note: Go through http://technet.microsoft.com/en-us/library/cc512095.aspx for information on BackUp/Restore of a Shared Service Provider (SSP).

Follow the below steps to download multiple documents from a document library.

1. Open a document library.
2. Go to ‘Explorer View’.
3. Now, select multiple documents and right click. Now you will get the options to send these selected documents to My Documents.

1. Create a folder called SampleSite at C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS.
2. Copy the originally installed files and folders from the Layouts folder to the newly created SampleSite folder.
3. Mapping of layouts folder to Site Collection: Follow the below steps to map the application.master to a site collection.
4. Open Internet Information Services (IIS).
5. Select and expand the Web Sites section.
6. Select and expand the site, to map the application.master.
7. Right click on _layouts and click on Properties.
8. Click Browse under Local Path and select the SampleSite folder located under Layouts folder.
9. Reset the IIS.

Now what ever changes you have applied to the application.master located under SampleSite folder, the changes will be applied only to the specific site collection.

Limitations:

1. This method may cause maintenance issues.
2. If a service pack is installed that contains updates to the files in the Layout folder, the update is not applied to your custom layouts folder.