Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Monday, February 18, 2013

SharePoint 2010 Hide Site Collection Root and Path Separator in Breadcrumb

In SharePoint 2010 there are a lot of times where you do not want to display the site collection root sites to users in navigation or in the bread crumb.  There are many ways to achieve the task of hiding the root node in the bread crumb but in my opinion this gets you only half way to where you want to be.  Most solutions you will find only hide the root node and leave the Path Separator displayed in the bread crumb.  Whether this is the default > or a custom styled image who wants that to be displayed as the first level of a breadcrumb?  Not my customers that's for sure.  

So how to not only hide the root node but the separator as well?  Well that's where jQuery comes to save the day.  The path separator element has no ID and no style attributes applied which has to contribute to the lack of solutions on the web.  These problems are areas that jQuery excels in.  By being able to select any element from the DOM jQuery really flexes its muscles in these type of scenarios.  Well long story short I have included the jQuery script and HTML used to hide the root node and separator from the SharePoint 2010 breadcrumb.  You can add this to the master page along with references to the jQuery libraries and let the magic happen.

<asp:ContentPlaceHolder id="PlaceHolderBreadcrumb" runat="server">
    <div id="master-page-breadcrumb">
        <asp:SiteMapPath   
            ID="contentNavigation"
            runat="server"                           
            SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider"
            RenderCurrentNodeAsLink="false"
            NodeStyle-CssClass="breadcrumbNode"
            CurrentNodeStyle-CssClass="breadcrumbCurrentNode"
            RootNodeStyle-CssClass="breadcrumbRootNode"
            HideInteriorRootNodes="false"
            SkipLinkText="">
            <RootNodeTemplate></RootNodeTemplate>
        </asp:SiteMapPath>
    </div>
                   
</asp:ContentPlaceHolder>
<script>
    $(document).ready(function(){
                   
        var rootNode = $("span[id$=contentNavigation] > span:eq(0)");
                       
        if (rootNode.attr("class") == "breadcrumbRootNode")
        {                           
            rootNode.hide();
            $(rootNode).next("span").css('display', 'none');                           
        }
                   
    });
</script>

Monday, April 16, 2012

SharePoint 2010 PreSaveAction() saves the day...

Looking for a quick way to do some validation when working on a SharePoint 2010 Foundation product and you don't have access to the InfoPath toolbox that SharePoint Server 2010 provides??  Let me introduce you to PreSaveAction() javascript call!  This function is available in 2007 and 2010 it is just a little easier to access in the 2010 platform with the ability to edit list forms through the ribbon.  Below is a quick script from MSDN for validating that attachments are added to a List Item in a Custom List but this is just the beginning.  You could verify column formatting and any other PreSubmit work that you need to happen on your custom lists.  Place the script in a ContentEditor webpart on your NewForm.aspx and EditForm.aspx pages and you are ready to Validate your buns off!!

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

function PreSaveAction() {
var attachment = document.getElementById("idAttachmentsTable");

if (attachment == null || attachment.rows.length == 0) {

document.getElementById(
"idAttachmentsRow").style.display = 'none';

alert("Attachments are required on this list.");
return false;
}else { return true; }

} </script>;