Wednesday, July 28, 2010

Filter multiple List Columns & also by specific columns

Add a Content Editor webpart to the page with the following script in the Source Editor:


<script src="http://www.google.com/jsapi"></script>

<script>

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()

{

//modify the test columns here....
if( ($(this).hasClass("ms-vh-icon")) ||($(this).text()== "col2") || ($(this).text() == "col3") )

{// 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>

Thanks to http://instantlistfilter.codeplex.com/

Monday, July 12, 2010

Modify form labels, Hide or remove columns in SharePoint form

In the CEWP or on the new item page or on the Display.aspx add the following script

<script type="text/javascript" src="http://YourServer/sites/yourSubsite/JQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

fields = init_fields();

var dateTypeLabel = "<div style='color:red'>Please enter the Date Type. (...custom text added by adressing the formlabel with jQuery!)</div>"
var applicationLabel = "<div style='color:red;font-size:9px;'><i>Please enter the Application Name</i></div>";

//Can change more field labels similarly & all the variables defined are the field Internal names


$(fields['DateType']).find(".ms-formlabel h3").after(dateTypeLabel);
$(fields['ApplicationName']).find(".ms-formlabel h3").after(applicationLabel);
// after appends the content whereas .text() changes the existing field label to new label

//Can also append text to labels on hover

//$(fields['DateType']).find(".ms-formlabel h3").hover(
//   function(){     $(fields['DateType']).find(".ms-formlabel h3").append(dateTypeLabel);  },
//   function(){     $(fields['DateType']).find(".ms-formlabel h3").text("DateType");       }
//)

// Hide the Current user label display ( to show only selected labels )
//$(fields['Current_x0020_User']).find(".ms-formlabel h3").parent().parent().hide();
////$(fields['Current_x0020_User']).find(".ms-formlabel h3").parent().parent().hide();

//Set Status(like color,font...) of  Few or Many columns at a time
var arrCFC = ["Col1", "Col2",  "Col3", "Col8", "Col9", "Col12", "Col13", "Col14"];

           //  All these columns, labels here are turned blue
          jQuery.each(arrCFC, function() {
               $(fields[this]).find(".ms-formlabel h3").parent().parent().css("color","Blue");
               $(fields[this]).find(".ms-formlabel h3").css("color","Blue");
  
             });

function init_fields(){
  var res = {};
  $("td.ms-formbody").each(function(){
      if($(this).html().indexOf('FieldInternalName="')<0) return;
      var start = $(this).html().indexOf('FieldInternalName="')+19;
      var stopp = $(this).html().indexOf('FieldType="')-7;
      var nm = $(this).html().substring(start,stopp);
      res[nm] = this.parentNode;
  });
  return res;
}
</script>

Reference:  http://sharepointjavascript.wordpress.com/2009/10/03/modify-formlabel-in-sharepoint-form/
(By Alexander)

Wednesday, July 7, 2010

Jquery - Adding Tabs with each tab refers to a new page

//Download all the necessary plugins from Jquery UI: http://jqueryui.com/download
<script type="text/javascript" src="Javascript/JQuery/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="Javascript/JQuery/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="Javascript/JQuery/jquery.ui.tabs.js"></script>
    <link type="text/css" href="Javascript/JQuery/jquery-ui-1.8.2.custom.css" rel="stylesheet" >
   
    <style type="text/css" >
    ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*--Set height of tabs--*/
    border-bottom: none;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
   
   
    .tab_container {
   
    border: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}
    </style>
   
   

<ul class="tabs">
    <li><a href="#tab1" onClick="parent.location='/sites/.../..../AllItems.aspx'">Tab 1</a></li>
    <li><a href="#tab2" onClick="parent.location='/.../.../Page2.aspx'">Tab 2</a></li>
    <li><a href="#tab3" onClick="parent.location='/sites/.../.../Page3.aspx'">Tab 3</a></li>
    <li><a href="#tab4" onClick="parent.location='/sites/.../.../Page4.aspx'">Tab 4</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
                This is a Colloboration site for Page 1 Team Members. This is the Content in Page 1 &amp; Tab 1
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
       This is the Home Page for Page 2. This is the Content in Page 1 &amp;     Tab2
    </div>
</div>








<script type="text/javascript">
$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab & li:eq(1) to show second url
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });
});
</script>