SharePoint 2010 Ribbon Button Error – "Access is denied. sp.ui.rte.js…"

Heather WatermanHeather Waterman (@hwaterman) and I turn to each other fairly regularly when either of us is stuck on something that we know the other will understand better. It’s the tremendous value of the SharePoint community along with the crazy tools like Skype that we have these days. (When I started coding, it was hard enough to get the attention of the person sitting next to you, much less someone across the hall or on the other side of the world. Or South Carolina.) All that and the fact that Heather is an all around good egg, and it’s a win for me at least!

Today I was having a problem where the buttons on the SharePoint 2010 ribbon weren’t working correctly. When I popped open the Developer Tools in IE9 (by hitting F12), I could see this error every time I clicked on one of the ribbon’s Rich Text formatting buttons.


That’s “SCRIPT5: Access is denied.  sp.ui.rte.js?rev=uY%2BcHuH6ine5hasQwHX1cw%3D%3D, line 2 character 267202”. Sure, it made sense to me, too.

I found several blog posts, each of which had interesting suggestions (e.g., add the site to the Trusted Zones or check for empty CSS or JavaScript files), but none of them worked for me.

Off to Skype to ask Heather, the expert. She had seen this issue before, but the tips above had solved it in the cases she could remember. We started marching through my custom master page and CSS to see what we could find.

Long story short, I was loading jQuery, jQueryUI, and SPServices from CDNs, using the txt file I describe in my post called, aptly enough, Referencing jQuery, jQueryUI, and SPServices from CDNs. I would have thought that since the error was about one of SharePoint’s js files, the issue would have been with one of the js files I was loading from the CDNs. However, it turned out to be the jQueryUI CSS file, not any of the script files.

I’m not sure that it is part of the cause, but because I’m working on a new SharePoint Internet site in stealth mode, I have the IP address in my hosts file. My guess is that this causes an issue with loading CSS files from another domain.

Well ,thanks to Heather I have the rest of the afternoon to do other useful things rather than spending more time on this silly issue. Thanks, Heather!

The jQuery .css() Function versus CSS

Box model in CSS

Box model in CSS (Photo credit: Wikipedia)

A very smart designer who I respect a lot asked me a question today via IM that I thought would make a good post.

…so I know jquery is great for doing things with CSS – but I think of only using it when I can’t actually get to the tag or it needs to be changed on a particular event – but do you think it is better to make CSS changes in jquery vs CSS – what are the pros and cons here.

Here’s my thinking about this. I would always err on the side of CSS if possible. jQuery should be used to change CSS based upon some sort of user-generated event.

Many people seem to use jQuery to make CSS changes on page load (in a $(document).ready()) when they have trouble getting the CSS selectors right. If the selector is hard to get right in CSS, then it’ll probably be pretty hard in jQuery as well because the jQuery selector syntax is roughly the same as CSS3 selectors. jQuery gives you the ability to traverse the DOM, of course, so it can be easier to find an “anchor element” from which to navigate to the element you want to style.

My mantra is something like:

Ask the server to paint the page. Use jQuery to give it behaviors and interactivity.

Setting CSS with script on page load violates this in that it’s doing part of that initial painting. There’s also going to be at least a small delay until the script loads which can make the page load look “funny” (technical term).
You’ll see a lot of blog posts that show setting CSS on page load with jQuery, but think carefully in each case about whether it makes sense. If you’re doing it just to get around figuring out the right selectors in your CSS, then think again.

I’ll admit that sometimes I cheat on this, especially if I happen to have a .js file open instead of a CSS file. But I also try to make a pass back through my scripts to move things into the CSS that ought to have been there in the first place. You should too!

Enhanced by Zemanta

Rotating Announcements with a Data View Web Part and jQuery

Oftentimes people go searching for plugins and already-written code to accomplish their goals. I find that it often gets people into more trouble than it’s worth as they usually don’t understand what they have deployed and it doesn’t work well in their specific situation. Of course, here I am posting something that those of you reading can use in exactly that way. My advice is to always look at these posts as *examples* of how you might do something. Make sure you understand what you get and how you need it to work on your end.

