SharePoint uses the $() namespace in specific instances – one of these can be seen in the FAST Search Center and only in specific areas and page states.  When jQuery is called in the FAST Search center and jQuery.noConflict(); is not present, jQuery will mess with SharePoint’s $() and cause errors to pop up on the page.

The testing I did was a while back, so I don’t have a specific example or screenshots to share, but I know we spent hours troubleshooting until we found the culprit.

How it works

You add the line

jQuery.noConflict();

to the top of your JavaScript block.  Then you replace all occurences of $(…) with jQuery(…) in your code (like the example below).

Instead of:

$(document).ready(function() {
   $('#buttonElement').click(function() {
      alert('Button Clicked');
   });
});

Use:

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('#buttonElement').click(function() {
      alert('Button Clicked');
   });
});

You can read more about the function on jQuery’s site.

I hope you found this helpful

You basically have 2 options:

Option 1

• Navigate to your Search Center’s Result page (you can do a search to get there quickly)
• Place the page in Edit Mode (Site Actions > Edit Page)
• Open the Web Part Properties for the Search Core Results web part. (little arrow on the right, Edit Web Part)
• Under the Display Properties heading, uncheck the Use Location Visualization checkbox (this enables the XSL Editor button)
• Hit XSL Editor…
• Highlight everything in the popup and save it in a text file (you need to keep this as a starting point for XSLT customization anyway)
• Replace it with the following piece of XSLT:

<?xml version="1.0" encoding="UTF-8"?>
  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
    <xmp><xsl:copy-of select="*"/></xmp>
  </xsl:template>
</xsl:stylesheet>

• Hit OK on the Web Part Properties, and save the page.

You should see something similar to this structure (I replaced the data with ‘….’ so it’s easier to view)):

<All_Results>
    <Result>
      <id>....</id>
      <workid></workid>
      <rank>....</rank>
      <title>....</title>
      <author>....</author>
      <size>....</size>
      <path>....</path>
      <description>....</description>
      <write>....</write>
      <sitename>....</sitename>
      <collapsingstatus></collapsingstatus>
      <hithighlightedsummary>.... <c0>....</c0> ....<ddd /></hithighlightedsummary>
      <hithighlightedproperties>
        <HHTitle>.... <c0>....</c0> ....</HHTitle>
        <HHUrl>....</HHUrl>
      </hithighlightedproperties>
      <imageurl imageurldescription="Item icon">....</imageurl>
      <contentclass>....</contentclass>
      <isdocument>....</isdocument>
      <picturethumbnailurl>....</picturethumbnailurl>
      <url>....</url>
      <serverredirectedurl></serverredirectedurl>
      <fileextension>....</fileextension>
      <spsiteurl>....</spsiteurl>
      <docvector>....</docvector>
      <fcocount>....</fcocount>
      <fcoid>....</fcoid>
      <pictureheight></pictureheight>
      <picturewidth></picturewidth>
    </Result>
    <TotalResults>...</TotalResults>
    <NumberOfResults>...</NumberOfResults>
</All_Results>

This is a pretty simple hierarchy, but if you don’t know what fields are called, you’re still stabbing in the dark with your XSL Transform.  Knowing the structure and what fields are called is half the battle.

Here’s a link to the full article: http://msdn.microsoft.com/en-us/library/ms546985.aspx

Option 2

You can view Fetched Properties (under the Display Properties heading) – just click into the field, CTRL-A (select all), and paste it into an editor.  This is easier to read if you’re purely interested in what FAST Search is pulling in, but less helpful in that you do not get sample data, or the nested hierarchy.  It should look something like this:

<Columns>
  <Column Name="WorkId"/>
  <Column Name="Rank"/>
  <Column Name="Title"/>
  <Column Name="Author"/>
  <Column Name="Size"/>
  <Column Name="Path"/>
  <Column Name="Description"/>
  <Column Name="Write"/>
  <Column Name="SiteName"/>
  <Column Name="CollapsingStatus"/>
  <Column Name="HitHighlightedSummary"/>
  <Column Name="HitHighlightedProperties"/>
  <Column Name="ContentClass"/>
  <Column Name="IsDocument"/>
  <Column Name="PictureThumbnailURL"/>
  <Column Name="Url"/>
  <Column Name="ServerRedirectedUrl"/>
  <Column Name="FileExtension"/>
  <Column Name="SpSiteUrl"/>
  <Column Name="docvector"/>
  <Column Name="fcocount"/>
  <Column Name="fcoid"/>
  <Column Name="PictureHeight"/>
  <Column Name="PictureWidth"/>
</Columns>

The two things to note here, are that the master page gallery (where your page layouts and masterpages live) is actually a list.  To manipulate the files in this gallery, you have to open it with SPList, which will open up all kinds of magical options, allowing you to check in and approve your files.

In your feature’s event receiver, add the following code:

public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
    using (SPSite siteCollection = (SPSite)properties.Feature.Parent)
    {
        if (siteCollection != null)
        {
            SPWeb topLevelSite = siteCollection.RootWeb;
            SPList masterPageGallery = topLevelSite.GetCatalog(SPListTemplateType.MasterPageCatalog);
            foreach (SPListItem li in masterPageGallery.Items)
            {
                if (li.File.Name.ToString() == "PageLayoutFileName1.aspx")
                {
                    if (!li.HasPublishedVersion)
                    {
                        li.File.CheckIn("Automatically checked in by StephanRocks' feature", SPCheckinType.MajorCheckIn);
                        li.File.Update();
                        li.File.Approve("Automatically approved by StephanRocks' feature");
                        li.File.Update();
                    }
                }

                if (li.File.Name.ToString() == "PageLayoutFileName2.aspx")
                {
                    if (!li.HasPublishedVersion)
                    {
                        li.File.CheckIn("Automatically checked in by StephanRocks' feature", SPCheckinType.MajorCheckIn);
                        li.File.Update();
                        li.File.Approve("Automatically approved by StephanRocks' feature");
                        li.File.Update();
                    }
                }
            }
        }
    }
}

It works great the first time doesn’t it?  But what then . . . as soon as you use the page layout in any of your sites, it gets locked down and can no longer be deleted and replaced.

The answer:

• CKSDEV tools and this nifty little script below.  If you have never used CKSDEV tools, DO IT . . . it’s an amazing plugin for Visual Studio 2010 that will help you love SharePoint deployment.
• Set your project to Upgrade instead of the normal Default on deployment (screenshot below).
• Ghost your files after upgrade/deployment (in SharePoint Designer, this is called Reset to Site Definition) with the code below.

In your Event Receiver under FeatureActivated, add the following code.

using (SPSite siteCollection = (SPSite)properties.Feature.Parent)
{
   if (siteCollection != null)
   {

      // enumerate through each site and remove custom branding
      foreach (SPWeb site in siteCollection.AllWebs)
      {
         SPFile pageLayout = site.GetFile(site.Url + "/_catalogs/masterpage/WebpartPage.aspx");
         if (pageLayout.Exists && pageLayout.CustomizedPageStatus == SPCustomizedPageStatus.Customized)
         {
            pageLayout.RevertContentStream();
         }
      }
   }
}

Some important things to note about this code:

• the using statement avoids memory leaks
• always check if SPAnything is null before using it – SharePoint will toss its cookies on quite a few controls if it has a null reference.
• foreach SPWeb will open every website under the current site collection, which allows you to target all sites where the masterpages and page layouts are deployed
• check if the SPFile pageLayout is SPCustomizedPageStatus.Customized
• RevertContentStream resets the file to site definition.

Sweet… Awesome… Deliciousness…  Hope this helps!

