Kit Menke's Blog http://kitmenke.com/blog Experiences with SharePoint, web development, and programming Mon, 15 Mar 2010 00:08:18 +0000 http://wordpress.org/?v=2.9 en hourly 1 A Simple AJAX App using SharePoint Web Services http://kitmenke.com/blog/2010/03/14/a-simple-ajax-app-using-sharepoint-web-services/ http://kitmenke.com/blog/2010/03/14/a-simple-ajax-app-using-sharepoint-web-services/#comments Mon, 15 Mar 2010 00:08:18 +0000 Kit http://kitmenke.com/blog/?p=224 In this era of Web 2.0 web applications, I think it was only a matter of time before I needed to investigate how I could apply AJAX to SharePoint. With a little JavaScript and SharePoint’s web services, you can build fancy apps that can easily be dropped into a document library. And after reading Glen Cooper’s blog post on the subject, I figured it was something definitely worth investigating.

I also took this opportunity to improve a process I have to do all the time: what are the internal column names in a list? To get the list information, I built a simple AJAX app that consumes the Lists.asmx web service. Please keep in mind that this code will have be uploaded into SharePoint in order to work (a document library will work) and will not run from your desktop.

Step 0: HTML for user input and displaying results

Since I will be calling the GetList method on Lists.asmx, I will need two parameters from the user: Site URL and List Name. Site URL gives the web service context to a particular web and List Name should be a list within that web. I also specify a DIV which is where I will display the list’s information.

<div id="controls">
   <fieldset>
      <legend>List Information</legend>
      <label for="txtSiteURL">Site URL:</label><input id="txtSiteURL" type="text" style="width:400px" value="http://server/sites/SiteCollection/SubSite" /><br/>
      <div>Example: http://server/sites/SiteCollection/SubSite</div>
      <label for="txtListName">List Name:</label><input id="txtListName" type="text" value="Images" /><br/>
      <div>Example: Images</div>
      <input id="btnExecute" type="button" value="Get Columns" />
   </fieldset>
</div>
 
<div id="result">
   (results)
</div>

Now that we have our HTML form, we can work on the JavaScript code.

Step 1: Building a SOAP Message

To communicate with the web service, we need to use SOAP. Luckily, Glen has already created a very handy class for taking care of these operations. It is also reusable so it will come in handy for other web service calls. I tweaked his code a little bit and then put it into SoapUtils.js (also, please note this code depends on Prototype.JS):

/*
SoapUtils.js
Author: Glen Cooper
http://blog.glenc.net/2007/04/20/calling-sharepoint-web-services-from-javascript/
*/
var Soap = {
   createEnvelope: function(action, ns, parameters) {
      var soap = '<?xml version="1.0" encoding="utf-8"?>';
      soap += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
      soap += '  <soap:Body>';
      soap += '    <' + action + ' xmlns="' + ns + '">';
      soap += Soap.__parseParameters(parameters);
      soap += '    </' + action + '>';
      soap += '  </soap:Body>';
      soap += '</soap:Envelope>';
      return soap;
   },
 
   __parseParameters: function(parameters) {
      var params = "";
      if (typeof parameters == 'object') {
         // check if we were provided an array or an object
         if (typeof parameters.push == 'function') {
            for (var i = 0, length = parameters.length; i < length; i += 2) {
               params += "<" + parameters[i] + ">" + parameters[i+1] + "</" + parameters[i] + ">";
            }
         }
         else {
            $H(parameters).each(function(pair) {
               params += "<" + pair.key + ">" + pair.value + "</" + pair.key + ">";
            });
         }
      }
      return params;
   }
}

This utility class handles a lot of the grunt work for creating the SOAP message. It makes it pretty easy to grab the input, build the message, and then send it to the server. Next, I need to give it the specifics it needs to build the actual message. This is all contained inside my Execute function:

function Execute() {
   $('result').innerHTML = "Executing..."
 
   var txtSiteUrl = $('txtSiteURL').getValue();
   var txtListName = $('txtListName').getValue();
 
   // build parameter object
   var parameters =
   {
      listName: txtListName
   }
 
   // create soap envelope
   // can find the action and namespace from the WSDL page
   // ex: http://servername/_vti_bin/Lists.asmx?op=GetList
   var soap = Soap.createEnvelope(
     "GetList", // action
     "http://schemas.microsoft.com/sharepoint/soap/", // namespace
     parameters);
 
   if (!txtSiteUrl.endsWith('/')) {
      txtSiteUrl += '/';
   }
   txtSiteUrl += '_vti_bin/Lists.asmx';
 
   // call web service
   new Ajax.Request(
     txtSiteUrl,
     {
       method: "post",
       contentType: "text/xml",
       postBody: soap,
       onSuccess: ajaxSuccess,
       onFailure: ajaxError
     });
}

The Execute method is then bound to the “Get Columns” button on page load:

Event.observe(window,'load',function(){
   Event.observe('btnExecute','click',Execute);
});

Step 2: Parsing the Web Service’s XML response

At this point, we are ready to handle the response from the web service. Unfortunately, parsing XML using JavaScript was not exactly the easiest experience. I haven’t found an easy way to do it, so if you have any ideas, please let me know in the comments.

In any case, if an error occurs, I simply want to print the error message:

