The business case for this, was to add a context menu item based on an item property, in my case, document status. Manipulating context menu items is a long winded process, one which is best read in posts such as this post or another post here

Essentially this method was called just before the item is added to the context menu item, it is intercepted at the Custom_AddListMenuItems method which allows you to add list menu items. In the method below, i use the local ID of the conext menu item clicked, together with the list guid (ctx.listname) and i query the list for the document status of that item.

I only add the menu item when docstatus is not equal to published. Another interesting note is the ajax call is done synchronously which forces the program halt execution until the ajax call has received a response from the web service.

function ShowModerationHistory(currentItemID, r, t, m, v, y) {
 
    var returnValue = false;
    var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>" + ctx.listName + "</listName>" +
			            "<viewFields>" +
			            "<ViewFields>" +
		                    "<FieldRef Name='DocumentStatus' />" +
			            "</ViewFields>" +
     			        "</viewFields>" +
                            "<query>" +
			                    "<Query>" +
                                    "<Where>" +
                                    "<Eq>" +
                                    "<FieldRef Name='ID' />" +
                                    "<Value Type='Integer'>" + currentItemID + "</Value>" +
                                    "</Eq>" +
                                    "</Where>" +
                                "</Query>" +
                            "</query> " +
                        "</GetListItems> " +
                    "</soapenv:Body> " +
                "</soapenv:Envelope>";
    $.ajax({
        url: SP.PageContextInfo.get_webServerRelativeUrl() + "/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        async: false,
        complete: function (xData, status) {
            var docStatus = $(xData.responseXML).find("z\\:row:eq(0)").attr("ows_DocumentStatus");
            if (docStatus != null && docStatus != undefined) {
                if (docStatus.toUpperCase() != "PUBLISHED") {
                    x = CIMOpt(r, t, m, v, null, y);
                }
            }
        },
        beforeSend: function (xhr) {
            xhr.setRequestHeader('SOAPAction', 'http://schemas.microsoft.com/sharepoint/soap/GetListItems');
        },
        contentType: "text/xml; charset=\"utf-8\""
    });
 
}

The feature allows users to use an “image uploader” column when adding both the main image and the thumbnail image on the news rotator. Once the webpart has been installed, the announcements list, which hosts the news items needs to be configured in the following way (the following image shows the image uploader type column):

1. Create 2 columns on the appropriate announcements list – These columns should be of type “Image Uploader” and should be called “Image File” and “Image Thumb Url”.
2. The 1st image uploader column (“Image File”) should have a width set to 270px
3. The 2nd image uploader column (“Image Thumb Url”) should have a width set to 50px
4. Remember to disable attachments for this list.
5. Other configuration includes the “upload images to the following list” storage document library (where the images will be stored, along with the resized images)

Then add the webpart to the page and edit the properties of the webpart (toolpane)

1. Set “News Image URL Column” to “Image File”
2. Set “News Thumb Image URL Column” to “Image Thumb Url”

You can download this version of the webpart (2010 version) on codeplex here

If your button doesnt postback (as in you submit your data on the client side), your requiredfieldvalidators will not fire and validation will not occur.

Well this helpful article over here helps me with that everytime:

http://alvinzc.blogspot.com/2006/10/aspnet-requiredfieldvalidator.html

Thanks to Alvin

I used jQuery’s ajax POST function to create a post to my code-behind method. Simple right? wrong. I ran into the infamous:

The security validation for this page is invalid. Click Back in your Web browser

Well i tried the usual tricks:

1) Setting web.AllowUnsafeUpdates = true. Didnt work
2) Tried the SPUtility.ValidateFormDigest method on the POST. Didnt work.
3) Tried the SPWebApplication.FormDigestSettings approach and set it to false, initiate the call and reset it. I frown on this approach as it does require to essentially make a change to what we would be doing in central admin in turning off the Form Digest Settings and then resetting it. Nonetheless, this did not work. I later found that updating anything “central admin” related gave me an access denied. This was due to us running our web app with claims. (SAML)

So i was stumped. I went back to basics.

I created a normal button which did a postback and called the self site create method. No problems with that POST. But a problem with my client side jQuery post.

