Adding JavaScript to a SharePoint 2010 Wiki, and other Wiki Tips and Tricks

 

The SharePoint 2010 Wiki has a few interesting changes… some I personally think are oversights, some are SharePoint trying to keep you “out of trouble”.

Some of things I will look at here:

• Why can’t I see a list of all of the Wiki pages?
• The Rename Page button in the Ribbon is grayed out!
• How can I insert JavaScript and other content not supported by the Ribbon? 

 

Why can’t I see a list of all of the Wiki pages?

Well… you can, if you know where to look! To see all of the pages you must:

• Display any Wiki page (“Home” for example)
• Click the Page tab in the Ribbon
• Click View All Pages

             

You could also just navigate directly to the AllPages page:

http://yourserver/sites/Training/YourWiki/Forms/AllPages.aspx

As neither of the above is going to be intuitive to your Wiki users you may just want to add a hyperlink to the home page of your Wiki called Index or Table of Contents.

 

 

 

The Rename Page button in the Ribbon is grayed out!

You have to be in the Edit mode before you can rename a page.

• Display the Wiki page
• Click the Page tab in the Ribbon
• Click Edit
• then click Rename Page

Warning: Exiting Wiki links to this page will get updated. For example, my original link was “Other Resources”. When I renamed the page to “SharePoint Blogs” the other pages where updated from [[Other Resources]] to [[SharePoint Blogs|Other Resources]].

 

 

Adding JavaScript to a Wiki Page

Let’s say you wanted to add a hyperlink to you wiki that links to an external page, and your corporate policy says that you must warn users that by clicking the link they are leaving the safety of your site. Just about every way of adding JavaScript to a Wiki page gets intercepted by SharePoint and the “offending code” is striped out.

    

I even got creative and tried:

• Editing the page in the browser and using the HTML button in the Ribbon
• Editing the page in SharePoint Designer
• Opening the page source from SharePoint Designer using Notepad, and then saving directly to the Wiki library

In all of these, SharePoint stripped out <script> blocks and converted hyperlinks with JavaScript to useless tags. For example:

   <a href="JavaScript:alert ('hello')"> say hello</a>

got converted to:

   <a>say hello</a>

 

The solution, like so many JavaScript tricks, uses the Content Editor Web Part.

In the example below I have a Wiki page for SharePoint blogs. For each blog I want to have a link to Bing to search for articles from each blog. These links must also display a warning about leaving the site.

The hyperlink looks like this:

Go search <a href="javascript: if ( confirm('This web site is external to the company and may not be safe!') ) { document.location='http://www.bing.com/search?q=site:techtrainingnotes.blogspot.com'; }">Bing</a> for more on this blog!

 

Steps:

1. Edit the Wiki Page (display the page, click the Page tab in the ribbon and then click Edit)
    
2. Click where you need the link, and then from the Insert tab in the ribbon click Web Part
    
3. Click the edit dropdown on the web part and click Edit Web Part
    
4. Click in the Content Editor’s text area and then click the HTML button in the ribbon
    
5. Add your JavaScript, save and test

The Content Editors:

 

The resulting page after the user clicked the hyperlink:

 

.

SharePoint: Wiki Search and Replace

 

Note: The following works in both SharePoint 2007 and 2010. Just be aware that the 2010 “Site Pages” library is also a wiki library!

 

Recently I was asked about how to do a search and replace on text in all of the articles in a wiki. As there is no built-in way to do this I wrote a simple web page to do this.

Note that the example below is trivial and:

• Is presented as a learning exercise
• Does not include a master page
• Must be deployed to the Layouts folder of the web servers
• Is case sensitive
• Is over all not too flexible… but it is presented to get you started on your own nice looking page…

Background:

• A wiki is a library (and a library is just a fancy list)
• The content displayed in a wiki is stored in a column of the library named “WikiField” (creative huh!)
• Accessing a list and updating data via the SharePoint API is pretty easy

What you could do to make this better:

• Just about anything…  ;-)
• Add support for “Ignore Case”
• Add a checkbox list of what was found and let the user decide to replace or not
• Add the application master page and make this look like SharePoint
• Write it as a little Windows application that calls the SharePoint web services so nothing has to be deployed to the web servers

Here’s what the page looks like:


To create this you will need to create a web page (ASPX) and a code behind file and copy them to the LAYOUTS folder on the web front end servers. You will then access the page by going to the site with the wiki(s) and navigating to the new page:
   http://yourserver/sites/yoursite/_layouts/WikiSearchReplace.aspx

 

What’s the <SharePoint:FormDigest runat="server" /> about? See here.

The ASPX page:  (WikiSearchReplace.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WikiSearchReplace.aspx.cs"
  Inherits="WikiSearchReplace" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
  Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Untitled Page</title>
</head>
<body>
  <form id="form1" runat="server">
    <SharePoint:FormDigest runat="server" />
    <div>
      Wiki Libraries:
      <asp:DropDownList ID="ddlWikis" runat="server">
      </asp:DropDownList><br />
      <br />
      <table>
        <tr>
          <td>
            Find what:</td>
          <td>
            <asp:TextBox ID="txtFind" runat="server" /></td>
        </tr>
        <tr>
          <td>
            Replace with:</td>
          <td>
            <asp:TextBox ID="txtReplace" runat="server" /></td>
        </tr>
      </table>
      <asp:Button ID="btnReplace" runat="server" Text="Replace" OnClick="btnReplace_Click" />
      <br />
      <asp:Label ID="lblResults" runat="server" />
    </div>
  </form>
</body>
</html>

and here’s the code behind: (WikiSearchReplace.aspx.cs)

using System;
using System.Web;
using Microsoft.SharePoint;

public partial class WikiSearchReplace : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Get a list of all WIKIs in the site and add to the dropdown
        // WIKI = SPListTemplateType.WebPageLibrary
        if (!IsPostBack)
        {
            SPWeb web = SPContext.Current.Web;
            foreach (SPList lst in web.Lists)
            {
                if (lst.BaseTemplate == SPListTemplateType.WebPageLibrary)
                {
                    ddlWikis.Items.Add(lst.Title);
                }
            }
        }
    }

    protected void btnReplace_Click(object sender, EventArgs e)
    {
        // Get the current site
        using (SPWeb web = SPContext.Current.Web)
        {
            SPList list = web.Lists[ddlWikis.SelectedItem.ToString()];

            int articleCount = 0;
            int occurrenceCount = 0;
            string wikiText = "";

            foreach (SPListItem wikiItem in list.Items)
            {
                wikiText = wikiItem["WikiField"].ToString();
                if (wikiText.Contains(txtFind.Text))
                {
                    articleCount++;

                    // a trick to get the word cound
                    int count = (wikiText.Length - wikiText.Replace(txtFind.Text, "").Length) / txtFind.Text.Length;
                    occurrenceCount += count;

                    wikiItem["WikiField"] = wikiText.Replace(txtFind.Text, txtReplace.Text);
                    wikiItem.Update();
                }
            }
            lblResults.Text = articleCount.ToString() + " articles updated, " + occurrenceCount.ToString() + " occurrences updated";
        }
    }
}