function ajaxError(result) {
   Element.insert($('result'), {bottom:'<span style="color:red">' + result.responseText + '</span>'});
}

A success message is a lot more complicated since we want to extract information out of the returned XML. In fact, if you look at the entire response from the webservice after calling GetList, the returned result for a simple Images library is something like 1100 lines of XML. The majority of this is taken up by the full description of each column in the list. There is a LOT of junk that we are simply going to be skipping over. For sanity sake, I’m not going to post the entire response, but useful snippets of interest.

Overall, the response will look something like:

<GetListResponse xmlns="http://schemas.microsoft.com/sharepoint/soap/">
  <GetListResult>
    <List RequireCheckout="False" EnableMinorVersion="False" ShowUser="True" Ordered="False" MultipleDataList="False" Hidden="False" EnableVersioning="True" EnableModeration="False" EnableAttachments="False" AllowMultiResponses="False" AllowDeletion="True" HasUniqueScopes="False" WorkFlowId="" MajorWithMinorVersionsLimit="0" MajorVersionLimit="0" ScopeId="317f19e2-4ba8-4ecc-82f3-9d846a270840" SendToLocation="" WebId="0bb1435c-d56a-4f6a-93a7-77ad6990a48c" WebFullUrl="/sites/SiteCollection/SubSite1/SubSite2" EmailAlias="" EmailInsertsFolder="" EventSinkData="" EventSinkClass="" EventSinkAssembly="" Author="630" WriteSecurity="1" ReadSecurity="1" RootFolder="/sites/SiteCollection/SubSite1/SubSite2/Images1" AnonymousPermMask="0" ItemCount="6" Flags="4232" WebImageHeight="480" WebImageWidth="640" ThumbnailSize="160" Direction="none" Version="0" LastDeleted="20081001 01:58:47" Modified="20100205 08:40:53" Created="20081001 01:58:47" ServerTemplate="109" FeatureId="00bfea71-52d4-45b3-b544-b1c71b620109" BaseType="1" Name="{2CDA4792-6D4E-4D9F-BC5B-F862D5235061}" ImageUrl="/_layouts/images/itil.gif" Description="" Title="Images" ID="{2CDA4792-6D4E-4D9F-BC5B-F862D5235061}" MobileDefaultViewUrl="" DefaultViewUrl="/sites/SiteCollection/SubSite1/SubSite2/Images1/Forms/AllItems.aspx" DocTemplateUrl="">
      <Fields>
        ... all fields are listed here in <Field> nodes
      </Fields>
      <RegionalSettings>
         ...
      </RegionalSettings>
      <ServerSettings>
         ...
      </ServerSettings>
    </List>
  </GetListResult>
</GetListResponse>

Notice, the List node contains a LOT of useful information. Once we have that node, we can display a lot of it using this function:

function addListInformation(nodeList) {
   var listTitle = nodeList.attributes.getNamedItem('Title').value;
   var listImg = nodeList.attributes.getNamedItem('ImageUrl').value;
   var listDesc = nodeList.attributes.getNamedItem('Description').value;
   var listCount = nodeList.attributes.getNamedItem('ItemCount').value;
   var listViewURL = nodeList.attributes.getNamedItem('DefaultViewUrl').value;
 
   var output = '<table><tr><td><a href="' + listViewURL + '"><img src="' + listImg + '" alt="' + listTitle + '" /></a></td>'
   output += '<td><a href="' + listViewURL + '">' + listTitle + '</a></td>';
   output += '<td># of items = ' + listCount + '</td>';
   output += '<td>' + listDesc + '</td></div></tr></table>';
   Element.insert('result', {bottom:output});
}

Also, since we are interested in the internal column names, we want information about each of the fields. All of the columns are listed inside the Fields node (see above). A lot of them have attributes similar to below:

<Field FromBaseType="TRUE" StaticName="Created" SourceID="http://schemas.microsoft.com/sharepoint/v3" StorageTZ="TRUE" DisplayName="Created" Name="Created" Type="DateTime" ReadOnly="TRUE" RowOrdinal="0" ColName="tp_Created" ID="{8c06beca-0777-48f7-91c7-6da68bc07b69}"></Field>
<Field FromBaseType="TRUE" StaticName="Author" SourceID="http://schemas.microsoft.com/sharepoint/v3" DisplayName="Created By" Name="Author" List="UserInfo" Type="User" ReadOnly="TRUE" RowOrdinal="0" ColName="tp_Author" ID="{1df5e554-ec7e-46a6-901d-d85a3881cb18}"></Field>

So, for each of the Field nodes, we are interested in the StaticName and DisplayName attributes:

function addFieldInformation(nodes) {
   if (nodes.length <= 0) {
      Element.insert(container, {bottom:"No results to display."});
      return;
   }
 
   var output = '<table cellpadding="0" cellspacing="0" border="1"><thead><tr><th>Display Name</th><th>Internal Name</th></tr></thead><tbody>';
   for (i = 0; i < nodes.length; i++) {
      var attr = nodes[i].attributes;
      // there are a lot more attributes, but right now only care about the Display Name
      // and the internal name
      var displayName = attr.getNamedItem('DisplayName').value;
      var internalName = attr.getNamedItem('StaticName').value;
      output += '<tr><td>' + displayName + '</td><td>' + internalName + '</td></tr>';
   }
   output += '</tbody></table>';
 
   Element.insert('result', {bottom:output});
}