• Site Actions > Site Settings > Site Collection Features (under Site Collection Administration)
• Activate SharePoint Server Publishing Infrastructure
• Site Actions > Site Settings > Manage Site Features (under Site Actions)
• Activate SharePoint Server Publishing

The SharePoint Server Publishing feature is dependent on the site collection’s publishing infrastructure.  If you do not have access to the Site Collection Features, still try activating the site feature.  SharePoint will warn you if the site collection feature is not enabled.

Follow these 2 simple rules to use jQuery in harmony with SharePoint:

Set jQuery to its no-conflict state.

This requires you to use jQuery instead of $

example:

$("#element > span").text("my text");

becomes

jQuery("#element > span").text("my text");

Use SharePoint’s _spBodyOnLoadFunctionNames array instead of jQuery’s document ready function

Why not you ask?  SharePoint uses its own body onload function called _spBodyOnLoadFunctionNames which will collide with your document ready (run before or after).  If you are loading your JavaScript files through the elements.xml file (through a feature in Visual Studio), this can be particularly problematic with the order of how things load.

Instead, create a function with a custom name, and push the custom name into the _spBodyOnLoadFunctionNames array.  It’s wonderful and allows things to load in their proper order.

So – with examples, instead of:

$(document).ready(function() {
     // My custom functionality
});

use:

_spBodyOnLoadFunctionNames.push("myCustomFunctionName");

function myCustomFunctionName() {
     // My custom functionality
}

That’s it.  Enjoy!

Why only plain text OOB?

This has a lot to do with how SharePoint manages the list.  Every question becomes a field (column) in the survey list.  If you have 20 questions, then your list has 20 columns (there are more – but these are the ones you care about).  Field names are inherently plain text an SharePoint nicely URLEncodes the field for you (turning < into &lt;, etc.)

The Code

Please note: 

• You’ll need access to administer the list, and edit the items in the masterpage gallery through SharePoint Designer.
• You will need jQuery (download it at: http://docs.jquery.com/Downloading_jQuery)
• Surveys natively call whichever masterpage is set as the system master page (check it by going to: Site Actions > Site Settings > Master page (under look & feel).
• Note: if you’re using a Team site, you probably don’t have the option to change the masterpage.  Instructions to enable choosing a masterpage in a team site are available here.

Copy jQuery into the Style Library folder.
You can find it by clicking on All Files > Style Library.

Open the masterpage that is being used in advanced mode (usually v4.master).
You can find it by clicking on All Files > _catalogs > masterpage.

Right before the closing head tag (</head>), paste the following:

<script src="/gmi/Style Library/js/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function() {
        // Regular expression to match {img,/imageLocation/image.ext,Image Alt Tag}
        var imgRegExp = new RegExp("\{img,([^,]*)?,([^,}]*)?\}?","g");
        // Regular expression to match {link,http://www.link.ext,Link Action Text}
        var linkRegExp = new RegExp("\{link,([^,]*)?,([^,}]*)?\}?","g");

        // Iterate through the elements with class .ms-formlabel - each question label contains this class
        jQuery(".ms-formlabel").each(function() {
            // Grab the HTML
            var htmlToReplace = jQuery(this).html();
            // Use the regular expression created above to creat image and link tags
            var processedHtml = htmlToReplace.replace(imgRegExp, "<img src='$1' alt='$2' width='200' />");
            processedHtml = processedHtml.replace(linkRegExp, "<a href='$1' target='_blank' onclick='if (!confirm(\"You are about to visit this website in a new window or tab.  To return to this survey, simply close the new window/tab.\")) return false;' style='color: #77f; text-decoration: underline;'>$2</a>");
            // Replace the HTML with the newly processed HTML
            jQuery(this).html(processedHtml);
        });

        // And to style the results
        jQuery("h3.ms-vb > b").each(function() {
            // Grab the HTML
            var htmlToReplace = jQuery(this).html();
            // Use the regular expression created above to creat image and link tags
            var processedHtml = htmlToReplace.replace(imgRegExp, "<img src='$1' alt='$2' width='200' />");
            processedHtml = processedHtml.replace(linkRegExp, "<a href='$1' target='_blank' onclick='if (!confirm(\"You are about to visit this website in a new window or tab.  To return to this survey, simply close the new window/tab.\")) return false;' style='color: #77f; text-decoration: underline;'>$2</a>");
            // Replace the HTML with the newly processed HTML
            jQuery(this).html(processedHtml);
        });
    });