So I then turned to Fiddler to see what the difference was between the two POST calls. Through spoofing POST calls i finally found an interesting POST variable which is passed with a normal postback generated by a button sitting within a Sharepoint context.

__REQUESTDIGEST

I did a quick google and found this post which was more than helpful. According to this post the variable is:

nothing more than a hidden field set by the server and verified back by the server when the page is submitted. As documented by Microsoft: The purpose of form digest validation is to help prevent security attacks where a user is tricked into posting data unknowingly to a server

Read this post if you come across the problem i explain above. It really does explain this issue really well.

After reading it thoroughly i realised i just need to pass in the variable with the POST’s data when doing the AJAX call: Here’s what my jQuery ajax POST looked like in the end:

 $.ajax({
                type: "POST",
                url: "CreatePersonalWorkspace.aspx",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Content-Type",
                         "application/x-www-form-urlencoded");
 
 
                },
                data: "method=CreatePersonalWorkspace&__REQUESTDIGEST=" + $("#__REQUESTDIGEST").val(), //Pass through the requestdigest on the post - necessary to execute provisionworkspace method - this is passed through on all posts
                success: function (msg) {
                    var result = JSON.parse(msg);
                    if (result[0].Status == "created") {
                        $("div[id$='provisioningDiv']").hide();
                        $("#personal_workspace_url").attr("href", result[0].Value);
                        $("#personal_workspace_url").show();
                    } else if (result[0].Status == "redirect") {
                        document.location = result[0].Value;
                    }
                    else {
                        $("#errorResponse").html(result[0].Value);
                    }
                }
            });

This all would not have been possible without the help of Karine Bosch’s Post on Custom Dialogs.

The following is a screenshot of the end product:

The page is invoked from a custom ribbon control however this only makes a call to our custom AssetPicker dialog. The source code (elements.xml) provides a split button control which invokes the picker for both replacing and inserting images. This ribbon control element (elements.xml) replaces the OOTB “Insert Image” control, however can be customized to add the default “From Address” and “From Computer” split options at a later stage.

The LaunchPicker method in the xml file invokes the OpenDialog method which in our project has been created as an extension to jQuery. However this need not be the case. Its merely a function which calls the SP.UI.ModalDialog.showModalDialog() method with a bunch of options. Note the callback method which is specified in the LaunchPicker method. This method is called once the image has been selected; this is known as the “callback method”. Careful that you only pass “replace” or “insert” to the LaunchPicker method.

Right lets move onto the AssetPicker itself. The .aspx is pretty much the simple part simply with a method which allows the user to choose the right image and invoke the callback method. It uses a repeater control to populate the images datasource.

The code-behind features several enhancements including a paging function. The repeater control provides us with the datasource of all the images found within the choosen folder or document library itself. Note: We have used a custom document library basetemplate and populate our treeview with these document libraries. This is where you may customize the code to search for Document Libraries or Image Libraries only. Be careful not to include generic lists as the code searches for files only.

Once the image has been chosen, the pickerCallBack callback method is fired as shown in javascript file. This in turn may replace or insert an image using the InsertRTEImage or ReplaceRTEImage depending on the options you passed to the launchpicker method.

The source files are attached.

One of the latest modules for the Project is the media library ribbon control, a control which manipulates the way our users will upload images to Sharepoint.

The OOTB functionality allows users to upload images from multiple sources namely:

1) From Sharepoint
2) From Computer
3) From Address

We needed new functionality to be able to upload images using a silverlight control (activex prevents our users using Firefox which is a big problem for the 70,000 odd users!). The silverlight control also checks for banned words which wasnt available to us. The key functionality here is:

1) Replace the existing “Upload Picture” split button with ours

2) Call the Upload Image Dialog

3) Instantiate the callback method which inserts the image back into the Rich Text Editor

First up, we need to create a new module in Visual Studio 2010. This is the module which act as a replacement button for OOTB “Upload Picture” split button. Im not going to go through doing this as this is basic VS2010 functionality. The new elements.xml file is as below:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
 Id="Ribbon.Image.Image.Edit.ReplacementButton"
 Location="CommandUI.Ribbon"
 Rights ="EditListItems" >
    <CommandUIExtension>
      <CommandUIDefinitions>