And finally, to bring it all together, we are calling these functions inside our success function:

function ajaxSuccess(result) {
   // we're going to be adding HTML so reset this to be empty
   $('result').innerHTML = "";
 
   // put it in xmlDoc to make it shorter
   var xmlDoc = result.responseXML;
 
   // get the List node and show some of the attributes that are interesting
   addListInformation(xmlDoc.getElementsByTagName("List")[0]);
   // then select the Fields node and get all of its children (Field nodes)
   addFieldInformation(xmlDoc.getElementsByTagName("Fields")[0].childNodes);
}

All together now:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
<title>List Information - Kit's Utilities</title>
 
<!-- Include our style reset (for fun!) and our new stylesheet -->
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/utilities.css" rel="stylesheet" type="text/css" />
 
<!-- Include files used for ajax, etc -->
<script type="text/javascript" src="scriptaculous/prototype.js"></script>
<script type="text/javascript" src="ajax/SoapUtils.js"></script>
<script type="text/javascript" src="ajax/SearchWSUtils.js"></script>
 
<script type="text/javascript">
Event.observe(window,'load',function(){
   Event.observe('btnExecute','click',Execute);
});
 
function Execute() {
   $('result').innerHTML = "Executing..."
 
   var txtSiteUrl = $('txtSiteURL').getValue();
   var txtListName = $('txtListName').getValue();
 
   // build parameter object
   var parameters =
   {
      listName: txtListName
   }
 
   // create soap envelope
   // can find the action and namespace from the WSDL page
   // ex: http://servername/_vti_bin/Lists.asmx?op=GetList
   var soap = Soap.createEnvelope(
     "GetList", // action
     "http://schemas.microsoft.com/sharepoint/soap/", // namespace
     parameters);
 
   if (!txtSiteUrl.endsWith('/')) {
      txtSiteUrl += '/';
   }
   txtSiteUrl += '_vti_bin/Lists.asmx';
 
   // call web service
   new Ajax.Request(
     txtSiteUrl,
     {
       method: "post",
       contentType: "text/xml",
       postBody: soap,
       onSuccess: ajaxSuccess,
       onFailure: ajaxError
     });
}
 
function ajaxSuccess(result) {
   // we're going to be adding HTML so reset this to be empty
   $('result').innerHTML = "";
 
   // put it in xmlDoc to make it shorter
   var xmlDoc = result.responseXML;
 
   // get the List node and show some of the attributes that are interesting
   addListInformation(xmlDoc.getElementsByTagName("List")[0]);
   // then select the Fields node and get all of its children (Field nodes)
   addFieldInformation(xmlDoc.getElementsByTagName("Fields")[0].childNodes);
}
 
function addListInformation(nodeList) {
   var listTitle = nodeList.attributes.getNamedItem('Title').value;
   var listImg = nodeList.attributes.getNamedItem('ImageUrl').value;
   var listDesc = nodeList.attributes.getNamedItem('Description').value;
   var listCount = nodeList.attributes.getNamedItem('ItemCount').value;
   var listViewURL = nodeList.attributes.getNamedItem('DefaultViewUrl').value;
 
   var output = '<table><tr><td><a href="' + listViewURL + '"><img src="' + listImg + '" alt="' + listTitle + '" /></a></td>'
   output += '<td><a href="' + listViewURL + '">' + listTitle + '</a></td>';
   output += '<td># of items = ' + listCount + '</td>';
   output += '<td>' + listDesc + '</td></div></tr></table>';
   Element.insert('result', {bottom:output});
}
 
function addFieldInformation(nodes) {
   if (nodes.length <= 0) {
      Element.insert(container, {bottom:"No results to display."});
      return;
   }
 
   var output = '<table cellpadding="0" cellspacing="0" border="1"><thead><tr><th>Display Name</th><th>Internal Name</th></tr></thead><tbody>';
   for (i = 0; i < nodes.length; i++) {
      var attr = nodes[i].attributes;
      // there are a lot more attributes, but right now only care about the Display Name
      // and the internal name
      var displayName = attr.getNamedItem('DisplayName').value;
      var internalName = attr.getNamedItem('StaticName').value;
      output += '<tr><td>' + displayName + '</td><td>' + internalName + '</td></tr>';
   }
   output += '</tbody></table>';
 
   Element.insert('result', {bottom:output});
}
 
function ajaxError(result) {
   Element.insert($('result'), {bottom:'<span style="color:red">' + result.responseText + '</span>'});
}
 
</script>
 
</head>
 
<body>
 
<div id="container">
   <div id="controls">
      <fieldset>
         <legend>List Information</legend>
         <label for="txtSiteURL">Site URL:</label><input id="txtSiteURL" type="text" style="width:400px" value="http://server/sites/SiteCollection/SubSite" /><br/>
         <div>Example: http://server/sites/SiteCollection/SubSite</div>
         <label for="txtListName">List Name:</label><input id="txtListName" type="text" value="Images" /><br/>
         <div>Example: Images</div>
         <input id="btnExecute" type="button" value="Get Columns" />
      </fieldset>
   </div>
 
   <div id="result">
      (results)
   </div>
</div>
 
