Muhimbi

Posted at: 9:13 AM on 24 September 2009 by Muhimbi

We love it when third parties start writing code and examples for our products, it makes writing new blog entries very simple and quick. Today we got another cool Infuser script from Jaap Vossers who previously brought us the script that allows Site Settings to be opened using a keyboard shortcut.

Today’s script is a JavaScript based solution that adds filter-as-you-type textboxes to every column of a SharePoint list or document library. It uses jQuery to add the textboxes and perform the filtering.

As an added bonus it adds filtering to field types that normally aren’t filterable, like calculated and note columns.

Jaap has made the code available on CodePlex, but it is probably easier to just paste the code listed below directly into Infuser.

Follow the steps outlined below to add this cool script to your site collection:

1. Download and install Muhimbi’s free SharePoint Infuser on one of your Web Front End Servers.
    
2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
      
3. In your SharePoint Site collection, on the Site Actions / Site Settings screen, select Infuse custom content from the Look and Feel column.
    
4. Paste the code displayed below into Infuser’s code window. If you are using IE then you may want to paste it in WordPad first , otherwise all line breaks are stripped out.
    
5. Click the Save button, navigate to any list and start filtering.
    

<script src="/_layouts/Muhimbi.Infuser/JQuery/jquery-1.3.2.min.js"></script>

<script>

// SharePoint InstantListFilter - developed by Jaap Vossers

$(document).ready(function()

{  

    jQuery.extend(jQuery.expr[':'], {

       containsIgnoreCase: function(a,i,m) {return (a.textContent||a.innerText||

                     jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0}

     });

  $("table.ms-listviewtable tr.ms-viewheadertr").each(function()

  {

    if($("td.ms-vh-group", this).size() > 0)

    {

      return;  

    }

    var tdset = "";

    var colIndex = 0;

    $(this).children("th,td").each(function()

    {

      if($(this).hasClass("ms-vh-icon"))

      {

        // attachment

        tdset += "<td></td>";

      }

      else

      {

        // filterable

        tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + 

                 colIndex + "' /></td>";        

      }

      colIndex++;

    });

    var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";

    $(tr).insertAfter(this);

  });  

  $("input.vossers-filterfield")

    .css("border", "1px solid #7f9db9")

    .css("width", "100%")

    .css("margin", "2px")

    .css("padding", "2px")

    .keyup(function()

    {      

      var inputClosure = this;

      if(window.VossersFilterTimeoutHandle)

      {

        clearTimeout(window.VossersFilterTimeoutHandle);

      }

      window.VossersFilterTimeoutHandle = setTimeout(function()

      {

        var filterValues = new Array();

        $("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function()

        {        

          if($(this).val() != "")        

          {

            filterValues[$(this).attr("filtercolindex")] = $(this).val();

          }

        });    

        $(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()

        {

          var mismatch = false;

          $(this).children("td").each(function(colIndex)

          {

            if(mismatch) return;

            if(filterValues[colIndex])

            {

              var val = filterValues[colIndex];

              // replace double quote character with 2 instances of itself

              val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));              

              if($(this).is(":not(:containsIgnoreCase('" + val + "'))"))

              {

                mismatch = true;

              }            

            }

          });

          if(mismatch)

          {

            $(this).hide();

          }

          else

          {

            $(this).show();

          }    

        });        

      }, 250);

    });

});  

</script>

Labels: Articles, Infuser, JQuery

Posted at: 9:18 AM on 21 September 2009 by Muhimbi

As we are active SharePoint developers, hey it is all we do, we need access to the Site Settings screen on a regular basis. As 'real developers’ we prefer keyboard shortcuts as, quite frankly, picking up the mouse, navigating to the Site Actions menu and then clicking Site Settings is just waaaay too time consuming.

A couple of months ago we came around a cool tool from Jaap Vossers, which installs a web control on your SharePoint server to automatically hook up the ctrl-s key to the Settings screen. As we don’t like to install any new software on our servers we challenged Jaap to rewrite it in such a way that it would work with our free SharePoint Infuser tool, which has the ability to automatically inject any script or HTML in all pages on a site collection without causing any nasty side effects such as ghosting etc.

 
It took Jaap a cool hour to change things around, make it look all pretty, and release it as a CodePlex project. It works fantastically and it is now enabled by default on all site collections on our development servers.

Follow the steps outlined below to add this great trick to your site collection:

1. Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.
    
2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
      
3. In your SharePoint Site collection, on the Site Actions / Site Settings screen, select Infuse custom content from the Look and Feel column.
    
4. Paste the code displayed below into Infuser’s code window. If you are using IE then you may want to paste it in WordPad first , otherwise all line breaks are stripped out.
    
5. Click the Save button, navigate to any page in the site collection and press ctrl-s.
    

<link rel="stylesheet" type="text/css"

      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css"/>

<script src="/_layouts/Muhimbi.Infuser/JQuery/jquery-1.3.2.min.js"></script>

