Sync list with user group using jquery

Requirement: To get all the user names from the SharePoint group "Deliverable Owners" and sync with a custom list called "Team Members" in a button click.

Solution: This is done using jquery and SharePoint web services.

Code:

<script type="text/javascript" src="https://siteurl/Documents/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://siteurl/Documents/jquery.SPServices-0.7.2.min.js"></script>
<script  type="text/javascript">
    $(document).ready(function() {
 
     $("#syncUsers").click(function()  //'syncUsers' is the ID of button control added in the CEWP
{
var errorOccured  = DeleteUsersFromTeamMembersList();
if(!errorOccured)
{
AddUsersToTeamMembersList();
}
 });
});

      // to delete the existing users from the custom list
function DeleteUsersFromTeamMembersList()
{

var errorOccured = false;

$().SPServices({
            operation: "GetListItems",
            async: false,
            debug: true,
            listName: "Team Members",
            CAMLViewFields: "<ViewFields></ViewFields>",
            completefunc: function (xData, Status) {
                $(xData.responseXML).SPFilterNode("z:row").each(function() {
                    $().SPServices({
                        operation: "UpdateListItems",
                        async: false,
                        debug: true,
                        batchCmd: "Delete",
                        listName: "Team Members",
                        ID: $(this).attr("ows_ID"),
                        completefunc: function (xData, Status) {
                        msgData = xData.responseText;
isError = msgData.indexOf("ErrorText");
           if (isError > 0) {
               // Error creating fields!
               alert("Error deleted user names from Team Member list!");
               errorOccured = true;
           }
                        }
                    });
                });
            }
        });
         return errorOccured;
}
//add all the users from the sharepoint group to custom list.
function AddUsersToTeamMembersList()
{

var alreadyProcessed = false;
var userName ;
var iD;
var userID;
var errorOccured = false;

$().SPServices({
operation: "GetUserCollectionFromGroup",
groupName: "Deliverable Owners",
completefunc: function (xData, Status) {
$("#results").text(xData.responseXML.xml);
$(xData.responseXML).find("User").each(function () {
  userName = $(this).attr("LoginName");
  iD = $(this).attr("ID");
  userID = iD +";#"+userName;
  $().SPServices({
operation: "UpdateListItems",
async: false,
batchCmd: "New",
listName: "Team Members",
valuepairs: [["User",userID  ]],
completefunc: function(xData, Status)
{
msgData = xData.responseText;
isError = msgData.indexOf("ErrorText");
if (isError > 0) {
// Error creating fields!
alert("Error synchronizing user names!");
errorOccured = true;
}
}
});
});

if( errorOccured == false)
{
alert("User name synchronized successfully.");
$(window.location).attr('href', 'currentpagename.aspx');
}                    
}
});
}
</script>


P.S:
- The performance of this code will get affected based on the size of the user group.
- The Team Members custom list must have "User" field with people and group type.

Insert a row into a list using JQuery and Web Services

Requirement: Insert a row in the list using jQuery and Web Services.

Variables (not initiating here, as the values are dynamically generated by another method)
   - allTeamMembers (user name)
   - firstSaturday (date)
Project_Name is a lookup field, the values for lookup field should be the combination of ID of item in the Lookup list and the lookup value

$().SPServices({
  operation: "UpdateListItems",
  async: false,
  batchCmd: "New",
  listName: "Resource Allocation List",
  valuepairs: [["pcompleted",0],["TeamMember",allTeamMembers],["Title","Dummy Entry"],["Week_Ending",firstSaturday],["Project_Name","20;#Others"]],
  completefunc: function(xData, Status) {
msgData = xData.responseText;
  isError = msgData.indexOf("ErrorText");
            if (isError > 0) {
                alert("Error creating missing entries!");
                errorOccured = true;

            }
  }
  });

Retrieve column values from a list using JQuery and Web Services

Requirement: To get the values of "Team Member" field from "User Allocation list" list with a filter condition.

Solution:
Following is the javascript code to retrieve the column values from a list using web services.

function getCompletedEmployeesList(){
var date = new Date();
var aTmp = new Array();

var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
firstDay  =  firstDay.getFullYear()+"-"+(firstDay.getMonth()+1)+"-"+firstDay.getDate();
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
lastDay =  lastDay.getFullYear()+"-"+(lastDay.getMonth()+1)+"-"+lastDay.getDate();

$().SPServices({
operation: "GetListItems",
async: false,
listName: "User Allocation List",
CAMLViewFields: "<ViewFields Properties='True' />",
CAMLQuery: "<Query><Where><And><Neq><FieldRef Name='ID' /><Value Type='Counter'>0</Value></Neq><And><Leq><FieldRef Name='Week_x002d_Ending' /><Value IncludeTimeValue='FALSE' Type='DateTime'>"+lastDay +"</Value></Leq><Geq><FieldRef Name='Week_x002d_Ending' /><Value IncludeTimeValue='FALSE' Type='DateTime'>"+firstDay  +"</Value></Geq></And></And></Where></Query>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var teamMember = $(this).attr("ows_TeamMember");
aTmp.push(teamMember);
});
}
});
return aTmp;
}

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>

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"  /> &nbsp;&nbsp;&nbsp;
<input type="button" id="btnFilter" value="Generate Report">
</p>


</body>
</html>

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}&amp;Source={$PagePath}"><img border="0" src="/_layouts/images/edititem.gif" alt="" /></a>