</body>
</html>
]]> http://kitmenke.com/blog/2010/03/14/a-simple-ajax-app-using-sharepoint-web-services/feed/ 0 Autopopulate a SharePoint Form from URL http://kitmenke.com/blog/2010/03/11/autopopulate-a-sharepoint-form-from-url/ http://kitmenke.com/blog/2010/03/11/autopopulate-a-sharepoint-form-from-url/#comments Thu, 11 Mar 2010 17:28:02 +0000 Kit http://kitmenke.com/blog/?p=237 This post builds off of my previous post about making fields read only. In this case, I needed to autopopulate the NewForm.aspx with a value that gets passed to the form via URL parameters.

In this case, the URL that gets passed in is something like:

/Lists/ProjectTasks/NewForm.aspx?projectID=523

I wanted to take the ‘projectID’ URL parameter and autopopulate my Project ID field with this value.

Additionally, we will make this field Read Only so that they can’t change the value. Lastly, do this all without SharePoint designer or C# code.

Stick the following code in a Content Editor on your NewForm.aspx or EditForm.aspx. (Remember you can get to edit mode by appending ToolPaneView=2 on the end, like NewForm.aspx?ToolPaneView=2)

<script type="text/javascript" src="/_layouts/1033/prototype.js"></script>
<script type="text/javascript">
function CustomExecuteFunction() {
    AutopopulateInputFromURL('Project ID','projectID');
}
 
function AutopopulateInputFromURL(title,queryParamName) {
   var inputs = $$('input[title="' + title + '"]');
    if (null != inputs && inputs.length == 1) {
        var input = inputs[0];
        var queryParams = location.href.toQueryParams();
        if (queryParams != null && queryParams[queryParamName] != null) {
           input.setValue(queryParams[queryParamName]);
           var label = "<span>" + input.getValue() + "</span>";
           Element.insert(input, {before: label});
           input.hide();
        }
    }
 }
 
_spBodyOnLoadFunctionNames.push("CustomExecuteFunction");
</script>

Depends on Prototype.js.

]]> http://kitmenke.com/blog/2010/03/11/autopopulate-a-sharepoint-form-from-url/feed/ 0 Editing in SharePoint’s SPGridView http://kitmenke.com/blog/2010/02/18/editing-in-sharepoints-spgridview/ http://kitmenke.com/blog/2010/02/18/editing-in-sharepoints-spgridview/#comments Fri, 19 Feb 2010 03:36:28 +0000 Kit http://kitmenke.com/blog/?p=198 The goal of this post is to provide an easy to understand example of how to enable editing in an SPGridView. In this case, my datasource of choice is a SharePoint list.

The way that I chose to implement editing in an SPGridView involved two classes:

  • SimpleLogic – handles query and update operations
  • SimpleSPGrid – handles all of the setup for the ObjectDataSource and the SPGridView

The main advantage for splitting the two classes is to separate all of the business logic into one class. Ideally, you should be able to completely change how the SimpleLogic class retrieves/updates data without changing the SimpleSPGrid code.

The Setup

In this example, our logic class is retrieving and updating data in a SharePoint list. My SharePoint list had three main columns: Title (text), Region (choice), and Total Sales (currency).

SharePoint list

Now that I had some data to read from and write to, I was ready to create my logic class.

The SimpleLogic Class

The goal for the logic class was to expose all of the operations the gridview would need in order to read or update data:

  1. public DataTable Select()
    How do I get the data?
  2. public List<BoundField> GetColumns()
    How do I display the data?
  3. public void Update(Dictionary<string, string> data)
    How do I update the data?
public class SimpleLogic
{
    const string LIST_NAME = "Example Sales Data";
    readonly string[] LIST_COLUMNS = null;
    readonly string VIEW_FIELDS = string.Empty;
    readonly string[] DATA_KEY_NAMES = null;
    private SPWeb _currentWeb;
 
    public SimpleLogic(SPWeb currentWeb)
    {
        _currentWeb = currentWeb;
 
        DATA_KEY_NAMES = new string[1];
        DATA_KEY_NAMES[0] = "ID";
        LIST_COLUMNS = new string[4];
        LIST_COLUMNS[0] = "ID";
        LIST_COLUMNS[1] = "Title";
        LIST_COLUMNS[2] = "Region";
        LIST_COLUMNS[3] = "Total_x0020_Sales";
        VIEW_FIELDS = GetViewFields(LIST_COLUMNS);
    }
 
    public string[] GetDataKeyNames()
    {
        return DATA_KEY_NAMES;
    }
 
    public List<BoundField> GetColumns()
    {
        List<BoundField> fields = new List<BoundField>();
        fields.Add(GetBoundField("ID"));
        // we don't want the ID field to be editable so we make it readonly
        // readonly will mean a textbox to edit it will not be shown
        fields[0].ReadOnly = true;
        fields.Add(GetBoundField("Title"));
        fields.Add(GetBoundField("Region"));
        fields.Add(GetBoundField("Total_x0020_Sales"));
        return fields;
    }
 
    private BoundField GetBoundField(string name)
    {
        // do not use SPBoundField (will not work with editing)
        BoundField bf = new BoundField();
        bf.HeaderText = name;
        bf.DataField = name;
        return bf;
    }
 