<CommandUIDefinition
          Location="Ribbon.EditingTools.CPInsert.Media.Image">
          <SplitButton
                  Id="Ribbon.EditingTools.CPInsert.Media.Image.ReplacementButton"
                  Alt="$Resources:core,ButInsertImageAlt;"
                  Command="InsertImage"
                  CommandMenuOpen="InsertImageMenuOpen"
                  CommandMenuClose="InsertImageMenuClose"
                  Image16by16="/_layouts/$Resources:core,Language;/images/formatmap16x16.png" Image16by16Top="-176" Image16by16Left="-224"
                  Image32by32="/_layouts/$Resources:core,Language;/images/formatmap32x32.png" Image32by32Top="-192" Image32by32Left="-448"
                  LabelText="Insert Image"
                  MenuAlt="$Resources:core,ButInsertImageMenuAlt;"
                  Sequence="10"
                  TemplateAlias="o1"
                  ToolTipTitle="$Resources:core,cui_ButInsertImage;"
                  ToolTipDescription="$Resources:core,cui_STT_ButInsertImage;">
            <Menu Id="Ribbon.EditingTools.CPInsert.Media.Image.Menu.Replacement">
              <MenuSection
                Id="Ribbon.EditingTools.CPInsert.Media.Image.Menu.Image.Replacement"
                DisplayMode="Menu"
                Sequence="10">
                <Controls Id="Ribbon.EditingTools.CPInsert.Media.Image.Menu.Image.Controls.Replacement">
                  <Button
                    Id="Ribbon.EditingTools.CPInsert.Media.Image.Menu.Image.FromComputer.Replacement"
                    Sequence="10"
                    Alt="$Resources:core,ButFromComputerAlt;"
                    Command="UploadPictureReplacement"
                    LabelText="$Resources:core,ButFromComputer;"
                    ToolTipTitle="$Resources:core,cui_STT_title_ButInsertImageFromComputer;"
                    ToolTipDescription="$Resources:core,cui_STT_ButInsertImageFromComputer;"/>
                  <Button
                    Id="Ribbon.EditingTools.CPInsert.Media.Image.Menu.Image.FromMediaLibrary.Replacement"
                    Sequence="15"
                    Alt="$Resources:core,ButFromAddressAlt;"
                    Command=".MediaLibrary.Ribbon.PerformInsert"
                    LabelText="From Media Library"
                    ToolTipTitle="Insert Picture from Media Library"
                    ToolTipDescription="Insert a picture from Media Library onto the page"/>
                  <Button
                    Id="Ribbon.EditingTools.CPInsert.Media.Image.Menu.Image.FromAddress.Replacement"
                    Sequence="20"
                    Alt="$Resources:core,ButFromAddressAlt;"
                    Command="InsertImageWeb"
                    LabelText="$Resources:core,ButFromAddress;"
                    ToolTipTitle="$Resources:core,cui_STT_title_ButInsertImageFromAddress;"
                    ToolTipDescription="$Resources:core,cui_STT_ButInsertImageFromAddress;"/>
                  <Button
                    Id="Ribbon.EditingTools.CPInsert.Media.Image.Menu.Image.FromSharepoint.Replacement"
                    Sequence="25"
                    Alt="From Sharepoint"
                    Command="InsertImageSharepoint"
                    LabelText="From Sharepoint"
                    ToolTipTitle="Insert Image from Sharepoint"
                    ToolTipDescription="Insert an image using the asset picker tool"/>
 
                </Controls>
              </MenuSection>
            </Menu>
          </SplitButton>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
            Command="UploadPictureReplacement"
            CommandAction= "javascript:
        var id='?RootFolder=&amp;DisplayType=uploadimages';        
        uploadImageDialog(id);
        " />
 
      </CommandUIHandlers>
    </CommandUIExtension>
 
  </CustomAction>
</Elements>
 

Notes:

1) Line 11: The Location specified is exactly the same as the one listed in the CMDUI.xml file (This is the file which lists the OOTB ribbon controls). This is ensures we replace the ribbon control not create a new one.
2) Line 22: Use the same sequence number to replace the button
3) Line 36: The method name which invokes the javascript. See Line 73

