formWorks 0.2a - Usermode SharePoint Forms API ... kinda

Ever wish you could modify the look and feel of your SharePoint forms, but for one reason or another you don't have access to the server to make the changes, or you only want to change one little thing on one page?

The same dilemma led me to develop formWorks. By slipping the formWorks code into a Content Editor Web Part at the bottom of a SharePoint form, I'm able to modify just about any part of the form at will with some basic JavaScript, HTML, and CSS code.

At it's most basic level, formWorks "pops the hood on SharePoint forms" and makes it easy to code your own tweaks into the form. If you don't like the length of a text box, you can shrink it with code as simple as this:

form['Title'].ctrl.style.width = '50%';

Seriously, it's that easy.

The documentation is somewhat lacking, but if you understand what I'm talking about here, then there's a good chance that you'll know what you're doing and won't need a lot of tips and/or pointers. If you do, please feel free to contact me via email (ben[at]bradleyit.com) or click on the "Call Me" link under my picture to talk to me via Google Voice!

The code was kinda long, so I posted it here.

Better JavaScript Trim

I'm continuing the trend of posting updated code with the new version of the trim function for JavaScript. JS doesn't include a trim() function by default so you have to build one yourself. Below is the snippet that I use to accomplish the task:

function trim(x) { return x = (x != null) ? x.replace(/^[\t\n\r\s]*|[\t\n\r\s]*$/g,"") : false ; }

Uhh...

Which is mine?
-Ben

Sent from my BlackBerry

SharePoint - Expand or Collapse Web Parts v 2.0

Last November I posted some code that made it possible to expand or collapse various web parts on a SharePoint page using a little plus/minus icon. Cecilie reported some problems with that code so I decided to re-write it.

As usual, you'll need to put this code into a Content Editor Web Part at the bottom of the page.

Here's the result of that re-write:

<script type="text/javascript">
// Add the Web Part Titles here to have them opened by default
var wpsToSkip = ['Tasks','sandbox'];

function wpExpander() {
 var theTDs = document.getElementsByTagName("TD");
 for (var t=0;t<theTDs.length;t++) {
  var id = theTDs[t].id;
  if (id.match("WebPartTitleWPQ")) {
   id = id.substr(id.indexOf("WPQ"));
   var title = (theTDs[t].innerText || theTDs[t].textContent).replace(/[\n\r]/,'');
   var strImg = "<img style='margin:6px 5px 0px 2px;cursor:hand;float:left;' ";
   if (wpsToSkip.join().match(title)) {
    strImg += "onClick='showHide(\""+id+"\",this)' src='/_layouts/images/minus.gif'>";
   } else {
    strImg += "onClick='showHide(\""+id+"\",this)' src='/_layouts/images/plus.gif'>";
    document.getElementById("WebPart"+id).style.display = "none";
   }
   theTDs[t].innerHTML = strImg + theTDs[t].innerHTML;
  }
 }
}

function showHide(i,o) {
 var wp = document.getElementById("WebPart"+i);
 wp.style.display = (wp.style.display=="") ? "none" : "";
 o.src = (o.src.match(/plus.gif/)) ? "/_layouts/images/minus.gif" : "/_layouts/images/plus.gif";
}

_spBodyOnLoadFunctionNames.push("wpExpander()");
</script>

Late Night with the Lappy

I had some network maintenance (my actual job) to do tonight & I decided that it was time to show off the lappy.
-Ben

Sent from my BlackBerry

SharePoint - Expand Calendar Month View by Default

11:00 PST 24 Aug 2009 - I've found a decent solution to the bug where calendars wouldn't expand by default unless you went forward or backward by a month. It's not the cleanest solution, but it will work and will be transparent to your users. I've updated the code below to the new code.

==================

16:00 PST 20 Aug 2009 - Update!!! - I'm able to duplicate the error whereby calendars will only expand after clicking the next/previous month buttons on my live site. Unfortunately there's something different about my dev site so that it works there, but on on the live. Stay tuned & I'll publish a fix.

==================

The default calendar month view in SharePoint will only display about four items per day so if you have more than four items in a day, you'll have to click the little "Expand all" at the top of the calendar or the "X more items" link in the day. Not a big hassle, but if you do it a (couple) dozen times a day it gets old.

So how can you make the calendar display all the events in a day by default? Like every other SharePoint solution on this blog, a small bit of JavaScript and the trusty Content Editor Web Part (CEWP)!

1. Add a CEWP below the calendar that you want to display in expanded view by default.
2. Add this code to the CEWP "Source editor...":

<div id='cover' style='position:absolute;top:0px;left:0px;width:100%;background:white;'></div>
<script type="text/javascript">

var yScroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
var y = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
var xScroll = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
var x = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
var cover = document.getElementById("cover");

cover.style.height = (y + yScroll) + "px";
cover.style.width = (x + xScroll) + "px";

function expand() {
if (document.referrer != location.href && !location.href.match(/CalendarPeriod=((week)|(day))/i)) { GetMonthView('11111111'); }
else { cover.style.display = "none"; }
}
window.onload = function() { expand(); };
</script>

The Harvest

-Ben

Sent from my BlackBerry

Mark the Digger

The kiddo had fun digging while we picked some wild blackberries.
-Ben

Sent from my BlackBerry

At the eye Doc

(from Katie)

Ice ice baby
-Ben

Sent from my BlackBerry