    public DataTable Select()
    {
        SPQuery q = new SPQuery();
        q.ViewFields = VIEW_FIELDS;
        q.Query = "<Where><IsNotNull><FieldRef Name='Title'/></IsNotNull></Where>";
        SPList list = _currentWeb.Lists[LIST_NAME];
        SPListItemCollection items = list.GetItems(q);
        return items.GetDataTable();
    }
 
    private string GetViewFields(string[] columns)
    {
        StringBuilder sb = new StringBuilder();
        foreach (string field in columns)
        {
            sb.AppendFormat("<FieldRef Name='{0}' />", field);
        }
        return sb.ToString();
    }
 
    public void Update(Dictionary<string, string> data)
    {
        SPList list = _currentWeb.Lists[LIST_NAME];
        int id = Int32.Parse(data["ID"]);
        SPListItem item = list.GetItemById(id);
        item["Title"] = data["Title"];
        item["Region"] = data["Region"];
        item["Total_x0020_Sales"] = data["Total_x0020_Sales"];
        item.Update();
    }
}

DISCLAIMER: When actually implementing the class above, you will probably need to add some sort of error handling. In order to provide a simpler example, the error handling has been omitted.

Once our logic class is functioning correctly, we can work on hooking it up to an SPGridView.

The SimpleSPGrid Class

The SimpleSPGrid class contains most of the guts that will probably be different to you. The first thing to notice is that it takes our SimpleLogic class as a parameter. This allows us to instantiate our logic class beforehand with any parameters that are needed, and then pass it into SimpleSPGrid to use.

public class SimpleSPGrid : CompositeControl
{
    private SimpleLogic _logic;
    private ObjectDataSource _gridDS;
    private SPGridView _grid;
 
    public SimpleSPGrid(SimpleLogic logic)
    {
        _logic = logic;
    }
 
    protected sealed override void CreateChildControls()
    {
        const string GRIDID = "grid";
        const string DATASOURCEID = "gridDS";
 
        _gridDS = new ObjectDataSource();
        _gridDS.ID = DATASOURCEID;
        _gridDS.TypeName = typeof(SimpleLogic).AssemblyQualifiedName;
        _gridDS.ObjectCreating += new ObjectDataSourceObjectEventHandler(gridDS_ObjectCreating);
        _gridDS.SelectMethod = "Select";
 
        // to handle updates from the grid
        _gridDS.UpdateMethod = "Update";
        _gridDS.Updating += new ObjectDataSourceMethodEventHandler(gridDS_Updating);
 
        this.Controls.Add(_gridDS);
 
        // create our grid
        _grid = new SPGridView();
        _grid.ID = GRIDID;
        _grid.DataSourceID = _gridDS.ID; // link the grid to the ObjectDataSource
        _grid.AutoGenerateColumns = false; // must be false
 
        // generally the primary key field(s)
        // these will be passed as an input parameter
        _grid.DataKeyNames = _logic.GetDataKeyNames();
 
        // add the column that will allow editing
        CommandField command = new CommandField();
        command.ShowEditButton = true;
        _grid.Columns.Add(command);
 
        // add all of the columns in the datatable to the grid
        // any column that is not readonly will be passed as an input parameter
        foreach (BoundField column in _logic.GetColumns())
        {
            _grid.Columns.Add(column);
        }
 
        this.Controls.Add(_grid);
    }
 
    /// <summary>
    /// Consolidates all of the InputParameters (values from the grid)
    /// into one dictionary of values to send to the update method
    /// </summary>
    void gridDS_Updating(object sender, ObjectDataSourceMethodEventArgs e)
    {
        Dictionary<string, string> data = new Dictionary<string, string>();
 
        foreach (DictionaryEntry entry in e.InputParameters)
        {
            string value = entry.Value == null ? null : entry.Value.ToString();
            data.Add(entry.Key.ToString(), value);
        }
 
        e.InputParameters.Clear();
        e.InputParameters.Add("data", data);
    }
 
    /// <summary>
    /// When the ObjectDataSource is created, hook it up to the Logic class
    /// (so that it uses the Logic class to make the Select, Update... calls)
    /// </summary>
    private void gridDS_ObjectCreating(object sender, ObjectDataSourceEventArgs e)
    {
        e.ObjectInstance = _logic;
    }
}

Wrap up

Now that all the hard work is done, we are ready to use the classes inside our web part. Inside the CreateChildControls of your webpart you would have the following code ( even though we have an SPWeb here, it should NOT be disposed):

protected override void CreateChildControls()
{
    SimpleLogic logic = new SimpleLogic(SPControl.GetContextWeb(Context));
    SimpleSPGrid grid = new SimpleSPGrid(logic);
    this.Controls.Add(grid);
}

This will produce the following grid!

List Data

And clicking edit…

SPGridView Edit Mode

]]> http://kitmenke.com/blog/2010/02/18/editing-in-sharepoints-spgridview/feed/ 1 Relative Dates in JavaScript http://kitmenke.com/blog/2010/01/23/relative-dates-in-javascript/ http://kitmenke.com/blog/2010/01/23/relative-dates-in-javascript/#comments Sun, 24 Jan 2010 03:37:41 +0000 Kit http://kitmenke.com/blog/?p=183 I was developing an input form for a search when I came across the need to allow the user to filter items using a date range. I had two input boxes where the user could enter a start and an end date. For some of the most common date ranges, I decided to create links that could be clicked to auto-populate the start/end date textboxes. For example, searching for items that were created last week or last month. Using JavaScript’s Date object, I was able to put together some nice examples.