</script>

PLEASE NOTE: SharePoint has an HTML bug on the Graphical Response page (which is why I was forced to use h3.ms-vb instead of ms-standardheader).  If you look at the source code, the h3 tag is classed with “ms-standardheader, ms-vb” instead of “ms-standardheader ms-vb“.  The comma becomes part of the class-name and makes it unselectable.

You should also alter the stylesheet of this page to allow scrolling.  If not, part of your survey could end up below the fold (off screen).

<style type="text/css">
#s4-workspace {
    left: 0;
    overflow-x: auto !important;
    overflow-y: auto !important;
    position: inherit !important;
}    
body {
    overflow: auto !important;
}
</style>

How to use:

To add images to your survey questions, use the following formula when adding a new question:

{img,/imageLocation/image.ext,Image Alt Tag}

{link,http://www.link.ext,Link Action Text}

An example of an entry with an image and a link:

{img,http://www.rei.com/pix/common/REI_logo.gif,REI Logo}
{link,http://www.rei.com/,Visit the REI site}
How would you rate this vendor?

Which generates the following in the survey:

Added Bonus

The links all pop up in their own separate window, which, if done without warning can leave your less web-savvy users upset and they might not complete the survey.

For a better user experience, I added a popup to warn folks that they will be leaving the site and tell them how to get back to the survey.

Have fun!

Putting the scrolling onus back on the browser is important for 2 reasons:

• Increase browser support
• Allow mobile rendering (Android has issues rendering div overflows)

This is particularly handy in public-facing websites when you want to remove (not just hide) the ribbon and browse bar (which includes the sign-in controls and Site Actions menu).  The public will never need to use the ribbon or Site Actions menu, and you can have a login link in your footer if you need one on the public side.

How do to this:

You might think to yourself: “Hey, why not just dump core4.css?.. isn’t that the root of all my problems?!?“  It is important to not just dump out core4.css.  Removing it can take out other styles that webparts you are using rely on. Best practice is to have a custom stylesheet and override core4.css where necessary (and surprisingly, it’s pretty simple).

If you are using v4.master as a starting point (which will give you a lot of flexibility):

In your masterpage, remove scroll=”no” from the body, leaving:

<body onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">

Add a custom stylesheet to your masterpage by adding this tag right before the ending </head>.  By using this tag, SharePoint always renders the full URL so you don’t have to worry about permissions.

<SharePoint:CSSRegistration name="<%$SPurl:~SiteCollection/_layouts/MyCustomSite/css/custom-global.css%>" runat="server"/>

In your custom stylesheet, add the following:

/* Remove div scrolling and let the browser take over */
body.v4master {
    height: auto !important;
    overflow: auto !important;
    width: auto !important;
}
body #s4-workspace {
    left: inherit !important;
    overflow-x: inherit !important;
    overflow-y: inherit !important;
    overflow: inherit !important;
    position: inherit !important;
}

That’s it. Here are the results:

Alternately, you can also use nightandday.master as a starting point for similar results.
(The clients I work with have a mix of team sites, project sites and publishing sites, so v4.master is my starting point of choice for versatility.)

1. Hide the ribbon, browse bar and any other content you don’t want the public (anonymous users) to see
2. Keep accessibility controls intact
3. Allow people with the correct permissions (when logged in) to view all SharePoint editing controls

To accomplish this, you need access to the masterpage of the public website.

It’s actually fairly simple to hide any content in SharePoint with <SharePoint:SPSecurityTrimmedControl>.  As the tag suggests, it uses SharePoint’s security trim to hide content.

Surround the protected content with this tag, give it a unique ID (to that masterpage) and decide the appropriate permission string (options below)

Example of Usage:

<SharePoint:SPSecurityTrimmedControl ID="YourUniqueID" runat="server" PermissionsString="EditListItems">
  <!-- Content you want to show to folks who have Edit List permissions in the current site -->
</SharePoint:SPSecurityTrimmedControl>

Available Permission Strings (avaialble on Microsoft MSDN)

Excerpt from the link above:

Check it out on iStockAudio!

Outcasts features a monotone piano base with offset grungy percussion and subdued bass line. This track also includes fluttering string windup and a distant piano feature.

This track is titled “Outcasts” because of its monotone, yet intense nature.

A different version of this piece was used on a video titled Bridges of Minneapolis that a buddy of mine created.

Ted is a companion, a friend, a nuisance, a stress-ball, a change purse, a smile, a distraction, a phone protector… basically Ted is whatever you want him to be.
He also comes with a matching leather bracelet.  The bracelet fits a variety of wrists (3 sizes) and features stitching and a sam brown snap.

You can read more about Ted by visiting the site at www.evilteds.com.

Ted is also available for purchase on my Etsy store at stephanrocks.etsy.com.

I am currently working on some new developments for Ted.  A one-of-a-kind special-edition Ted will be out shortly.  I will keep you posted. ;-D

• The search box is rendered outside of the body area (in the breadcrumb tag)
• 2 Site Actions menus are rendered

This is a common issue when starting from v4.master (I am reusing a highly customized masterpage that was based off of v4.master).

First, let’s tackle the search box:

Using v4.master as a starting point, find the following tag:

<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">

Leave all the code inside of it where it’s at.  Move this tag and its closing tag to in between

<a name="mainContent"></a>

and

<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">

This allows your ribbon to function normally, leaves the breadcrumb controls in place, and takes the search box out of the ribbon and places it at the top of the content area.  One last thing to take care of is the Search box in the master page.   Add Visible=”false” to the following tag:

<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">

This hides the search that will be deactivated anyway, leaving remnants of a search area (you can also hide the wrapping container with CSS).

Next, let’s fix the dual Site Actions menu bar:

In a normal SharePoint 2010 site, the Site Actions menu is generated by the second <SharePoint:SPRibbonPeripheralContent…> (there are 2 tags – this is the first, with class ms-siteactionscontainer) tag.
The 2nd Site Actions menu you see in a FAST Search Center is generated inside the <asp:ContentPlaceHolder ID=”SPNavigation” runat=”server”> tag.

The Problem:

Which do you use, and which do you hide?

• The tag with ID=”SPNavigation”:
  • is generally used to generate items related to the Ribbon and navigation,
  • is necessary for the Global Navigation (tabs for Page, Browse, Publish, etc.);
  • is not designed to share space with any other controls (such as the Welcome, breadcrumb, tagging, or any other custom additions);
  • renders empty when in Site Actions;
• The <SharePoint:SPRibbonPeripheralContent tag:
  • renders Site Actions menu, page state buttons (Save, Edit, etc.) and site map (folder icon with drop-down breadcrumb)
  • does not generate the Global Navigation;
  • is designed to share space with other controls (so you can inline other content like logo, welcome box, etc.)
  • renders Site Actions everywhere

The Answer:

You don’t need both tags – you can dump the <SharePoint:SPRibbonPeripheralContent menu altogether, but doing so can remove functionality your users might expect (the short list above).  SPNavigation is required for the SharePoint masterpage to render (it will error out without it).

To get the best of both worlds:

• Keep the <SharePoint:SPRibbonPeripheralContent tag where it is at
  
• Move the Publishing Console out of the SPNavigation tag (leave it in the same place it’s in currently)
  
• Move the empty SPNavigation tag to the very bottom of your page – that’s it.
  
• Side-note: although you will be tempted, do not Visible=”false” or style=”display:none” the tag – this will cause your Global Navigation tabs to not display)

If you’ve listened to any of the other tracks on my site, you can probably guess that I love soundtracks. I enjoy creating a pseudo soundscape if you will. This was quickly titled Quiet, Dark Forest. Enjoy.

I’ve been working on this for about 6 months on and off now.  The flute is a recent addition.  I love tonal music (I’m a soundtrack geek) with some light and well-placed dissonance to evoke some type of emotion.  What emotion it is will be different for everyone, but will hopefully be inspiring.  The overall theme is rising from the ashes.

This is intended as a companion to the vector logo to be used on the web and where full color offset is available with sufficient scale.

This was a fun effects tutorial I worked through.  Photoshop has SO MANY awesome features.  This is one of the fun things you can do with it, given about 30 minutes and some patience.

Visit the Department of Public Safety website.

• On-the-fly PDF generator
• Custom-built PHP / MySQL content management system
• Semi-automated backend for easy form consumptions / processing.
• Custom stock ticker, accurate within 30 minutes, utilizing DHTML & AJAX for optimum page-load performance.

I have enjoyed greatly working with the folks at the EDA Center.  They are a great organization, doing very good work for the state of Minnesota.

Visit the EDA Center.

The first integrates into the existing Sparkhouse site.  It features a custom Flash banner that consumes data and auto-generates the blurring pinwheel.  Visit the Clayfire page on Sparkhouse.

The second part is a standalone site which acts as a portal for all the products.  Visit the Clayfire portal.

Visit www.activatefaith.org

.

Imagine yourself on a crisp morning in the mountains before sunrise, witnessing a dragon far off in the distance, dancing through the sky.  Every now and then it spews fire and then slowly starts to fly towards you, eventually enveloping you with its prestige and awesomeness.

This piece is planned for a full orchestra of ages 13 – 18 for a high school with a dragon for the mascot.  The audio realization here was done in Reason 5.0.

Check out my leatherwork at http://leather.stephanrocks.com

The site is a bit outdated – I will definitely be updating it very soon.

It’s been a long time since I last posted, and it’s about time. This project has taken me a few weeks to complete. This is a 2-minute soundtrack for a promotional video for Riciti. The accompanying video features many time-lapse shots of the different bridges in Minneapolis and some of the people who frequent them.  The imagery is strong, but also very tender, so I chose a light instrumentation of flute, trumpet, bass and piano.  This track was created in Reason 5 (YUM).  Enjoy!

This is something I’ve been working on for a while. This version of the piece has not been orchestrated (which is not my strength nor joy), so here it is played with piano, flute, strings and percussion. The full piece is about 3 minutes long.

Watch the Video (1.2MB Quicktime)

Some of the most productive creative moments have been brought on by creative challenges with strict boundaries, themes and time lines. I frequently challenge my friends to crank out something creative in a week’s time based on a single word. This was one of my pieces from one of the challenges titled, Drive
. The instrumentation is piano, drums, trumpet, bells and voice.

I was asked to write a “Christmassy” backtrack for a company (where I worked at the time) video, narrated by the CEO. They were given another version, but this was the first iteration, based on God Rest Ye Merry Gentlemen. Enjoy!

The film will not be completed until late 2010.  Even though I had a minor role – this was an amazing experience.
Check out the trailer here.

In 2007, one of my friends and I started the “weekly challenge.” We would choose a single word and have exactly one week to do anything creative surrounding it, whether art, music, poetry, etc. This was the outcome for Gold.

This piece was inspired by a poet who lives in New York City. His name is Daniel Donatacci and his words are very moving. The untitled piece starts with the words “All the Bright Day Long, the horrified soul waits for the change to hide in the eye of his beloved.” – Amazing.