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!