In this particular case, the search team wanted to show one random item from an Announcements list on the Search Results page and allow the users to cycle through all of the other available (unexpired) items. Each item will explain something new about what’s going on with search enhancements or give a tip on how to search more effectively.

The natural inclination, like I mention above, might be to go and look for a “rotating news item” jQuery plugin. But it was far easier to use a Data View Web Part (DVWP) along with a very small amount of script to make it happen. This is a method that I like to use often: have the DVWP “paint” the content onto the screen and then use jQuery to add some behavior to it. That way, you’re having the server do the heavy lifting, but also enhancing the user experience with the script. I also could have done this entirely with client side script using SPServices, but it doesn’t make sense to do so if you can keep the appropriate amount of processing on the server.

Rotating Announcements

In my particular case, the Announcments list that I wanted to use as the DataSource was in a different Site Collection. No worries, I just used the Lists Web Service as the DataSource in the DVWP. What you see below is just the DataSource section of my DVWP. Those of you who have used the Lists Web Service before, whether with SPServices or directly, will recognize the SOAP request and all its trappings. When you set up a SOAP DataSource in SharePoint Designer (SPD), this is what SPD creates for you. (I’ve cleaned up the XML that SPD generates to make it easier to read, including removing the escaping in the parameter values.)

  <SharePoint:SoapDataSource runat="server" SelectUrl="http://[full path]/_vti_bin/lists.asmx" SelectAction="" SelectPort="ListsSoap" SelectServiceName="Lists" AuthType="None" WsdlPath="http://[full path]//_vti_bin/lists.asmx?WSDL" XPath="" ID="SoapDataSource1">
      <soap:Envelope xmlns:soap="">
          <GetListItems xmlns="">
            <query><Query><OrderBy><FieldRef Name="Created Date" Ascending="FALSE"><OrderBy><GroupBy><GroupBy><Where><Or><Gt><FieldRef Name="Expires"><Value Type="DateTime"><Today><Value><Gt><IsNull><FieldRef Name="Expires"><IsNull><Or><Where><Query></query>
            <viewFields><ViewFields><FieldRef Name="Title"><FieldRef Name="Abstract"><ViewFields></viewFields>

You’ll note that I’ve added my own filtering for the Expires column, since we don’t get that “for free” like we do with a standard Announcements list view. We also have added an Abstract column to the Announcements list, since the Body of each Announcement tends to be pretty long. Showing a few short sentences is enough to give the users the gist of what the post is about. If they want to read more, they can click on the Title, which takes them to the full Annoucement. I’ve also requested only the columns that I need to try to reduce the number of bits through the wire. In this instance, the volume will never be that large, but it can’t hurt.

Next comes the XSL in the DVWP. What we wanted on the page was fairly simple, so the XSL is pretty straightforward. That said, it’s entirely custom: SPD has no idea how to do things like this, so it’s a coding exercise.

  <xsl:output method="html" indent="no"/>
  <xsl:param name="URL"/>
  <xsl:param name="SERVER_NAME"/>

  <xsl:template match="/" xmlns:x="" xmlns:d="" xmlns:asp="" xmlns:__designer="" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:soap="" xmlns:ddw1="" xmlns:rs="urn:schemas-microsoft-com:rowset" xmlns:z="#RowsetSchema">
    <xsl:call-template name="dvt_1"/>

  <xsl:template name="dvt_1">
    <xsl:variable name="Rows" select="/soap:Envelope/soap:Body/ddw1:GetListItemsResponse/ddw1:GetListItemsResult/ddw1:listitems/rs:data/z:row"/>
    <xsl:variable name="TotalItems" select="count($Rows)"/>
    <xsl:variable name="ShowItem" select="ddwrt:Random(1, $TotalItems)"/>
    <div class="search-news">
      <xsl:for-each select="$Rows">
        <xsl:call-template name="dvt_1.rowview">
          <xsl:with-param name="TotalItems" select="TotalItems"/>
          <xsl:with-param name="ShowItem" select="$ShowItem"/>
    <div class="search-news-footer">
      <span class="search-news-prev"><a onclick="showPrevNewsItem();">&lt; Previous</a></span>
      <span class="search-news-counts"><span id="search-news-active-item"><xsl:value-of select="$ShowItem"/></span> of <xsl:value-of select="$TotalItems"/></span>
      <span class="search-news-next"><a onclick="showNextNewsItem();">Next &gt;</a></span>

  <xsl:template name="dvt_1.rowview">
    <xsl:param name="ShowItem"/>
    <div class="search-news-item">
      <xsl:attribute name="style">
        <xsl:if test="position() != $ShowItem">display:none;</xsl:if>
      <div class="search-news-title">
        <a target="_blank" href="http://[full path]/Lists/Announcements/DispForm.aspx?ID={@ows_ID}&amp;Source={concat('http://', $SERVER_NAME, $URL)}">
          <h3><xsl:value-of select="@ows_Title"/></h3>
        <xsl:value-of select="ddwrt:FormatDate(string(@ows_Created), 1033, 1)"/>
      <div class="search-news-abstract">
        <xsl:value-of select="@ows_Abstract" disable-output-escaping="yes"/>

