Use JQuery to customize suitebar in Sharepoint 2016

Question

I'm trying to customize the Sharepoint 2016 suite bar so that the username is displayed at the immediate top left (instead of far right) as well as remove "My Personal Settings" from menu dropdown. This may not be perfect but I have identified two tags that can be removed to accomplish my desired result. The div tags are ".o365cs-nav-leftAlign" and "#O365_SubLink_SuiteMenu_zz2_ID_PersonalInformation".

I realize that I can use CSS to hide the elements but that doesn't prevent users from using chrome developer tools to unhide so I decided to go with JQuery remove method.

Works really well except for one annoying problem. When the page loads, it appears to remove the tags, rendering the page properly but then undoes what just happened. If I click the refresh browser button, all works well. What is going on?? I've spent countless hours on this with no solution. It looks like the elements re-render after page load. Here is my JQuery from master page:

<!--SPM:<SharePoint:ScriptBlock runat="server">-->
        $( window ).on( "load", function () {
            $( ".o365cs-nav-leftAlign" ).remove();
            $( "#O365_SubLink_SuiteMenu_zz2_ID_PersonalInformation" ).remove();
        });
    <!--SPM:</SharePoint:ScriptBlock>-->

Fyi, I don't require the section that includes the "Sharepoint" text (current left section) so deleting tag works well.

Any help would be greatly appreciated.

Thanks, Doug

Answer 1

I believe you trying change a dynamic component from SharePoint. So for whatever reason it is re-rendering it and your changes are lost.

You probably can hack your way and listen/check if the DOM node changed then run your code again or you can try to observe the DOM tree for changes and run the code again.

But as mentioned in the comment some screenshot would help to understand better what is going on.

Also I see in the block of your code all it does there is to remove dom elements. You can try to set a css to hide them instead. It would not matter if they are re-rendered in that case.

Answer 2

Finally solved my issue thanks to a few different sources so thought I would post for others who may experience the same thing.

The two following articles really helped. They explain how you can delay your script from running until other .js scripts complete. In my case, I needed to delay until 'suitebar.js' completed.

Run Javascript after page loads

SP.SOD how to use correctly?

My goal was to identify key elements on page load and remove them from displaying. In my case, I need to customize the top nav bar. The following worked for me.

Register you javascript file and add the delay to call your function in your custom.master file:

<script type="text/javascript" src="https://myspsite.ca/sites/mysite/SiteAssets/mycustom.js"></script>
        <!--SPM:<SharePoint:ScriptBlock runat="server">-->
        $(document).ready(function() {
            SP.SOD.executeFunc('suitenav.js','SP.ClientContext',myfunction());
            });
        <!--SPM:</SharePoint:ScriptBlock>-->

Upload your 'mycustom.js' file to your desired folder location. mycustom.js ....

function myFunction() {
    //this is used for unsupported IE Browsers
    var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        if (msie > 0)
        {
           return;
        }   
        else                 
        {

    // without event listener 'elem' or 'x' won't contain any HTMLElements
    window.addEventListener("load", function(event) {
    //remove div suitebar title section
    var elem = document.getElementsByClassName('o365cs-nav-leftAlign'); //search for class element
    while (elem.length > 0) elem[0].remove(); //delete class element

        //next step is to remove menu item from username drop-down
        var x = document.getElementsByTagName('a');//search for all <a> elements and assign to array.
        for (i = 0; i < x.length; i++) {

            if( x[i].innerText.toLowerCase().indexOf('my settings') > -1 ) {
            x[i].remove();

            }
        }
        });
}
}

Thanks, Doug