Apr
11
2009

Virtual Earth Map Control on SharePoint

James Tsai .Net SharePoint Blog Virtual Earth Map Control

Well, I finally have some free time to play with it. I know, I am two years late on this topic. But I still wanted to see how Microsoft Virtual Earth Map Control can work together with SharePoint, so I created a control that does following tasks

1. Read saved locations from SharePoint List

Read saved locations information from SharePoint list. SharePoint list stores location items with Title, Address and Description fields.

James Tsai .Net SharePoint Blog Address Book SharePoint List

Render all the locations stored in SharePoint list on Virtual Earth Map Control. Virtual earth Map Control is embedded in Content editor web part - there is no need to create a custom web part.

Display custom created panel control (VEMap Control) on Virtual Earth Map Control. It shows the pushpins, location Id and Titles - user click on the pushpin Id in panel control to see the corresponded location on map

James Tsai .Net SharePoint Blog Virtual Earth Map Control View Mode

2. Write to SharePoint List

Display Pushpin Information box when user click on pushpins – information box contains the custom created HTML with Text boxes and Edit/Save/Cancel action links.

Push changed value back to SharePoint list via SharePoint list web service (/_vti_bin/lists.asmx)

James Tsai .Net SharePoint Blog Virtual Earth Map Control Edit Mode

How to do it

Download JavaScript Files

More...

Oct
27
2008

How To Create AJAX-enabled SharePoint Web Part with UpdatePanel and UpdateProgress in 10 minutes

In this post I am going to show you how you can setup your SharePoint site to support Microsoft ASP.NET AJAX framework and create a basic AJAX-enabled SharePoint Web Part. You can find many great articles on MSDN on how to do these and they explained in more details, but if you are looking for a way to get it up and running in 10 minutes, this is it.

James Tsai .NET SharePoint Blog - AJAX enabled webpart 

James Tsai .Net SharePoint Blog - AJAX enabled webpart updating

An AJAX-enabled web part with update button and display current time every time when button is clicked. Loading image and text displayed during the update.

Goal

  • Enabling SharePoint site with ASP.NET AJAX framework support
  • Create AJAX-enabled SharePoint web part
    • with UpdateProgress control for visual feedback in browser when web part is updating
    • with AJAX request event script to hide UpdatePanel while web part is updating
  • Add AJAX-enabled web part to page and see it in action

More...

May
20
2008

Using JavaScript to check SharePoint list item workflow status - Via Web Service call.

Microsoft Office SharePoint Server comes with many built-in Web services. And the one we are going to use here is the Workflow web service "/_vti_bin/workflow.asmx"

- GetWorkflowDataForItem operation in particular

The following JavaScript code example is fairly easy to understand.

It takes two parameters.

siteUrl - URL to your site, currentItemFileFullUrl - absolute URL to the item

And it will return you the message about item workflow status.

function CheckRunningWorkflow(siteUrl,currentItemFileFullUrl)
{
    var xh=new ActiveXObject("Microsoft.XMLHTTP");

    if (xh==null)
        return "Error: Cannot create XMLHTTP object";

    xh.Open("POST", siteUrl+"/_vti_bin/workflow.asmx", false);
    xh.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
    xh.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/workflow/GetWorkflowDataForItem");

    var soapData='<?xml version="1.0" encoding="utf-8"?>'+
    '<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:Body>'+
    '<GetWorkflowDataForItem xmlns="http://schemas.microsoft.com/sharepoint/soap/workflow/"><item>'+
    currentItemFileFullUrl+
    '</item></GetWorkflowDataForItem></soap:Body></soap:Envelope>'

    xh.Send(soapData);   

    if (xh.status==200)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        if (xmlDoc==null)
            return false;
        xmlDoc.async = "false";                   
        if(!xmlDoc.loadXML(xh.ResponseText))
            return false;
    var xpath = "/soap:Envelope"+
    "/soap:Body"+
    "/GetWorkflowDataForItemResponse"+
    "/GetWorkflowDataForItemResult"+
    "/WorkflowData"+
    "/ActiveWorkflowsData"+
    "/Workflows"+
    "/Workflow"

        var activeWF=xmlDoc.selectSingleNode(xpath)

    //Check if there is an active workflow for current item       
        if(activeWF != null)
        {
        //Check Workflow status code
            if(activeWF.getAttribute("InternalState") == '2')
            {
                return "Running";
            }
        else if(activeWF.getAttribute("InternalState") == '4')
            {
                return "Completed";
            }
        }
    else
    {
        reutrn "No active workflow for this item";
    }

    return "Workflow status for this item is not Running or Completed"
    }
    return "Failed to call web service";
}

 

Note: In above we only checked InternalState  is 2 or 4. Which are SPWorkflowState enumeration values of "Running" and "Completed"

The complete set of status are:

None

0

Locked

1

Running

2

Completed

4

Cancelled

8

Expiring

16

Expired

32

Faulting

64

Terminated

128

Suspended

256

Orphaned

512

HasNewEvents

1024

NotStarted

2048

All

4095

I always found this code useful when client wants custom Context menu, or when managed code is not an option.
Feb
24
2008

How to add a new event to controls in ListFormWebPart on the EditFrom.aspx / NewFrom.aspx pages

Background - The controls in EditForm.aspx and NewForm.aspx pages you see when you add/edit a item in SharePoint list library are generated by ListFormWebPart.

The problem - We want to attach a new event to the button (or any controls in this page). For example, we want to popup a javascript alert message when user click on "OK" button without breaking current onclick event.

Solution - This can be easily done by using javascript. And re-register onclick event for the OK button.

First, we need to find out the ID used by OK button control. When you view the source html of EditForm.aspx/NewForm.aspx, you can see the ID of OK button is ending with "SaveItem".

button_id

We also need to find out the default onclick event script of this OK button. So that we can insert our custom script at beginning of the default script or append it after.

button_onclick

From above screen shot we can see that default onclick event begins with string "If (PreSaveItem()).....". So we are going to replace this with our custom script. "alert('you have clicked OK');if (!PreSaveItem())"

The actual JavaScript like following: (The script can be warpped within <script> tag and put insided <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> in NewForm.aspx and EditForm.aspx )

 

_spBodyOnLoadFunctionNames.push("StartUpCustomScript");
function StartUpCustomScript() {    
    ChangeOkButtonOnclickEvent("Input","SaveItem");

function ChangeOkButtonOnclickEvent(tagName, identifier) {
    var len = identifier.length;
    var tags = document.getElementsByTagName(tagName);  /*find all Input type controls on page (ie. control with tag <Input/>)*/
    for (var i=0; i < tags.length; i++) {
        var tempString = tags[i].name;       
        if(tempString.indexOf(identifier) == tempString.length-len ) /*find any Input type controls on page has its name ending with 'SaveItem'*/
        {
           /*if found, replace it default onclick with our custom script*/
           var func = tags[i].attributes["onclick"].value.replace("if (!PreSaveItem())","alert('you have clicked OK');if (!PreSaveItem())");
           /*remove its default onclick event*/
           tags[i].onclick = null;
           /*re-register its onlick event with new script*/
           tags[i].attachEvent("onclick",new Function(func));
       }
    }
    return null;
}  

And now we click on OK button, we can see our Alert message :)

button_clicked

James Tsai

Blog Disclaimer