Remove Lookup Hyperlink from SharePoint List view using JQuery

When you use lookup to the list automatically SharePoint give link to the lookup item on list view.

Check it out….

Lookup column with Hyperlinks

But many times, we don’t want  those Hyperlinks on the list view, as we can remove it from SharePoint Designer but it’s a hectic task.

Simply add JQuery  to remove those Hyperlinks.

First, get the URL of the link using Developer tool of IE or Firebug of Firefox browser. we are going to some part of URL in the below code.

Get URL using Developer tool of IE

Then copy following JQuery code to the HTML form WebPart on list view.

Jquery For MOSS 2007/WSS 3.0:

Note: Change highlighted text as per your context.

Jquery For SharePoint 2010/SharePoint Foundation 2010:

Note: Change highlighted text as per your context.

If View is Grouped, set list view setting "By default, show groupings:" to  Expanded

List View setting: Make sure that By default, show groupings: Expanded

List view with removed hyperlinks to Lookup columns:

Live simple!

How to rename the list view column name using JavaScript

We can change column name from JavaScript, it will not affect your existing functionality or custom code and also no need to change column name from SharePoint Designer as it is a troublesome task.

Follow this steps….

1. Get column Id using Developer tool of IE or Firbug of Firefox.

Get Column ID using Developer tool of IE

2. Add following JavaScript in HTML form web part on the list view.

<script type="text/javascript">
//This script is developed by Amit Phule # http://amitphule.blogspot.com/

 _spBodyOnLoadFunctionNames.push("ChangeColumnName"); // Call ChangeColumnName function on PageLoad

        function ChangeColumnName() {

            RenameColumn('diidSortAuthor', 'Author'); //Provide Column ID and New Column name

        }

        function RenameColumn(colID, NewHeader) {

            try {

                document.getElementById(colID).innerHTML = NewHeader; //Change Header Name

                document.getElementById(colID).title = "Sort by " + NewHeader; // Change Tooltip value

            }

            catch (err) {

                alert('Invalid Column ID:' + colID);

            }

        }

 </script>

Old column Name:

New Column Name:

Live simple !

Hiding Group Headers from SharePoint List View

We can hide the Group name in out of the box list view using JavaScript.

Grouped List View before adding JavaScript:

JavaScript (MOSS 2007/WSS 3.0):

<script type="text/javascript" language="javascript">

        _spBodyOnLoadFunctionNames.push("HideHeaders");

        function HideHeaders() {

            var elements = getElementsByClassName(document, "td", "ms-gb");

            var elem;

            for (var i = 0; i < elements.length; i++) {

                elem = elements[i];

                elem.childNodes[3].style.display = "none";

                elem.childNodes[4].nodeValue = elem.childNodes[4].nodeValue.replace(':', '');

            }

            elements = getElementsByClassName(document, "td", "ms-gb2");

            for (var i = 0; i < elements.length; i++) {

                elem = elements[i];

                elem.childNodes[3].style.display = "none";

                elem.childNodes[4].nodeValue = elem.childNodes[4].nodeValue.replace(':', '');

            }

        }

        function getElementsByClassName(oElm, strTagName, strClassName) {

            var arrElements = (strTagName == "*" && oElm.all) ? oElm.all : oElm.getElementsByTagName(strTagName);

            var arrReturnElements = new Array();

            strClassName = strClassName.replace(/\-/g, "\\-");

            var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");

            var oElement;

            for (var i = 0; i < arrElements.length; i++) {

                oElement = arrElements[i];

                if (oRegExp.test(oElement.className)) {

                    arrReturnElements.push(oElement);

                }

            }

            return (arrReturnElements)

        }

    </script>

JavaScript (SharePoint 2010/SharePoint Foundation 2010):

<script type="text/javascript" language="javascript">

        _spBodyOnLoadFunctionNames.push("HideHeaders");

        function HideHeaders() {

            var elements = getElementsByClassName(document, "td", "ms-gb");

            var elem;

            for (var i = 0; i < elements.length; i++) {

                elem = elements[i];

                elem.childNodes[0].childNodes[1].nodeValue = "";

                elem.childNodes[1].nodeValue = elem.childNodes[1].nodeValue.replace(':', '');

            }

            elements = getElementsByClassName(document, "td", "ms-gb2");

            for (var i = 0; i < elements.length; i++) {

                elem = elements[i];

                elem.childNodes[1].childNodes[1].nodeValue = "";                elem.childNodes[2].nodeValue = elem.childNodes[2].nodeValue.replace(':', '');

            }

        }

        function getElementsByClassName(oElm, strTagName, strClassName) {

            var arrElements = (strTagName == "*" && oElm.all) ? oElm.all : oElm.getElementsByTagName(strTagName);

            var arrReturnElements = new Array();

            strClassName = strClassName.replace(/\-/g, "\\-");

            var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");

            var oElement;

            for (var i = 0; i < arrElements.length; i++) {

                oElement = arrElements[i];

                if (oRegExp.test(oElement.className)) {

                    arrReturnElements.push(oElement);

                }

            }

            return (arrReturnElements)

        }

    </script>

Grouped List View after adding JavaScript:

Enjoy!

How to show days count after created date of Item in SharePoint list View

There are many posts showing date difference from today's date, but not a exactly the working solution is provided.

I have created the column that will show days count between Today's date and Created Date. and this column is update automatically.