Right, so first thing to remember. Everytime you deploy the feature or change it in any way, you need to clear the cookies/cache. Your changes wont be seen otherwise. That took me about 5 hours of work right there!!

Now, for the javascript. We use the ECMAScript opendialog functionality where we specify our own callback function which will be called one we’re done with the upload functionality (not covered here. this functionality would be part of the dialog you launch).

openDialog: function (params) {
            params = $.extend({
                id: "",
                allowMaximize: true,
                showClose: true,
                callBackFunction: CallDETCustomDialog
            }, params);
            var siteurl = SP.PageContextInfo.get_webServerRelativeUrl();
            var options = SP.UI.$create_DialogOptions();
            if (siteurl == "/") {
                options.url = params.url + params.id;
            }
            else {
                options.url = siteurl + params.url + params.id;
            }
            options.allowMaximize = params.allowMaximize;
            options.showClose = params.showClose;
            options.width = params.width;
            options.height = params.height;
            options.dialogReturnValueCallback = params.callBackFunction;
            SP.UI.ModalDialog.showModalDialog(options);
            //SP.UI.ModalDialog.showWaitScreenWithNoClose();
        }
 
// upload Image Dialog
function uploadImageDialog(id) {
    $(this).openDialog({
        id: id,
        url: "/_layouts/FileUpload/BasicUpload.aspx",
        callBackFunction: InsertImageUploadedCallback
    });
}
 
function InsertImageUploadedCallback(dialogResult, returnValue) {
 
    if (dialogResult == "OK") {
        //Delete any existing content the range contains
        RTE.Cursor.get_range().deleteContent();
 
        //Get a handle on the current range of the cursor inside the RTE
        var rng = RTE.Cursor.get_range().$3_0;
 
        //Create a DOM object representing the image
        var d = rng.ownerDocument;
        var a = d.createElement("img");
        //a.setAttribute("id", uniqueid);
        a.setAttribute("src", returnValue);
 
        //Insert the image into the RTE at the current cursor range position  
        SP.UI.UIUtility.insertAfter(a, rng);
    }
    if (dialogResult == "Replace") {
 
        var $v_0 = RTE.Cursor.getSelectedImage();
        if (!$v_0) {
 
        }
        if ($v_0.complete || $v_0.readyState === 'complete') {
            $v_0.setAttribute("src", returnValue);
        }
 
    }
}
 

Notes:

1) Line 27: UploadImageDialog launches our dialog with the appropriate callbackfunction
2) Line 21: Is set to InsertImageUploadedCallback
3) Line 37 – Line 51: Use this to insert a new image into the rich text editor.
4) Line 53 – Line 63: Use this to replace the currently selected image

So once we have this functionality we can now create a new aspx page which would be invoked using this dialog. We called ours “basicupload.aspx”.

Within this page’s OnSave method we implemented some javascript which would then invoke the callback method and pass back the image url to the callback method. This is acheived using the following code:

if(containerState == ContainerState.UploadImages)
                                        this.Page.ClientScript.RegisterStartupScript(this.GetType(), "InsertImageUploadedCallback", "commonModalDialogClose('OK', '" + oWeb.Url + "/" + oImageItem.File.Url + "');", true);
                                    else
                                        this.Page.ClientScript.RegisterStartupScript(this.GetType(), "InsertImageUploadedCallback", "commonModalDialogClose('Replace', '" + oWeb.Url + "/" + oImageItem.File.Url + "');", true);                                
 

Notes:

The code shown above passes back the uploaded image file url back to the callback method based on whether we are replacing or uploading a new image.

Although i cannot say much about the project it involves building a large LMS system which allows a potential 1.3 million students to collaborate on homework, with teachers and submit assignments online. It has created such a stir in the industry that Steve Ballmer is officially our executive project sponsor! To hear a bit more about it, check out this video. Make sure you fast forward to 23mins into the video to hear about the project!