Notice that I’m emitting nice DIVs rather than SharePoint’s dreaded tables. Say what you will about which is better, but when you use a DVWP, the markup is entirely up to you.

There are several interesting bits in this XSL. First, becasue we wanted to display a random item on every page load, I needed a way to come up with which item to display. In lines 16 and 17, I calculate how many items are available and generate a random number between 1 and that number of items. The value of the ShowItem variable drives which item is visible on page load. In fact, all of the items are loaded in the page, but only that one item is visible. This sets things up for the capability to cycle through all of the current news items.

Lines 22-24 build the “footer” of the DVWP. In the footer, there are Previous and Next links, as well as a counter which displays which items the user is currently viewing and the total number of items. Since the number of items will be variable, and we hope that users will take the time to cycle through them, we wanted to give them a feel for how many items are available to them. If you look at the Previous link, you’ll see that onclick I’ve added a call to showPrevNewsItem();. Next has a call to showNextNewsItem();. Here’s what that script looks like:

function showPrevNewsItem() {
  var newsItems = $("");
  var newsItem = $("");
  newsItem.each(function() {
    if($(this).index() > 0) {
    } else {
  var activeItem = $("").index() + 1;

function showNextNewsItem() {
  var newsItems = $("");
  var newsItem = $("");
  newsItem.each(function() {
    if($(this).index() < (newsItems.length - 1)) {
    } else {
  var activeItem = $("").index() + 1;

In each function (yes, I could probably combine them into one function that takes a parameter for which way to move, but I find it easier to think through this way), I find the currently visible news item, hide it, and then show the previous or next one. If we’ve reached the “top” or the “bottom” of the items, I wrap around to the end or the beginning. This allows the user to cycle through the items in a continuous loop if they choose to. The last thing I do in each function is figure out which item we’re displaying and update the active item number in the footer of the DVWP.

The last piece is the CSS to make it all look pretty.

/* Search News */ {
} a, a:visited {
  font-family:"News Gothic MT", verdana, sanserif;
} {
  border:2px #f5f3f0 solid;
  border-radius:15px 15px 10px 10px;
  -moz-border-radius:15px 15px 10px 10px;
} .ms-WPHeaderTd {
  border-radius:10px 10px 0 0;
  -moz-border-radius:10px 10px 0 0;
} .ms-wpTdSpace, .ms-WPHeaderTdSelection {
} {
.search-news-prev, .search-news-next {
.search-news-prev a:hover, .search-news-next a:hover {
.search-news-prev {
.search-news-next {
.search-news-footer {
/* Search News */

As you can see in the screenshot of the end result above, I’m using some nice rounded corners for the header and the border around the whole thing. This is a CSS3 capability, and since we have a mixed browser environment, I have to cover all of the bases, including older versions of Mozilla (Firefox) and Chrome. The majority of the users have IE8, so they don’t get the rounded corner goodness yet (as you can see below), but they will all soon be getting IE9, at which point they will have prettiness, too.

Rotating Announcements in IE8

And there you go. A nice, simple little rotating announcements view. Users love this sort of thing, and it helps to get the news out there in a new and interesting way (at least for SharePoint).

Namespacing CSS Classes and IDs in Your SharePoint Branding

A graphical depiction of a very simple css doc...

Image via Wikipedia

This is a concept I’ve gone back and forth on over the last year or so. I think I’m ready to firmly come down on the “Yes, let’s do it” side of the argument.

Here’s the first definition of namespace from Wikipedia:

In general, a namespace is a container that provides context for the identifiers (names, or technical terms, or words) it holds, and allows the disambiguation of homonym identifiers residing in different namespaces.

Now, for you normal people out there, what that *usually* means is prefixing the names of something with a consistent value to help you assort things into groups. With most modern programming languages, you benefit from namespaces because it assures you that your code won’t stomp on anyone else’s. (At least it’s far less likely, as someone else can, of course, choose the same namespace.)

In my SPServices library, every single function resides in the SPServices namespace. That means that all the function names start with SPServices [dot]:

You get the idea.

Even though my function names are most likely going to be unique – I’ve chosen rather long, descriptive function names on purpose – it’s possible that someone else could have a function of the same name. By putting all the functions into the SPServices namespace, I’ve reduced the possibility of function name “collisions” to almost nil.

But what does all of this have to do with CSS, you are probably wondering? Well in CSS, you can do essentially the same thing. Let’s say you are working on a project for Foo, Inc. with SharePoint. If you precede all of your custom CSS classes for Foo, Inc. with something like “foo-“, then you have reduced the possibility that there might be an existing CSS class with that name. You can do the same thing with unique ids for elements in your markup:

When we brand SharePoint, we’re building on top of an existing platform. If we were starting with a green field, we wouldn’t need to worry about CSS class collisions; we’d be able to pick and old naming that we wanted.  As an example, there is a class used in one of the out of the box Web Parts (I can’t recall exactly which one, but I think it may be the Summary Links Web Part) called “footer”. That’s a very garden variety name, and one that we might be tempted to create ourselves to style a page footer. As soon as we do, though, any of the Web Parts which have that class applied to it inherit whatever styling we’ve applied to our own footer class. I know for a fact that this can be a problem because I had to track it down more than once.

A safer class name would be “foo-footer”. It’s almost guaranteed to be unique, and we won’t stomp on an existing class named footer. This is a good approach overall. If you see a class which has a name starting with “foo-“, you know that it is specific to this client or application or branding scheme; whatever you’d like the namespace to indicate.

Microsoft does the namespacing thing pretty badly. Some of the out of the box CSS classes for SharePoint start with “ms-“; some don’t. Some classes start with a prefix which indicates something about the functionality in which they are used, like “srch-Icon” for a search icon or “UserCaption” for a caption for some user info. In SharePoint 2010, it got more complicated, as some classes start with “s4-” (one supposes that this means SharePoint 4.0, which is the internal version for SharePoint 2010 – it’s the fourth version of SharePoint) and some don’t. There doesn’t seem to be any real rhyme or reason to it other than the fact that different development teams thought about CSS classes differently. Take a look through core.css (SharePoint 2007) or corev4.css (SharePoint 2010) sometime and see if you can make heads or tails of it; I certainly can’t see much pattern in there. (Don’t even get me started on the whole inline vs. separately stored CSS issue. That’s a different smelly can of worms.)

Add to the out of the box CSS classes those which your developers are likely to embed in user controls, rendering templates, and the like, and there is even more possibility for a mess. To me, this is a clear indication of the fact that .NET’s abstractions teach developers, even Microsoft ones, not to think too much about what happens in the browser. They are told to use the .NET abstractions and all will be well when the functionality finally gets in front of the user. Well, not so much, and not so often.

When I see an abundant use of the !important tag in CSS (which I consider just plain evil), it is usually either due to the CSS creators novice use of selectors or due to a lack of namespacing. (If you find yourself wanting to use !important, think long and hard about why. It should be a very unusual exception, not the rule.) Another benefit of using the namespace approach is that you’ll have unique class names and won’t need to fight with the out-of-the-box styling, at least not as much.

Of course, there must be a downside to all of this, you probably are thinking. There are a few drawbacks, surely, but I think the benefits outweigh them. You’ll type a little bit more when you develop and apply your CSS, but I think that’s really the biggest cost. There will also be a few more characters going over the wire, but bandwidth gets better all the time. (If you’re still on a modem connection, then by all means, feel free to ignore this advice.)  All in all, this approach is just a good idea with little overhead.

UseSimpleRendering in a SharePoint 2010 Navigation Menu

Heather Waterman and I were talking about some stuff today (Name dropper, you say? Absolutely!) and she pointed out an interesting little trick with an SharePoint:AspMenu control.

SharePoint:AspMenu controls are used in SharePoint to dynamically create navigational elements like the top navigation tabs. In SharePoint 2007, those tabs were rendered as pretty complicated TABLE constructs, and you didn’t have a lot of choice about it. Many a designer lamented this, wanting nice, clean unordered lists (UL) to work with instead.

Well, in SharePoint 2010, the navigation elements are rendered as unordered lists, just like everyone’s wanted for years. Everyone’s happy, right? Well, apparently that may not be the case because the SharePoint:AspMenu control in SharePoint 2010 now has property called UseSimpleRendering which you can use to basically revert that behavior back to the more standard ASP.NET TABLE-based elements.

By default, UseSimpleRendering is set to true in SharePoint 2010, as shown in the highlighted line below.

  <StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>
  <StaticSelectedStyle CssClass="ms-topnavselected" />
  <StaticHoverStyle CssClass="ms-topNavHover" />
  <DynamicMenuStyle  BackColor="#fff" BorderColor="#E8E8E4" BorderWidth="1px"/>
  <DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>
  <DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>
  <DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/>

This renders markup for the top nav which looks something like this:

<DIV id=zz15_TopNavigationMenuV4 class=ms-topNavContainer>
  <DIV class="menu horizontal menu-horizontal">
    <UL class="root static">
      <LI class="static selected">
        <A accessKey=1 class="static selected menu-item" title="Home Page" href="/Pages/default.aspx">
          <SPAN class=additional-background>
            <SPAN class=menu-item-text>Home</SPAN>
            <SPAN class=ms-hidden>Currently selected</SPAN>

Don’t like that newfangled markup that everyone’s been clamoring for? Hey, switch UseSimpleRendering to false and you can go back to the bad ole days.

<TABLE id=zz1_TopNavigationMenuV4 class="ms-topNavContainer zz1_TopNavigationMenuV4_2" border=0 cellSpacing=0 cellPadding=0><TBODY>
    <TD id=zz1_TopNavigationMenuV4n0 onmouseover=Menu_HoverStatic(this) title="Home Page" onkeyup=Menu_Key(this) onmouseout=Menu_Unhover(this)>
      <TABLE class="ms-topnav zz1_TopNavigationMenuV4_4 ms-topnavselected zz1_TopNavigationMenuV4_9" border=0 cellSpacing=0 cellPadding=0 width="100%" hoverClass="zz1_TopNavigationMenuV4_13 ms-topNavHover">
            <TD style="WHITE-SPACE: nowrap">
              <A accessKey=1 style="BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; FONT-SIZE: 1em; BORDER-LEFT-STYLE: none" class="zz1_TopNavigationMenuV4_1 ms-topnav zz1_TopNavigationMenuV4_3 ms-topnavselected zz1_TopNavigationMenuV4_8" href="/Pages/default.aspx" hoverHyperLinkClass="zz1_TopNavigationMenuV4_12 ms-topNavHover">Home</A>

Guess what else this means. Guessed yet? No? Well, it means that there are two sets of CSS classes: one for the “simple” markup, and one for the traditional ASP.NET aproach. Be sure to keep ’em in synch if you’re switching back and forth.