Adding images to SharePoint 2007 survey options

In this example I am using –

• SharePoint MOSS 2007
• JQuery 1.5.2 min

 A colleague asked me for a way to spruce up his SharePoint survey page with images, so I put together the following script. It is generic and re-usable so you might even wrap it into a js file to share between sites.

Check out the CSS tutorials here  and the selector tutorial on the JQuery site  to learn more how the selectors work.

Examples –
$(‘body) selects the body element
$(‘.ms-formbodysurvey span.ms-RadioText’) selects all span elements with the class ‘ms-RadioText’ that are a descendent of an element with the class ‘ms-formbodysurvey’.

I’ve added the comments inside the code to explain what is happening. You’ll need to update the paths to your JQuery library, option text, and image paths. You can use the ‘ToolPaneView=2’ hack to put your NewForm.aspx page into edit mode. Then add a ‘Content Editor’ webpart to place the following code in.

Also, you might want to add a bit of CSS to style the position, margin, or padding of the images.

<!-- Including the JQuery library in the page.      This provides the element selector function $() --> 
<script type="text/javascript" src="/sites/scripts/jquery-1.5.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
  // Handler for .ready() called when the document is loaded.
  // We call the following function to iterate through each option
  IterateThroughOptions();
});

function IterateThroughOptions(){
  // This selects all elements that match the expression 
  // '.each' performs the defined function on each of the matched elements 
  $('.ms-formbodysurvey span.ms-RadioText').each(function(){
      // The span element contains an attribute called Title that we store in a variable called optionText 
      // This is the text that is displayed next to the radio button 
      var optionText = $(this).attr('Title');
      // Pass the optionText value to our function 'GetImgUrl'
      var imgUrl = GetImgUrl(optionText);
      // Append a new element (img) to our span element 
      $(this).append('<img src="' + imgUrl + '" />');
    });
}
function GetImgUrl(optionText){
  // Check the option text and return the correct URL 
  if(optionText === "Chargers")
    { return "/sites/NFL_Images/Chargers.jpg"; }
  if(optionText === "Cowboys")
    { return "/sites/NFL_Images/Cowboys.jpg"; }
  if(optionText === "Dolphins")
    { return "/sites/NFL_Images/Dolphins.jpg"; }
// Add more 'IF' statements to match the rest of the option text 
// If there are no matches, use this default image path  
return "/sites/NFL_Images/helmet50.gif";
}
</script>

Export a SharePoint 2007 wiki to the filesystem

*Updated* – A codeplex project has been created for this. http://sp2007wikiexport.codeplex.com/

I recently needed to move a SharePoint 2007 wiki into a SharePoint 2010 wiki library. After some digging, I found no easy way to do this.

So I’ve decided to write a couple client apps – one that can export the 2007 wiki to the filesystem, then another to import the files into the 2010 wiki library (I figure the import app might also come in handy in the future).

Here is the UI  –

The result is a folder of html/aspx/(or whatever extension you provide) files that can be parsed further in some other process.

Some code reference from these sites were used.
http://sqlblogcasts.com/blogs/drjohn/archive/2007/11/02/Getting-a-list-of-files-from-a-moss-document-library-using-a-SharePoint-web-service.aspx

http://blogs.msdn.com/b/arpans/archive/2007/07/24/sharepoint-web-service-example-grabbing-wiki-content.aspx

Here’s the majority of the code. When I have time, I will create a codeplex project and clean this up a bit…


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Xml;
using System.IO;