Normally we’d use a simple UrlAction and fill the Url with the redirect. However in this case to call the modal, we can do the following:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="ReportConcern" RegistrationType="ContentType" RegistrationId="0x0101009b56d20860764b8090e63b320d78f98c" Location="EditControlBlock" Sequence="107" Title="Report Concern" Description="To report a concern on this item">
    <UrlAction Url="javascript:
              function CallDETCustomDialog(dialogResult, returnValue) 
              {
                SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
              }
              var options = {              
              url: '{SiteUrl}' + '/_layouts/ReportConcern/ReportConcern.aspx?List={ListId}&amp;ID={ItemId}',
              title: 'Report Concern',
              allowMaximize: false,
              showClose: true,
              width: 500,
              height: 300,
              dialogReturnValueCallback: CallDETCustomDialog };
              SP.UI.ModalDialog.showModalDialog(options);" />
      </CustomAction>
</Elements>

 
function delete_list(listid) {
            if (confirm("Are you sure you want to delete this container?") == true) {
                var message = listid;
                var soapEnv =
                "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                    <soapenv:Body> \
                        <DeleteList xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>" + listid + "</listName>\
                        </DeleteList> \
                    </soapenv:Body> \
                </soapenv:Envelope>";
 
                $.ajax({
                    url: "_vti_bin/lists.asmx",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("SOAPAction",
        "http://schemas.microsoft.com/sharepoint/soap/DeleteList");
                    },
                    type: "POST",
                    dataType: "xml",
                    data: soapEnv,
                    contentType: "text/xml; charset=\"utf-8\"",
                    complete: processResult,
                    success: function (j) {
                        document.location.reload();
                    }
                });
 
            } else {
                return false;
            }
        }
        function processResult(xData, status) { 
            var resultXml = $(xData.responseXML).find("errorstring").text();
            resultXml = $.trim(resultXml);
            if (resultXml != "") {
                alert(resultXml);
            }           
        }

The differential always comes down to a couple of deal breakers:

1) The extent that search will play a role in their organisation
2) The role of the automation of business processes within the organisation

When deciding between MOSS and WSS, for most organisations using Sharepoint 2007 as an intranet, it is normally the deal breakers mentioned above which entice them to go MOSS 2007 or WSS 3.0. When WSS 3.0 was released intially back in 2006, the difference between MOSS 2007 and WSS 3.0 was quite obvious. But as each of the above have been implemented, sharepoint services companies have slowly developed small features to make up the ground between the two. Take Stramit’s Masterpage Picker which gives one the masterpage and branding type functionality of MOSS with a simple feature or Bamboo’s Mashpoint allowing WSS to take advantage of BDC-like functionality. Im not saying that WSS with a couple of codeplex features will replicate the functionality of MOSS, things like Excel Services, Information Management Policies, Search and Navigation. But what am i saying is that WSS can provide a very rich interface for intranet and extranet deployments.

With the advent of Microsoft Search Server Express, search has become extremely powerful in WSS allowing organisations to use WSS to search Sharepoint Content, Website Content, Fileshares and Exhange Public folders (no people search which is at times a real make or break). Nonetheless i feel it still provides a rich functionality which makes me think that Infopath Forms Services is the real deal breaker. How many of you have used Sharepoint Designer to manipulate Sharepoint List Forms? Ever added a new column and then had a look if your customized form inherits the new column? Ever tried to create business rules around a form? For everything that Infopath provides us, i find that we suggest MOSS time and time again purely on the basis of automating business process within a organisation.

Many would disagree with the above, and yes, there are many features which MOSS adds where WSS does not compete, and theres no doubt, given a client has the budget, id suggest MOSS everyday. However id still love to have the “why do you suggest MOSS over WSS” discussion with some of our colleagues at Sharepint, especially to cash strapped SME businesses.

The crux of my post

Infopath has an almost complete set of functionality available to browser-enabled Sharepoint forms. The ability to “import” and “export” data from Line of Business Systems, addition of business rules and branding of Forms makes it the only option to publish forms with rich functionality to Sharepoint. Why is it that Infopath is the only player in the Forms department. There are multiple workflow providers, Nintex and Blackpoint to name a few. They make designing more complex workflows slightly easier to the average business user or sharepoint consultant and certainly have helped our clients save many hours in the solution development lifecycle. With the business process automation market almost captured, why is it that there isnt a forms provider who can compete with the Infopath juggernaut?

It would certainly lead me to recommend WSS to many cash-strapped SME’s depending on the price or licensing model and with the strong built-in workflow capability of WSS, it seems a no-brainer…. or maybe not?