First, the setup. I needed two text boxes to hold the start/end dates and then wanted the user to click links to auto-populate them with some relative dates:

<a href="javascript: void(0);" onclick="return setRelativeDate('today')">Today</a>
 
<label for="txtStartDate">Start Date:</label><input id="txtStartDate" type="text" />
<label for="txtEndDate">End Date:</label><input id="txtEndDate" type="text" />

Then to figure out how to calculate the dates using JavaScript. Here are the examples.. starting out easy with Today’s date. When creating a new Date object, it is automatically initialized to the current day and time:

var today = new Date();
txtStartDate.value = getShortDateString(today);
txtEndDate.value = txtStartDate.value;

Yesterday is Today -1:

var yesterday = new Date();
yesterday.setDate(yesterday.getDate()-1);
txtStartDate.value = getShortDateString(yesterday);
txtEndDate.value = txtStartDate.value;

This Week is a little more complicated. getDate() returns the day of the month (1-31) and getDay() returns the day of the week (0-6).

var thisWeek = new Date();
// set the date to most recent Sunday
thisWeek.setDate(thisWeek.getDate() - thisWeek.getDay());
txtStartDate.value = getShortDateString(thisWeek);
// set the date to last week's Saturday
thisWeek.setDate(thisWeek.getDate() + 6);
txtEndDate.value = getShortDateString(thisWeek);

Last Week is pretty similar to this week. I think the hardest part for me is the function names getDate and getDay. I always was getting them confused and thought that they should have been more specific… like getWeekDay and getMonthDay or something.

var lastWeek = new Date();
// set the date to last week's Sunday
lastWeek.setDate(lastWeek.getDate() - lastWeek.getDay() - 7);
txtStartDate.value = getShortDateString(lastWeek);
// set the date to last week's Saturday
lastWeek.setDate(lastWeek.getDate() + 6);
txtEndDate.value = getShortDateString(lastWeek);

The main difficulty I had with This Month was how to figure out the last day of the month. Luckily, if you can figure it out by selecting the first of next month and then subtracting a day.

var lastDayOfThisMonth = new Date();
// go to the next month
var nextMonth = lastDayOfThisMonth.getMonth() + 1;
lastDayOfThisMonth.setMonth(nextMonth);
// go to the last day of the previous month (this month)
lastDayOfThisMonth.setDate(0);
txtEndDate.value = getShortDateString(lastDayOfThisMonth);
lastDayOfThisMonth.setDate(1);
txtStartDate.value = getShortDateString(lastDayOfThisMonth);

Notice how Last Month is actually easier because you can simply move backwards a month.

var lastDayOfLastMonth = new Date(); // now
lastDayOfLastMonth.setDate(0); // last day of last month            
// set the end date first
txtEndDate.value = getShortDateString(lastDayOfLastMonth);
lastDayOfLastMonth.setDate(1);
txtStartDate.value = getShortDateString(lastDayOfLastMonth);

The only issue I had with This Year was I didn’t realize that  setMonth(int) took a zero based month: 0 = January … 11 = December.

var lastDayOfThisYear = new Date();
lastDayOfThisYear.setMonth(11); // December
lastDayOfThisYear.setDate(31);
txtEndDate.value = getShortDateString(lastDayOfThisYear);
lastDayOfThisYear.setMonth(0); // January
lastDayOfThisYear.setDate(1);
txtStartDate.value = getShortDateString(lastDayOfThisYear);

Finally, to figure out Last Year I took advantage of the setFullYear(year,month,day) function to subtract one year.

var lastDayOfLastYear = new Date();
// -1 means last year
// 11 means December and there always is a 31st of december
var thisYear = lastDayOfLastYear.getFullYear();
lastDayOfLastYear.setFullYear(thisYear - 1, 11, 31);
txtEndDate.value = getShortDateString(lastDayOfLastYear);
lastDayOfLastYear.setMonth(0); // January
lastDayOfLastYear.setDate(1); // 1st
txtStartDate.value = getShortDateString(lastDayOfLastYear);

See all of it together in the complete demo.

References:

]]> http://kitmenke.com/blog/2010/01/23/relative-dates-in-javascript/feed/ 0 Turning SharePoint SPAuditEntry Update into Create http://kitmenke.com/blog/2010/01/22/turning-sharepoint-spauditentry-update-into-create/ http://kitmenke.com/blog/2010/01/22/turning-sharepoint-spauditentry-update-into-create/#comments Fri, 22 Jan 2010 21:42:47 +0000 Kit http://kitmenke.com/blog/?p=178 If you’ve done any work with SharePoint and SPAuditEntry, you may have noticed the distinct lack of Create event. Instead, two Update events are created which means some extra processing is required.

For example, after uploading “NewTxtFile.txt” into a document library inside one of my sites, the following Audit Entries showed up.

<AuditEntry>
  <SiteId>9a70a244-1baa-4229-84ac-3f06bccecc7f</SiteId>
  <ItemId>19ce9254-93bc-41ff-9da1-ba5e994bf1c1</ItemId>
  <ItemType>Document</ItemType>
  <UserId>2</UserId>
  <DocLocation>sites/MySiteCollection/MySubsite/Documents/NewTxtFile.txt</DocLocation>
  <LocationType>Url</LocationType>
  <Occurred>1/22/2010 9:17:06 PM</Occurred>
  <Event>Update</Event>
  <EventSource>SharePoint</EventSource>
