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...

Nov
20
2008

Showing "my links" with QuickLinksMicroView web part - Issues you should know about

Ishai's post - Showing "my links" on a web page has explained how you can use the QuickLinksMicroView web part to show users "my links" on SharePoint web part page.

The web part looked great when I first added it to the web part page, but it wasn't long before I discovered some of "bugs" in this web part. Bugs or by design?

I will show you what those bugs are by using following configurations: Two groups, 6 links in the first group and 3 links in the second group.

James Tsai .Net SharePoint Blog - QuickLinksMicroView Items

Now let's change the default "Number of rows to display" value from 10 to 2

 James Tsai .Net SharePoint Blog - QuickLinksMicroView Configuration

Click Ok and see what it gets us.

1. "Show/Hide additional links" hyperlink will not work without "portal.css" CSS registration

James Tsai .Net SharePoint Blog - QuickLinksMicroView No Portal CSS

As you can see there is a "show 4 additional links" hyperlink at bottom of the first group (Don't worry about the second group for now, I will get to that later).  Click on the link toggles the display text (hide/show 4 additional links) without change the number of displayed items in group (no actual hide or show for additional items).

The problem here is 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...

Sep
26
2008

SharePoint Data View / Data Form Web Part - Group items by month on DateTime field

This is one of the most popular requirements I always get from clients. Especially when they have large collection of documents and want to give their user an easy way to browse document items in Data Form Web Part (DFWP).

For example, you have a list of documents displayed in DFWP and each document has "Published Date" field. How can you group DFWP items by its "Published Date" month value?

Goal

James Tsai .Net SharePoint Blog - DFWP Group By Month Final

Solution

Luckily, all you need to do is to change a few lines in XSL that renders your DFWP. Here is step by step of how to do it.

1. Add "Group By" to Data Form Web Part.

Here is what your original DFWP should look like without any "Group by" on field

James Tsai .Net SharePoint Blog - DFWP default view without Group by field

In SharePoint Designer (SPD), open DFWP's Common Data View Tasks and select "Sort and Group"

James Tsai .Net SharePoint Blog - DFWP common data view tasks

Select DateTime field you want to Group by, In this example it is "Published Date". "Show group header" is also selected here because this way you can see what values are used to group items

James Tsai .Net SharePoint Blog - DFWP sort and group options

After above steps, you can see the DFWP is correctly grouped on "Published Date" field. But it treats each DateTime value as a different group value.

By default, DFWP group DateTime field based on their actual Date (YYYY-MM-DD) value. Not just year and month (YYYY-MM).

James Tsai .Net SharePoint Blog - DFWP Group By DateTime Field Default

Since requirement here is to group items with same month (item with "Publsihed Date" 08/16/2008 and 08/03/2008 in this example) in same group. Further steps are needed.

2. Modify XSL

Inside the XSL that renders your DFWP, search for "dvt_groupfield". If you use "Search All" within XSL, <xsl:when test="not ($dvt_groupfield)"> is the line you want.

James Tsai .Net SharePoint Blog - DFWP XSL Search For DVT_GroupField

And you will see this section,


<xsl:when test="not ($dvt_groupfield)">
        <xsl:value-of select="ddwrt:NameChanged(string(@PublishedDate), 0)" />
</xsl:when>

Change this to,


<xsl:when test="not ($dvt_groupfield)">
        <xsl:value-of select="ddwrt:NameChanged(string(substring(@PublishedDate,1,7)), 0)" />
</xsl:when>

Above change is critical, that's where you specify how you want to group items in DFWP.

The original @PublishedDate value is presented in format "YYYY-MM-DDTHH:MM:SSZ". substring(@PusblishedDate,1,7) gives us "YYYY-MM" which is what we want DFWP to group by. Note: In XSL, index starts from 1 not 0.

You will see this after above changes

James Tsai .Net SharePoint Blog - DFWP XSL After Change Group By Value

Items are now group correctly, but group header still displaying incorrect text. Because In DFWP XSL, group value and header value are generated from different template. You have changed first one (in above step), and now last step is to change header value.

Just scroll down from where you changed group value in XSL a bit, and you should see this line


<xsl:when test="not (@PublishedDate) and (@PublishedDate) != false()"><xsl:value-of select="' '" /></xsl:when>
        <xsl:otherwise>
                <xsl:value-of select="ddwrt:GenDisplayName(string(@PublishedDate))" />

Change ddwrt:GenDisplayName(string(@PublishedDate)) to substring(@PublishedDate,1,7). Like following,


<xsl:when test="not (@PublishedDate) and (@PublishedDate) != false()"><xsl:value-of select="' '" /></xsl:when>
        <xsl:otherwise>
                <xsl:value-of select="substring(@PublishedDate,1,7)" />

And you should get this as result

James Tsai .Net SharePoint Blog - DFWP XSL After Change Heading Values

You can also change Group Heading to display in format YYYY-MMM (like the one in first screen shot) , or anything you like by changing above XSL.

Aug
20
2008

SPRegionalSettings.GlobalTimeZones - How to build world clock / get time zones information in SharePoint

Ok, you probably do not want to create world clock web part from scratch. Many free ones over Internet. Not to mention the very popular world clock web part from "bamboo Solutions".

But if you really want to create one by yourself for whatever the reason is, or you just want show the local time for employees working in different cities around the world (in their profile page, maybe). It can be done easily without to use any external web services, or hack your way through windows registry to get time zones list.

Yes, thanks to SharePoint OM. You can get all the information you want from Microsoft.SharePoint.dll

SPRegionalSettings.GlobalTimeZones

It returns you a collection of SPTimeZones objects used in Windows SharePoint Services.

SPTimeZoneCollection timeZoneColl = SPRegionalSettings.GlobalTimeZones;
foreach (SPTimeZone tz in timeZoneColl)
{
    DateTime currentLocalDateTime = DateTime.Now;
    DateTime currentDestDateTime = tz.UTCToLocalTime(currentLocalDateTime.ToUniversalTime());
        Console.WriteLine("ID: {0}, DateTime: {1}, Description: {2}", tz.ID, currentDestDateTime.ToString(), tz.Description);
}

In above code sample, it loop through each SPTimeZone inside SPTimeZoneCollection. Writes ID, current date time (in local server date time format) and description in console.

This is what you will get

James Tsai .Net SharePoint VSTO C# ASP.NET Blog - SPRegionalSettings GlobalTimeZones Code Sample

As you can see, my local time in Sydney, Australia is Thursday, August 21, 2008 4:01pm. And time in Tokyo, Japan is 08/21/2008 3:01pm. In Auckland, New Zealand is 08/21/2008 6:01pm. Which are correct!

//This line of code converts SPTimeZone object from UTC to your local time
DateTime currentDestDateTime = tz.UTCToLocalTime(currentLocalDateTime.ToUniversalTime());

Basically that's all you need to create world clock web part, or date time conversion control in SharePoint site. You can either have GlobalTimeZones collection as drop down list for user to select the time zone for displaying date time. Or you can create a SharePoint list mapping between cities name with time zone ID in GolbalTimeZones collection.

James Tsai

Blog Disclaimer