0

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

  • What's the meaning of "undoes", did it mean the changes roll back ? Please provide a capture about this. – Jerry_MSFT Apr 24 at 9:51
0

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.

| improve this answer | |
  • Hi Ricardo, your are correct. The navsuite.js re-renders the top nav bar. I realize that I can use CSS but I don't want users to "unhide" the elements using browser developer tools. I think it is finally figured out and will post below. – DMC Apr 24 at 18:02
0

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

| improve this answer | |
  • UPDATE: still didn't work for me ..... I was fooled by the cache arggg. No matter what I do, my updates are overwritten by page rendering. – DMC Apr 24 at 22:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.