</AuditEntry>
 
<AuditEntry>
  <SiteId>9a70a244-1baa-4229-84ac-3f06bccecc7f</SiteId>
  <ItemId>f332a82b-17d1-4c31-9726-5259769f2695</ItemId>
  <ItemType>List</ItemType>
  <UserId>2</UserId>
  <DocLocation>sites/MySiteCollection/MySubsite/Documents</DocLocation>
  <LocationType>Url</LocationType>
  <Occurred>1/22/2010 9:17:06 PM</Occurred>
  <Event>Update</Event>
  <EventSource>SharePoint</EventSource>
  <EventData>NewTxtFile.txt</EventData>
</AuditEntry>

Notice the “Occurred” DateTime properties are the same as well the Event. Also, one is an Update for the List and one is an Update for the Document. Using this information, you can then simplify the duplicate Update events into one Create event!

]]> http://kitmenke.com/blog/2010/01/22/turning-sharepoint-spauditentry-update-into-create/feed/ 0 AllowUnsafeUpdates and ValidateFormDigest http://kitmenke.com/blog/2009/12/23/allowunsafeupdates-and-validateformdigest/ http://kitmenke.com/blog/2009/12/23/allowunsafeupdates-and-validateformdigest/#comments Wed, 23 Dec 2009 16:34:41 +0000 Kit http://kitmenke.com/blog/?p=175 Add this to the list of things every SharePoint developer should know (up there with disposing SPWebs and SPSites).

In general…

  1. Don’t update SharePoint objects on a GET request
  2. Call SPUtility.ValidateFormDigest() before anything on a POST request

Here are the two links to read:

]]> http://kitmenke.com/blog/2009/12/23/allowunsafeupdates-and-validateformdigest/feed/ 0 Internal column names: Site Columns vs List Columns http://kitmenke.com/blog/2009/12/02/internal-column-names-site-columns-vs-list-columns/ http://kitmenke.com/blog/2009/12/02/internal-column-names-site-columns-vs-list-columns/#comments Wed, 02 Dec 2009 21:02:32 +0000 Kit http://kitmenke.com/blog/?p=166 Two identical custom lists with the same columns. The only difference is that one list has columns added using Site Columns and the other list had columns added directly to the list. The same? Not so much…

Steps to repro this issue:

  1. Create a site column named “A,B-C/D” (single line of text or any other type)
  2. Create a list named “Special Characters (Site)”
  3. Add the Site Column “A,B-C/D” to your “Special Characters (Site)” list.
  4. Create another list named “Special Characters (List)”
  5. Create a column in “Special Characters (List)” named the same as your site column (“A,B-C/D”)

Results:

  Column Added Using Site Column Column Created Directly in the List
Column Name A,B-C/D A,B-C/D
Internal Column Name A_x002C_B_x002d_C_x002F_D A_x002c_B_x002d_C_x002f_D

The internal column names are DIFFERENT.

… but only for some of the characters. Looks like the comma and the slash are different but not the dash.

]]> http://kitmenke.com/blog/2009/12/02/internal-column-names-site-columns-vs-list-columns/feed/ 1 Updating choice fields via SharePoint Web Services http://kitmenke.com/blog/2009/10/30/updating-choice-fields-via-sharepoint-web-services/ http://kitmenke.com/blog/2009/10/30/updating-choice-fields-via-sharepoint-web-services/#comments Fri, 30 Oct 2009 16:06:40 +0000 Kit http://kitmenke.com/blog/?p=148 My problem started with a simple change to a site column. I had originally created a Country field with the following values:

  • US
  • Canada

After a change in requirements, the new values for the field were:

  • Canada
  • Germany
  • Great Britain
  • Ireland
  • United States

After updating the site column, I then needed to update the hundreds of items in the list to use “United States” instead of “US”. Instead of updating hundreds of items manually, I decided to write a small web services console app. (I was also not able to update it in datasheet… due to content approval maybe???)

However, I quickly ran into problems when attempting to update the multi-select choice field.

The Setup:

My site column was defined with each choice for Country in alphabetical order:
2009-10-30 10 24 59

Symptoms:

The symptoms of my problem were very strange. After running my app successfully, it seemed as if my updates were simply ignored by the server.

  1. The item is successfully updated using the Lists.asmx (it even creates a new version!)
  2. The item does not show the updated value for your multi-select choice field in the UI.

The Code:

Here is the very simple code that is creating the update message:

private static void AddCountryUpdate(ref StringBuilder sb, int count, string id, string newCountry)
{
    sb.AppendFormat("<Method ID='{0}' Cmd='Update'>", count);
    sb.AppendFormat("<Field Name='ID'>{0}</Field>", id);
    sb.AppendFormat("<Field Name='Country'>{0}</Field>", newCountry);
    sb.Append("</Method>");
}

Calling the following code to update:

XmlDocument xmlDoc = new System.Xml.XmlDocument();
System.Xml.XmlElement elBatch = xmlDoc.CreateElement("Batch");
elBatch.InnerXml = sb.ToString();
XmlNode ndReturn = list.ListWebSvc.UpdateListItems(listName, elBatch);