namespace MOSS2007_Wiki_Export
{
///
/// Interaction logic for MainWindow.xaml
///
public partial class MainWindow : Window
{
string siteUrl;
string documentLibraryName;
string rowLimit = “10000”;
string wikiBody;
string wikiPageName;
string htmlBody;
string extention;
string beforeText;
string afterText;

public MainWindow()
{
InitializeComponent();
}

private void btnGo_Click(object sender, RoutedEventArgs e)
{
if(ParametersSet())
DoIt();

}

private bool ParametersSet()
{
siteUrl = txtURL.Text;
documentLibraryName = txtLibraryName.Text;
int limit;
if (int.TryParse(txtRowLimit.Text, out limit))
{
rowLimit = limit.ToString();
}
extention = cmbExt.SelectedValue.ToString();
beforeText = txtBefore.Text;
afterText = txtAfter.Text;
if (!DestinationFolderSet())
{
txtOutput.Text += “Please set the destination folder.”;
return false;
}
return true;
}

private bool DestinationFolderSet()
{
if (string.IsNullOrEmpty(txtDestination.Text))
return false;
return true;
}

private void DoIt()
{
StringBuilder updates = new StringBuilder();

SharePointLists.Lists wsList = new SharePointLists.Lists();
wsList.Credentials = System.Net.CredentialCache.DefaultCredentials;
wsList.Url = siteUrl + @”/_vti_bin/lists.asmx”;

// get a list of all top level lists
XmlNode allLists = wsList.GetListCollection();
// load into an XML document so we can use XPath to query content
XmlDocument allListsDoc = new XmlDocument();
allListsDoc.LoadXml(allLists.OuterXml);
// allListsDoc.Save(@”c:\allListsDoc.xml”); // for debug
XmlNamespaceManager ns = new XmlNamespaceManager(allListsDoc.NameTable);
ns.AddNamespace(“d”, allLists.NamespaceURI);

// now get the GUID of the document library we are looking for
XmlNode dlNode = allListsDoc.SelectSingleNode(“/d:Lists/d:List[@Title='” + documentLibraryName + “‘]”, ns);
if (dlNode == null)
{
updates.AppendLine(“Document Library ” + documentLibraryName + ” not found!”);
txtOutput.Text = updates.ToString();
}
else
{
// obtain the GUID for the document library and the webID
string documentLibraryGUID = dlNode.Attributes[“ID”].Value;
string webId = dlNode.Attributes[“WebId”].Value;

updates.AppendLine(“Opening folder ” + documentLibraryName + ” GUID=” + documentLibraryGUID);
txtOutput.Text = updates.ToString();

// create ViewFields CAML
XmlDocument viewFieldsDoc = new XmlDocument();
XmlNode ViewFields = AddXmlElement(viewFieldsDoc, “ViewFields”, “”);
AddFieldRef(ViewFields, “GUID”);
AddFieldRef(ViewFields, “ContentType”);
AddFieldRef(ViewFields, “BaseName”);
AddFieldRef(ViewFields, “Modified”);
AddFieldRef(ViewFields, “EncodedAbsUrl”);
AddFieldRef(ViewFields, “WikiField”);
AddFieldRef(ViewFields, “LinkFilename”);
//viewFieldsDoc.Save(@”c:\viewFields.xml”); // for debug

// create QueryOptions CAML
XmlDocument queryOptionsDoc = new XmlDocument();
XmlNode QueryOptions = AddXmlElement(queryOptionsDoc, “QueryOptions”, “”);
AddXmlElement(QueryOptions, “Folder”, documentLibraryName);
AddXmlElement(QueryOptions, “IncludeMandatoryColumns”, “FALSE”);
// this element is the key to getting the full recusive list
XmlNode node = AddXmlElement(QueryOptions, “ViewAttributes”, “”);
AddXmlAttribute(node, “Scope”, “Recursive”);
queryOptionsDoc.Save(@”c:\queryOptions.xml”); // for debug

//Create Query CAML
XmlDocument queryDoc = new XmlDocument();
XmlNode Query = AddXmlElement(queryDoc, “Query”, “”);

// obtain the list of items in the document library
XmlNode listContent = wsList.GetListItems(documentLibraryGUID, null, Query, ViewFields, rowLimit, QueryOptions, webId);

XmlDocument xmlResultsDoc = new XmlDocument();
xmlResultsDoc.LoadXml(listContent.OuterXml);
ns = new XmlNamespaceManager(xmlResultsDoc.NameTable);
ns.AddNamespace(“z”, “#RowsetSchema”);
// xmlResultsDoc.Save(@”c:\listContent.xml”); // for debug

XmlNodeList rows = xmlResultsDoc.SelectNodes(“//z:row”, ns);
if (rows.Count == 0)
{
updates.AppendLine(“No content found”);
txtOutput.Text = updates.ToString();

}
foreach (XmlNode row in rows)
{
htmlBody = beforeText;

wikiPageName = txtDestination.Text + “\\” + row.Attributes.GetNamedItem(“ows_LinkFilename”).Value.Replace(“.aspx”, “.html”);
wikiBody = row.Attributes.GetNamedItem(“ows_WikiField”).Value;

htmlBody += wikiBody;
htmlBody += afterText;
WriteFile(wikiPageName, wikiBody);

}
}
updates.AppendLine(“Done”);
txtOutput.Text = updates.ToString();
}

private void WriteFile(string name, string body)
{
StreamWriter sw = new StreamWriter(name);
sw.WriteLine(htmlBody);
sw.Close();
}

public static XmlNode AddXmlElement(XmlNode parent, string elementName, string elementValue)
{
XmlNode element = parent.AppendChild(parent.OwnerDocument.CreateNode(XmlNodeType.Element, elementName, “”));
if (elementValue != “”)
element.InnerText = elementValue;
return (element);
}

public static XmlNode AddXmlElement(XmlDocument parent, string elementName, string elementValue)
{
XmlNode element = parent.AppendChild(parent.CreateNode(XmlNodeType.Element, elementName, “”));
if (elementValue != “”)
element.InnerText = elementValue;
return (element);
}

public static XmlNode AddXmlAttribute(XmlNode element, string attrName, string attrValue)
{
XmlNode attr = element.Attributes.Append((XmlAttribute)element.OwnerDocument.CreateNode(XmlNodeType.Attribute, attrName, “”));
if (attrValue != “”)
attr.Value = attrValue;
return (attr);
}

public static void AddFieldRef(XmlNode viewFields, string fieldName)
{
XmlNode fieldRef = AddXmlElement(viewFields, “FieldRef”, “”);
AddXmlAttribute(fieldRef, “Name”, fieldName);
}

private void btnBrowse_Click(object sender, RoutedEventArgs e)
{
System.Windows.Forms.FolderBrowserDialog dlg = new System.Windows.Forms.FolderBrowserDialog();

// Show open file dialog box
dlg.ShowDialog();

// Process open file dialog box results
if (!string.IsNullOrEmpty(dlg.SelectedPath))
{
// Open document
txtDestination.Text = dlg.SelectedPath;
}

}

}
}

Adding an anchor in a SharePoint 2007 wiki

Unfortunately, there is no ‘Anchor‘ support in the SharePoint 2007 wiki wysiwyg editor. If you want to continue using the ‘out of the box’ wysiwyg editor, you’ll need to add anchors in the source view.

To access the html source view, open the desired wiki page into edit mode.

Look for an icon on the editor toolbar that looks like a page with angle bracket symbols.

 

Once in the source view – look for the location where you would like to add an anchor. If you are not familiar with html this may be a little overwhelming (and I would suggest hitting the w3schools website for some basic html tutorials).

In this example, I am adding an anchor to the bottom of the wiki page called ‘bottom’.
<A id=bottom></A>

 

Click ‘ok’ to return to the wysiwyg editor.

We now need the url to the wiki page you are editing –
right click the wiki page in your breadcrumb and choose ‘Copy Shortcut’. Your breadcrumb may look different or be in a different location depending on your master page configuration.

 

Once you have the wiki page url copied, lets add a new hyperlink to your wiki document.

Now paste the URL into the hyperlink form and add ‘#bottom’ to the end of the address(or whatever you named the anchor on your page)

You should now have a hyperlink in your wiki that points to an anchor! (Wouldn’t this be easier if the wysiwyg editor supported anchors?)