Cool Stuff for SharePoint 2010 – Internal Phone Directory using JScript

The following screen shot actually has two cool things. The
first is the Tabbed environment, which is a great way of organising ‘real
estate’ on the sharepoint page. (I’ll save this for another post). The other is
the Internal Phone Directory I created for the college. It is quite simple to
create really. It utilises a content type web part and some Jscript.

The JScript does an active search of the SharePoint page against the field with focus and returns items. Warning.. this app is not great for more than 200 records

Creating an internal phone directory

1. Create a custom list

2. Add a content type web part to the web zone you have placed the custom
list.

3. Edit the HTML for this content type

 

 

4. Add the following jscript

<script src=”http://www.google.com/jsapi%22%3E%3C/script%3E%3Cscript>

google.load(“jquery”, “1.2.6”);

google.setOnLoadCallback(function() {

$(document).ready(function()

{

jQuery.extend(jQuery.expr[‘:’], {

containsIgnoreCase:
“(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><script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
type=”text/javascript”></script><script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
type=”text/javascript”></script>

Advertisements

About whellmuth

Working with the education software industry to build software with standard arhitectures that allows schools to have extensible and well integrated technologies. Member of Software QLD. Member of Microsoft advisory board on cloud computing. My doctorate specialises in Software Architecture in the Education environment. My Master Research specialised in IT change management.
This entry was posted in Microsoft SharePoint. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s