Archive | jQuery

Looping through a SharePoint List Column with jQuery and replacing a GUID with a name from CRM 2011

By jbmurphy on December 6, 2012 in jQuery, MicrosoftCRM, SharePoint

This is a very specialized piece of code, but it came together nicely, so I thought I would share it.

I have a SharePoint List that has a bunch of Microsoft CRM 2011 Contact GUIDs in it. Some columns have one GUID and others have multiple GUIDs separated by semicolons. My goal was: when a user visits the default view for this list, the GUIDs are looked up agains CRM and displayed as the contact’s full name. I wrote the following code to do just that. The 4th, 5th and 10th columns has guide in them. I use this method to loop through the column.

$('table.ms-listviewtable td:nth-child(4),table.ms-listviewtable td:nth-child(5),table.ms-listviewtable td:nth-child(10)').each(function () {
        var guids = $(this).text().split(";");
        var names = ''
        $.each(guids, function () {
            var guid = this;
            var serverUrl = "http://crmserver.company.com"
            var ODATA_ENDPOINT = "/Organization/XRMServices/2011/OrganizationData.svc";
            var ODATA_EntityCollection = "/ContactSet(guid'" + guid + "')";
            var URL = serverUrl + ODATA_ENDPOINT + ODATA_EntityCollection
            $.ajax({
                type: "GET",
                contentType: "application/json",
                datatype: "json",
                async: false,
                url: URL,
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("Accept", "application/json");
                    XMLHttpRequest.setRequestHeader("Content-Type", "application/json")
                },
                success: function (data, textStatus, XmlHttpRequest) {
                    names = names + data.d.FullName + ","
                }
            });
        });
        $(this).text(names.substring(0, names.length - 1));
    });

Line 1: is the jQuery selector for all the columns that have GUIDs. And we loop through each of them.
Line 2: splits the contents of the column.
Line 4: loops through the all the GUIDs in each row/column
Lines 5-9: are setting up the CRM 2011 REST url for the ajax call
Lines 10-24: query the Microsoft CRM 2011 rest endpoint with the contact’s GUID and assign the full name to a variable
Line 25: displays the full name instead of the GUID.

Some slim code that works pretty well.

Using jQuery to hide some columns, append a new column, and popup the contents of the hidden columns

By jbmurphy on December 5, 2012 in jQuery, SharePoint

In this previous post, I showed how to hide the 4th and 5th columns of a SharePoint List (I am not talking about EditForm.aspx page, I am talking about the table view). I took this a step further and appended a new row containing an “more info” onClick event that pops up the contents of the hidden columns.

$('td:nth-child(5),th:nth-child(5),td:nth-child(6),th:nth-child(6)').hide()
$('td:nth-child(4)').each(function(){
	$(this).after('<td><img id="MoreInfo" src="/_layouts/images/CNSINF16.GIF" /></td>');
});
$('td.ms-addnew').hide();
$('tr.ms-itmhover').removeClass('ms-itmhover');
$('a[href^="mailto:"]').contents().unwrap();
$('img#MoreInfo').click(function() {
  var notes = $(this).closest('td').next('td').text();
  var description = $(this).closest('td').next('td').next('td').text();
  $('<div><u>Notes</u>: ' + notes+ '<br/><u>Description</u>: '+description +'</div>').dialog()
  });
});

Line 1: hides the 4th and 5th columns
Lines 2 & 3: append a new columns with a clickable gif
Lines 5 & 6: hide the add new and the hoverovers for the rows
Line 7: removes the mailto(s)
Lines 8 – 11: is the onClick for the gif in line 3. This function takes the values of the next two rows and put them in a jQuery modal dialog.

That was fun.

Using _spPageContextInfo, AJAX and SAMAccountName to show a hidden item in a SharePoint page.

By jbmurphy on December 5, 2012 in jQuery, SharePoint

I wanted to have a link on a page (could be anything) show only for certain people. I knew there was variable on every page named _spPageContextInfo.userId, which is the current user’s SharePoint user Id. I used the following code to take that userId and query the User Information List to get the SAMAccountName, and then use jQuery to show a hidden link if the use name matches.

    var userId = _spPageContextInfo.userId;
    var SAMAccountName = ''
    var serverUrl = "/_vti_bin/listdata.svc/UserInformationList(" + userId + ")"

    var URL = serverUrl
    $.ajax({
        type: "GET",
        contentType: "application/json",
        datatype: "json",
        async: false,
        url: URL,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            XMLHttpRequest.setRequestHeader("Content-Type", "application/json")
        },
        success: function (data, textStatus, XmlHttpRequest) {
            SAMAccountName = data.d.UserName
        }
    });
    if (SAMAccountName.toLowerCase() === 'UserName1'
        || SAMAccountName.toLowerCase() === 'UserName2'
        || SAMAccountName.toLowerCase() === 'UserName3'
        || SAMAccountName.toLowerCase() === 'UserName4'
        ) {
        $('#HiddenId').show()
    }

Looping through a SharePoint List column and acting on each item in the column using jQuery

By jbmurphy on December 4, 2012 in jQuery, SharePoint

I wanted to loop through a couple columns in the Default View of a SharePoint List. The jQuery code below would loop through the 4th, 5th, and 10th columns and alert the contents of that column. Obviously you can do anything you like with the matches. More tomorrow on how I was using this method