The Results:

Attempting to update Country to be “;#United States;#Canada;#” resulted in a ”success” response (error code of 0×00000000) even when the update was NOT successful:

 <Result ID="373,Update">
  <ErrorCode>0x00000000</ErrorCode>
  <z:row ows_ID="1311" ows_Country=";#United States;#Canada;#" ows_Modified="2009-10-29 16:01:05" ows__UIVersionString="6.0" />
</Result>

Viewing this in the UI still shows the old value:

 Country - Old Value

However, only after the values are in order, “;#Canada;#United States;#”, will the update actually happen.

<Result ID="223,Update">
  <ErrorCode>0x00000000</ErrorCode>
  <z:row ows_ID="1311" ows_Country=";#Canada;#United States;#" ows_Modified="2009-10-30 08:51:45" ows__UIVersionString="7.0" />
</Result>

Viewing this in the UI shows the updated value:

Country - Correct

Notice it still created a version 6.0 and 7.0:

Version History

Conclusion:

When updating a multi-select choice field using SharePoint’s Lists.asmx web service, the order of the choices in the update message are important. If they are out of order, it will not update.

]]> http://kitmenke.com/blog/2009/10/30/updating-choice-fields-via-sharepoint-web-services/feed/ 1 SharePoint’s SPGridView, filtering, and apostrophes http://kitmenke.com/blog/2009/09/05/sharepoints-spgridview-filtering-and-apostrophes/ http://kitmenke.com/blog/2009/09/05/sharepoints-spgridview-filtering-and-apostrophes/#comments Sat, 05 Sep 2009 06:10:43 +0000 Kit http://kitmenke.com/blog/?p=138 The SPGridView is one of the most useful SharePoint controls. You can use it to do sorting, grouping, and filtering just like the out of the box List View Web Part does for regular lists and libraries. This makes it relatively easy to create a custom grid with your own data. Unfortunately, filtering with the SPGridView is a little quirky, especially if your data could potentially contain apostrophes.

Essentially, all you need to do is set a few quick properties to enable filtering on the SPGridView. (see the great tutorial on Reverse Alchemy for more information)

// Filtering
grid.AllowFiltering = true;
grid.FilterDataFields = ",Name,Region,Total Sales";
grid.FilteredDataSourcePropertyName = "FilterExpression";
grid.FilteredDataSourcePropertyFormat = "{1} = '{0}'";

2009-09-03 14 04 35

However, what happens if you have an apostrophe for the value in one of your filters (for example filtering on the name of O’Reilly). Eventually, you will end up with a filter of:

Name = 'O'Reilly'

If this is the case, when you attempt to filter using that value you will get the error:

Syntax error: Missing operand after 'Reilly' operator

(See the question asked by Moo on StackOverflow)

So how do you prevent the apostrophes from messing up your filter?

protected override void OnPreRender(EventArgs e)
 {
     if (!string.IsNullOrEmpty(_gridDS.FilterExpression))
     {
         _gridDS.FilterExpression = string.Format(
             _grid.FilteredDataSourcePropertyFormat,
             _grid.FilterFieldValue.Replace("'", "''"),
             _grid.FilterFieldName);
     }
     base.OnPreRender(e);
 }

2009-09-03 14 07 58

Where _gridDS is an ObjectDataSource (you must use an ObjectDataSource as opposed to setting the DataSource SPGridView property) and _grid is your SPGridView.

The solution is relatively simple… but what is happening behind the scenes? Actually, pretty much the same thing but without the replace. The SPGridView looks up your ObjectDataSource using the DataSourceID property. Once it has your ObjectDataSource, it then sets the property specified in FilteredDataSourcePropertyName (FilterExpression) to be the filter. Once you understand that behind the scenes, all it really is doing is setting the FilterExpression on your datasource, it is pretty easy to override the incorrect filter with a correct one.

]]> http://kitmenke.com/blog/2009/09/05/sharepoints-spgridview-filtering-and-apostrophes/feed/ 1 Filtering a list by Workflow Status http://kitmenke.com/blog/2009/08/25/filtering-a-list-by-workflow-status/ http://kitmenke.com/blog/2009/08/25/filtering-a-list-by-workflow-status/#comments Tue, 25 Aug 2009 18:25:59 +0000 Kit http://kitmenke.com/blog/?p=131 The most recent problem I ran into was when I tried to filter out items that had a  certain Workflow status in the list. More specifically, I was trying to filter on items that had errored out and had a status of “Error Occurred” in the list.

My first thought was to try to filter based on the text. Using a contains didn’t work; I got a message about you can only use a contains on Single line of text, Multiple line of text, or Choice fields.

The solution is to filter based on the integer value:
Workflow Status List Filter

Listed below are the other values in the enum that you can use for the various states.

public enum SPWorkflowStatus
{
    NotStarted = 0,
    FailedOnStart = 1,
    InProgress = 2,
    ErrorOccurred = 3,
    StoppedByUser = 4,
    Completed = 5,
    FailedOnStartRetrying = 6,
    ErrorOccurredRetrying = 7,
    ViewQueryOverflow = 8,
    Max = 15,
}
]]> http://kitmenke.com/blog/2009/08/25/filtering-a-list-by-workflow-status/feed/ 0