<script src="http://js-hotkeys.googlecode.com/files/jquery.hotkeys-0.7.8-packed.js"></script>

<script src="http://jqueryui.com/latest/ui/ui.core.js"></script>

<script src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>

<script type="text/javascript">

function ToggleInlineSiteSettings()

{ 

  var dlg = $("#InlineSiteSettingsWrapper");

  if(dlg.dialog("isOpen"))

  {

      $("#InlineSiteSettingsWrapper").dialog('close');  

  }

  else

  {

      $("#InlineSiteSettingsWrapper").dialog('open');      

  }

  return false;

}

$(document).ready(function()

{ 

  var hasPermissions = $("[id$='_MenuItem_Settings']").size() > 0;

  if(hasPermissions)

  {  

      $(document).bind("keydown", "Ctrl+s", ToggleInlineSiteSettings);

      var siteSettingsUrl = L_Menu_BaseUrl + "/_layouts/settings.aspx";

      $("<div id='InlineSiteSettingsWrapper'></div>")

        .css("background-color", "white")

        .load(siteSettingsUrl + " #ctl00_PlaceHolderMain_SettingLinks")

        .dialog({ width: "90%", modal: true, autoOpen: false});

    }

});

</script>

Labels: Articles, Infuser, JQuery

Posted at: 6:54 PM on 04 August 2009 by Muhimbi

Another day and another cool example of how the SharePoint user interface can be modified using our free SharePoint Infuser. Today we are using some JavaScript magic to make this carpet … errrr … menu float in the same position while scrolling through a page.

To ensure this new functionality is added to every page in the Site Collection we use Infuser rather than the Content Editor Web Part. The JavaScript code is relatively simple, all it does is hook the scroll event, check if the menu is about to scroll off-screen and then re adjust the ‘top’ of the menu with the position of the scroll bar. Some additional code inserts a place holder element in the space that used to be occupied by the menu to ensure the width of this area doesn’t collapse.

There are more elegant ways to achieve floating effects, but the advantage of this code is that it works in IE6,7,8, FireFox, and Google Chrome. (It really works brilliantly in Chrome, as smooth as it gets)
 

Notice how the Quick Launch menu scrolls with the content

Follow the steps outlined below to implement the changes on your site collection:

1. Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.
    
2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
    
3. From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.
    
4. Copy the script at the end of this posting and paste it into Infuser’s code window. If you are using IE then you may want to paste it in WordPad first , otherwise all line breaks are stripped out.
    
5. Click the Save button and navigate to any page that is long enough to have a scroll bar and scroll the window down.
    

.

Labels: Articles, Infuser, JQuery

Posted at: 11:41 AM on by Muhimbi

It has been less than a week since we released our free SharePoint Infuser and we are already at our third blog posting.

Today we are fixing something that has been bothering us for a long time, which is the lack of proper navigation in the SharePoint Wiki, particularly the lack of a ‘home’ button and the fact that the Breadcrumb navigates to allitems.aspx. Grrrrrr.

So, in order to fix this we use SharePoint Infuser to insert the appropriate JavaScript into every Wiki Page in one go. Similar workarounds have been available for a while, but they need to be applied to each wiki page separately, which isn’t a scalable solution.

We are using Chris Chapman’s article on how to add buttons to the Wiki Toolbar as a starting point, we then add some JQuery magic to locate the appropriate breadcrumb link and set its URL to the wiki home page in a way that works across different languages as this page is not always called ‘home.aspx’.

Follow the steps outlined below to implement the changes on your Wiki:

1. Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.
    
2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
    
3. From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.
    
4. Copy the script at the end of this posting and paste it into Infuser’s code window. If you are using IE then you may want to paste it in WordPad first , otherwise all line breaks are stripped out.
    
5. Click the Save button and navigate to any Wiki page.
    

Note that the script below works without modification on a ‘Wiki Page Library’. In order to make it work on a ‘Wiki Site’ change the ‘wikiHome’ variable to ‘../’ or whatever the equivalent of ‘home.aspx’ is in your language.

.

Labels: Articles, Infuser, JQuery

Posted at: 5:10 PM on 30 July 2009 by Muhimbi

It’s only been a day since we launched our free Infuser tool  and we already have an excellent application for it; Add Search as you Type support to SharePoint’s standard search box.

As many of you will be aware, Jan Tielens created a proof of concept some time ago to demonstrate how you could add this functionality to a custom web part. Very innovative, but unfortunately it has a couple of problems, most notably:

• The script has to be added manually to every page on the site, which is very laborious and not always possible.
   
• It doesn’t integrate with the standard MOSS search box, leaving the end user with two search boxes to choose from.
   
• If the user doesn’t have access to the root site of the portal then search doesn’t work.
   
• Resizing the window with the search results causes undesired effects.
   
• The search button is present, but doesn’t work.
   
• It is not clear how to make the search results window disappear.
   
• It relies on the MOSS Search web service and doesn’t work with WSS.  
   

