SharePoint Served: January 2013

Monday, January 28, 2013

Display current site name in Content Editor Web Part using JavaScript

Add the following script in a Content Editor Web Part

<script language="javascript" type="text/javascript">
_spBodyOnLoadFunctionNames.push("GetSiteName");

function GetSiteName(){
var SiteName = document.getElementById('ctl00_PlaceHolderSiteName_onetidProjectPropertyTitle').innerHTML;//get the ID from 'view source' page
document.getElementById('lblsitename').innerHTML = SiteName;
}
</script>
<html>
<label id="lblsitename"></label>
</html></div>

Friday, January 18, 2013

Date Picker control in Content Editor Web Part

<html lang="en">
<head>
<style >
div.ui-datepicker{
font-size:11px;
}
</style>
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<script>

$(function() {
$( "#fromdatepicker" ).datepicker();
$( "#todatepicker" ).datepicker();
});
$(function() {
$("#btnFilter").click(function() {
var startDate = $("#fromdatepicker").datepicker("getDate");
startDate = startDate.getFullYear()+"-"+(startDate.getMonth()+1)+"-"+startDate.getDate();

var endDate = $("#todatepicker").datepicker("getDate");
endDate = endDate.getFullYear()+"-"+(endDate.getMonth()+1)+"-"+endDate.getDate();

alert(startDate +"-"+ endDate);
});
});
</script>
</head>
<body>

<p>
From Date: <input type="text" id="fromdatepicker" style="font-size:11px" />
To Date: <input type="text" id="todatepicker" style="font-size:11px" />    
<input type="button" id="btnFilter" value="Generate Report">
</p>

</body>
</html>

Thursday, January 3, 2013

Create a list view which shows the items of a specific folder

Requirement: To create a view to list out all the items in a specific folder named 'Archived' from a list.

Solution:
1. Open the site in SharePoint Designer and navigate to the list view page
2. Convert the view to XSLT view
3. Create a new data source connection from the list by clicking on Copy and Modify menu

4. Provide name for the data source in the general tab and set the Filters, fields and Sort conditions. Make sure that you select RecursiveAll options from the Scope drop down.

5. Click Ok

6. In Design View, click the Common Data View Tasks menu for the Web Part

7. Set the following filter condition. (Provide the relative URL of the folder view)
Path Equals sites/XXXX/SiteName/Lists/ListName/FolderName

8. Click Ok to exit

9. Save the file

Get the URL of the current page from xslt?

Requirement: The requirement is to create a column in data view web part with edit icon that should navigate to edit form.

Solution: XSL variable $PagePath is used to get the current page's URL.

Code:

<a onfocus="OnLink(this)" HREF="{$URL_Edit}?ID={@ID}&Source={$PagePath}"><img border="0" src="/_layouts/images/edititem.gif" alt="" /></a>