Creating a Visual Web Part and Visual Web Part Editor in Visual Studio 2010

PART 1

So I had been tasked with creating a web part for SharePoint. Basically to add Google maps to a page allowing for the storage of addresses in a SharePoint list. The list holds the addresses and the web part uses the address to draw the map with markers for each address. Pretty cool to me and yes I am sure that there are similar web parts but I wanted to make my own! So I thought that I would make a visual web part and also make the web part editor a visual one as well. So I fired up Visual Studio 2010 and set to work.

First I will give you some screen shots and then go into some of the details of what I did. I cannot show all the code of course but the pieces that really make it work.

This is what the map looks like once you add the web part. It is just using some default values.

Then I added some addresses to the SharePoint list and selected one as the center for the map.

And this is what the Web Part Editor looks like

 

Notice that I chose to add a bit of color difference to the custom part. I also wanted to make sure that it looked and acted like the out of box parts such as “Appearance” and “Layout”. This piece was done with some css and jQuery.

Both the web part and the editor part are based on the Visual Web Part concept in that they both have user controls. The real fun was trying to get everything working together and wrapping the Google Maps API. I will be going over as much as I can in upcoming posts. I wanted to get this one out first just to whet the appetite!

Using SPDataSource and DVDropDownList For Filtered Dropdowns

   1: <tr>

   2:      <td width="190px" valign="top" class="ms-formlabel">

   3:            <H3 class="ms-standardheader"><nobr>Status</nobr></H3>

   4:      </td>

   5:      <td width="400px" valign="top" class="ms-formbody">

   6:            <SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="True" ID="spdatasource1" SelectCommand="&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&quot;CurrentState&quot;/&gt;&lt;Value Type=&quot;Text&quot;&gt;{@TestProgramStatus}&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&lt;/Query&gt;&lt;ViewFields&gt;&lt;FieldRef Name=&quot;AllowedState&quot;/&gt;&lt;FieldRef Name=&quot;DisplayText&quot;/&gt;&lt;/ViewFields&gt;&lt;/View&gt;" >

   7:                <SelectParameters>

   8:                     <asp:Parameter Name="WebID" DefaultValue="RootWeb" />

   9:                     <asp:parameter Name="ListID" DefaultValue="3C594A44-184E-4B4B-B6D4-5B26F958C5F5" />

  10:                </SelectParameters>

  11:            </SharePoint:SPDataSource>              

  12:            <SharePoint:DVDropDownList runat="server" title="ddStatus" id="ff3{$Pos}" selectedvalue="Select Status" __designer:bind="{ddwrt:DataBind('u',concat('ff3',$Pos),'SelectedValue','SelectedIndexChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@TestProgramStatus')}" datasourceid="spdatasource1" datatextfield="DisplayText" datavaluefield="AllowedState" /><br />                                

  13:            <SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="TestProgramStatus" ControlMode="Edit"/>

  14:      </td>

  15: </tr>

This code was added to a custom form in SharePoint Designer. The code is in the XSL stylesheet and this was created to filter a Status Choice field based on its current status. The SelectCommand was used to do the filtering and it is just encoded CAML. This query checks the current status against a separate list that contains the "allowed" status values for the current status. This is used to drive an item through a certain process. A user can select a status but the choices are limited depending on where the item is in the process. The list also has a display text so the dropdown has a more descriptive text of what the user is selecting. The DVDropDownList then updates the actual status field which is a choice field in this case.