For this I have created one calculated column and added simple JavaScript on the SharePoint List view.

Step 1:

Create new calculated column in the list and give formula as follows

="<DIV ID='CreatedDate'>"&TEXT(Created,"MM/dd/yyyy")&"</DIV>"

Step 2:

Add Form Webpart(MOSS 2007) or HTML Form webpart(SharePoint 2010) on the view and  add below JavaScript in it.

<script type="text/javascript">   

// Script created by Amit Phule

// Taken reference from Christophe@PathToSharePoint.com post

  

        var theTDs = document.getElementsByTagName("TD");

        var i = 0;

        var TDContent = " ";

        while (i < theTDs.length) {

            try {

                TDContent = theTDs[i].innerText || theTDs[i].textContent;

                if ((TDContent.indexOf("<DIV ID='CreatedDate'") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {

                    theTDs[i].innerHTML = getDateDiff(TDContent.replace('</DIV>', '').replace("<DIV ID='CreatedDate'>", ''));

                }

            }

            catch (err) { }

            i = i + 1;

        }

      

        // ExpGroupRenderData overwrites the default SharePoint function.  This part is needed for collapsed groupings      

        function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {

            var tbody = document.getElementById("tbod" + groupName + "_");

            var wrapDiv = document.createElement("DIV");

            wrapDiv.innerHTML = "<TABLE><TBODY id=\"tbod" + groupName + "_\" isLoaded=\"" + isLoaded + "\">" + htmlToRender + "</TBODY></TABLE>";

            var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j = 0; var TDContent = " ";

            while (j < theTBODYTDs.length) {

                try {

                    TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;

                    if ((TDContent.indexOf("<DIV ID='CreatedDate'") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {

                        theTBODYTDs[j].innerHTML = TDContent;

                    }

                }

                catch (err) { }

                j = j + 1;

            }

            tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild, tbody);

        }

        function getDateDiff(Date2) {         

            var days = 0;

            var difference = 0;

            Christmas = new Date(Date2);

            today = new Date();

            difference = today - Christmas;

            days = Math.round(difference / (1000 * 60 * 60 * 24));

          if(days!=0)

            days = days - 1;

            return days;

        }

    </script>

Screenshot:

Don't Show Missing Image Icon

Suppose you have html page that will display users profile with profile images and if image is not present, automatically missing image icon is appearing, it's looks unprofessional.

We can hide this icon or replace with the default image.

Simply Hide the missing image icon using Javascript:

<img id='ProfileImage' src='/images/1234.png' />

<script type="text/javascript">
var img = document.getElementById("ProfileImage");
img.onerror = function () { this.style.display = "none"; }
</script>

Use Rich Textbox of SharePoint 2007 in a custom asp.net page or user control

Many times while creating Custom SharePoint Form using ASP.net you need RichTextBox.

In SharePoint Controls there is a InputFormTextBox control that can be used as a RichTextBox. It control give same functionality and user interface as in SharePoint.

Take a look.

1. Add following tag (If you not added before) to Register the SharePoint DLL in your custom page or user control.

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

2. Add InputFormTextBox Control tag on the Page.

<SharePoint:InputFormTextBox runat="server" ID="TxtBody" ValidationGroup="CreateCase" Rows="8" Columns="140" RichText="true" RichTextMode="FullHtml" AllowHyperlink="true" TextMode="MultiLine" />

Enjoy!

Print Button on SharePoint Page

We can easly add print functionality on SharePoint Page. Just add following Javascript on the page (you can use HTML Form Webpart for adding javascript).

In Javascript i have used WebPartElementID="onetIDListForm" ; which is SharePoint Default ID of the Main contents.

JavaScript:

<script type="text/javascript" language="JavaScript">
//Controls which Web Part or zone to print 'TD ID'
var WebPartElementID = "onetIDListForm"; //SharePoint Main Content ID
//Function to print Web Part
function PrintArea()
{
var bolWebPartFound = false;
if (document.getElementById != null)
{
//Create html to print in new window
var PrintingHTML = '<HTML>\n<HEAD>\n';
//Take data from Head Tag

PrintingHTML += document.getElementsByTagName('head')[0].innerHTML;
PrintingHTML += '\n</HEAD>\n<BODY class="printSQS">\n';
var WebPartData = document.getElementById(WebPartElementID);
if (WebPartData != null)
{
PrintingHTML += WebPartData.innerHTML;
bolWebPartFound = true;
}
else
{
bolWebPartFound = false;
alert ('Cannot Find Web Part');
}
}
PrintingHTML += '\n</BODY>\n</HTML>';
//Open new window to print
if (bolWebPartFound)
{
var PrintingWindow = window.open("","PrintWebPart",
"toolbar,width=800,height=600,scrollbars,resizable,menubar");
PrintingWindow.document.open();
PrintingWindow.document.write(PrintingHTML);
PrintingWindow.document.close();
// Open Print Window
PrintingWindow.print();
}
}
</script>

HTML Code:

<input type="button" value="Print" onclick="javascript:void(PrintArea());return false;__doPostBack('btPrint','')" />

<a href="#" onclick="javascript:void(PrintArea());return false;__doPostBack('btPrint','')"  ><img src="/sites/aaa/PublishingImages/print.gif" border="0" complete="complete"/></a>

You can add html code any where on the page.