Although Jan’s script works without modification in Infuser, we asked Jan’s permission and spent a couple of hours to address the points listed above with the exception of WSS compatibility, feel free to add this yourself. The full source code is listed at the end of this article.
 

 
Follow the steps outlined below to add Search as you Type to your site collection:

1. Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.
    
2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
    
3. From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.
    
4. Download the code and paste it into the Infuser window. If copying from the window below and you are using IE then you may want to paste it in WordPad first , otherwise all line breaks are stripped out.
    
5. Click the Save button and navigate to any page that contains a search box and start typing.
    

.

Labels: Articles, Infuser, JQuery

Posted at: 5:33 PM on 29 July 2009 by Muhimbi

They say Great things come in small packages and Simple solutions are often the best. In case of our new, and completely free product, we humbly agree.

SharePoint Infuser’s concept is simple. It allows custom content, any content, to be inserted automatically on every page in a site collection. Big deal you may think, I can do that easily via SharePoint Designer / Customer Master Page / Content Editor Web Part, Delegate Controls etc. All I need to do is spec it out, develop it, put it through testing, put it past infrastructure, sweet talk the change control guy and my manager…. Yes, easy indeed.

And indeed, some people may prefer to roll their own solution, which is not necessarily always a bad idea. Meanwhile the rest of us may want to make changes that can be measured in minutes rather than days, or more likely, weeks.

In essence Infuser is used in a similar manner to the many existing Content Editor Web Part (CEWP) ‘hacks’ such as Jan Tielens’ cool hacks, End User SharePoint’s many articles and ContentEditorWebPart.com. The main difference is that the CEWP must be added manually to every page in the site - which is a pain and doesn’t scale – whereas Infuser inserts the code automatically on every page in the Site Collection.

The best way to show the power of Infuser is by example. In addition to the examples listed below we will publish many more over the next few weeks, so subscribe to our RSS feed, Twitter Stream or Newsletter.

Example 1 – Hide unnecessary user interface elements

Sometimes less is better, which is why it may be a good idea to hide user interface elements that your users have no need for, or quite frankly would confuse them. In the following example we will hide the ‘View all Site Content’ and ‘Search Scope Picker’ from every page in the site collection as visualised in the following ‘before & after’ screenshots.

Follow the steps outlined below to implement the changes:

1. Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.
    
2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
    
3. From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.
    
4. Insert the following style sheets:
   
   <style>
      .ms-quicklaunchheader {display:none}
      .ms-sbscopes          {display:none}   /* MOSS */
      #idSearchScope        {display:none}   /* WSS */
   </style>
    
5. Click the Save button and navigate to any page that was previously displaying the Search Scope Picker.

Example 2 – Collapse the Quick Launch menu

Let’s continue with a slightly more complex example that inserts a small section of JavaScript in every page in order to collapse the individual items in the Quick Launch Menu.

Follow the steps outlined below to implement the changes:

1. Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.
    
2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
    
3. From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.
    
4. Copy and paste the code from this End User SharePoint posting.
    
5. Click the Save button and navigate to any page that displays the Quick Launch Menu.

Example 3 – Let it snow

Finally, and most importantly, a real Enterprise Ready example: Snow!…. Yes snow on every page of your SharePoint site, why not.

Follow the steps outlined below to add this marvellous winter wonderland.

1. Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.
    
2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
    
3. From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.
    
4. Manually insert “<script></script>” in the Infuser window and paste the code in snowstorm.js in between.
    
5. Update line 75 (see how cool the line numbers in our editor are) to:
    
   var imagePath = 'http://www.schillmania.com/projects/snowstorm/image/snow/';
    
6. Click the Save button and navigate to any page in the site collection.

Bonus Examples

We created a couple of follow up articles:

• Automatically add ‘Search As You Type’ to every SharePoint page using Infuser
• Fixing SharePoint’s Wiki by adding a home button and repairing the breadcrumb
• How to Float the SharePoint Quick Launch menu with the location of the scroll bar

In closing

The possibilities are endless. If it can be done in the Content Editor WebPart then it can most likely be done more efficiently using SharePoint Infuser.

So, if  your IT team doesn’t allow you to make changes, is too busy, your changes are not a priority or if you are hosting your SharePoint site externally and you are not allowed to install your own modifications then SharePoint Infuser is most likely the best option you have to modify the look and feel of your SharePoint site.

We are currently working with a number of hosting providers to ensure Infuser is installed by default on all systems, allowing all their customers to benefit from it.

Note that we ship with JQuery (1.3.2-min) out of the box. It can be found at “/_layouts/Muhimbi.Infuser/JQuery/jquery-1.3.2.min.js”

For more information check out the:

• Product Page.
• Release Notes.
• User & Administration Guide.
• More Screenshots.
• Message Board.

As always, feel free to contact us using Twitter, our Blog or regular email or subscribe to our newsletter.

Download your complete free, no strings attached, copy here (1MB).

You don’t even have to register, but we would appreciate it if you did.

Labels: Infuser, JQuery, News, Products