$('table.ms-listviewtable td:nth-child(4),table.ms-listviewtable td:nth-child(5),table.ms-listviewtable td:nth-child(10)').each(function () {

alert($(this).Text())
}

How I am using a Delegate control, code in a Document library, and jQuery to customize SharePoint 2010

By jbmurphy on July 31, 2012 in jQuery, Programming, SharePoint

In this post, I showed how to put a delegate control at the top over every page, and in the control add the links to the jQuery libraries. This is nothing new, there are many articles that show how to do this. I took this a step further and I included code to do the following:

Determine the current page’s relative URL (where the delegate control is running) and put that value in a Variable
Take that variable and change the relative URL’s forward slashes (“/”) to underscores (“_”), and change “.aspx” to “.txt”
Look for a file in a document library with a name that matches the variable created above and insert it’s contents into the additional page header

For example if I am browsing to http://sharepoint.company.com/Lists/Announcements/AllItems.aspx, and there is a file in the desiganted Document library named “_lists_announcements_allitems.txt” then it’s contentens will show up in the addition page header.

Some of the benefits I have found with my methods

All client side code is kept in one place, and you can easly figure out which file is being used on each page
The Document Library can have versioning, so you can rollback changes
Linked CEWP can be kept in the same place
It is easy to edit text, js and css files in SharePoint Designer, rather than in CEWP
Now it is a snap to chop up a NewForum.aspx via jQuery
It is easy to extend the code so that a file is included across all pages, making it easy to add a new js library to the entire site

Here is the code I am using in the Delegate Control (ascx)

string CurrentSiteRelativeURL = CurrentUrl.ToLower().Replace(CurrentWeb.Url.ToLower(), "");
string CustomFileName = CurrentSiteRelativeURL.Replace("/", "_");
string PageSpecificHeaderIncludes = CurrentWeb.Url + "/DocumentLibraryWithCodeInIt/" + CustomFileName.Replace(".aspx", ".txt");

Response.Write("<!--PageSpecificHeaderIncludes:" + PageSpecificHeaderIncludes + "-->");
    if (CurrentWeb.GetFile(PageSpecificHeaderIncludes).Exists == true)
    {
        SPFile tempFile = CurrentWeb.GetFile(PageSpecificHeaderIncludes);
        StreamReader reader = new StreamReader(tempFile.OpenBinaryStream());
        string myText = reader.ReadToEnd();
        reader.Close();
        Response.Write(myText);
    }

Anyone else doing anything like this? Thoughts?

jQuery to hide a column

By jbmurphy on July 20, 2012 in jQuery

I wanted to hide a column and I found this simple way to do that in jQuery. Can’t find where I originally came across it. Sorry if you figured it out first.

$('th:nth-child(5),td:nth-child(5),th:nth-child(6),td:nth-child(6)').hide()

This hides the 5th and 6th columns. I am going to use this in a SharePoint list where I want to hide the column and put the contents in a jQuery dialog box. More on that in a bit (I hope).

Update: found my source for this

jQuery to remove mailto

By jbmurphy on July 20, 2012 in jQuery

I wanted to remove a mailto and leave just the email address:


$('a[href^="mailto:"]').contents().unwrap();

How to add custom JavaScript code to all SharePoint 2010 pages (DelegateControl)

By jbmurphy on July 3, 2012 in jQuery, SharePoint

As I said in this post, there are plenty of articles on how to do this. This is more of a note for myself, as I have to “re-learn” this every time I need to customize SharePoint.

There are 2 ways (that I know of) that you can add code to every page in SharePoint 2010, 1 by the AdditionalPageHead delegate control, or ,2 by Custom Action. This article is about #1 (see #2 here) using the AdditionalPageHead delegate control.

Start Visual Studio, and create a new Empty SharePoint Project (uncheck the Create Directory for Solution because you salways create the destination directory yourself)
Deploy as a Farm Solution (I have not figured what you can and can’t do with sandboxed solutions yet)
RightClick the Project and Add –> New item –> User Control –Name it. This will create a new folder named ControlTemplates and inside will be your User Control. Looks like this

Edit the new ascx file and add the code you want to put at the top of every page, for example:

<script type="text/javascript" src="/path/to/jquery.js"></script>

RightCLick the Project and select Add Empty Element and name it at the bottom
add the following to the elements.xml file. The final should look like this below:

  <Control Id="AdditionalPageHead"
          Sequence="90"
          ControlSrc="~/_CONTROLTEMPLATES/DelegateControl/DelegateControl.ascx" />

Package everything up and you will now see your reference to jQuery on the top of all pages.

‘b’ is null or not an object

By jbmurphy on July 2, 2012 in jQuery, SharePoint

This is a reminder to my self that this blog post has the solutoin to the “b” error when working with the Client Object Model. Basically I need to change this:

createDelegate(this, this.onSuccessMethod)

to this:

createDelegate(this, onSuccessMethod)

Move the “Add new item” to the top of a list page in SharePoint 2010

By jbmurphy on June 26, 2012 in jQuery, SharePoint

We did not like how SharePoint 2010’s “Add new item” was on the bottom of the page. we wanted to move it to the top. The following jQuery code moves it to the top of the page:

$(“#s4-mainarea”).prepend($(“td.ms-addnew”))

hope that helps someone.

← Previous 1 2 3 Next →

Navigation