none
Creating custom 'empty' list message

    Question

  • Hi,

    I am trying to replace the standard 'empty' list/library messages with custom ones. I have managed to do this for browsers that support the innerText property using a Script Editor with a list where the message is located directly in a <td class="ms-vb"> using the following...

    <script type="text/javascript">
     function ChangeDiscussionMessage()

        var a = document.getElementsByTagName("TD") 
        for (var i=0;i<a.length;i++) 
        {   
            if (a[i].className=="ms-vb")   
            {     
                if (a[i].innerText.indexOf("There are no items to show in this view")>-1)     
                {        
                    a[i].innerHTML = "Custom message......";     
                }   
            } 
        }
    }
    _spBodyOnLoadFunctionNames.push("ChangeDiscussionMessage")

    </script>

    But I need to make the above work cross all browsers, and also find a way to replace those messages that are located within <table class="ms-list-emptyText-compact ms-textLarge><tbody><tr id="empty-WPQ1"><td colspan="99"> EMPTY MESSAGE  </td></tr></tbody></table>.

    I have managed to do the above using the script below, but the standard message appears first before being replaced with the custom one.

    <script type="text/javascript">
     
    function ChangeDiscussionMessage()

        var a = document.getElementsByTagName("table") 
        for (var i=0;i<a.length;i++) 
        {   
            if (a[i].className=="ms-list-emptyText-compact ms-textLarge")   
            {     
                if (a[i].innerHTML.indexOf('<tbody><tr id="empty-WPQ1"><td colspan="99">There are no items to show in this view')>-1)     
                {        
                    a[i].innerHTML = '<tbody><tr id="empty-WPQ1"><td colspan="99">Currently, the aircraft is not linked to any major assemblies</td></tr></tbody>';     
                }   
            } 
        }
    }
      
    _spBodyOnLoadFunctionNames.push("ChangeDiscussionMessage")

    </script>

    I am sure there is a simple way of doing this, but I do not have enough js knowledge to work it out. Any help would be much appreciated!

    Thursday, August 07, 2014 12:59 PM

All replies

  • the most effective way would be to go to the 14 hive\TEMPLATE\LAYOUTS\XSL

    make a backup from and open: vwstyles.xsl

    search for

    <xsl:template name="EmptyTemplate" ddwrt:ghost="hide">
        <tr>
          <td class="ms-vb" colspan="99">
            <xsl:value-of select="$NoAnnouncements"/>
            <xsl:if test="$ListRight_AddListItems = '1'">
               <xsl:text ddwrt:whitespace-preserve="yes" xml:space="preserve"> </xsl:text>
              <xsl:value-of select="$NoAnnouncementsHowTo"/>
            </xsl:if>
          </td>
        </tr>
      </xsl:template>

    and insert your text.

    if you really want to do it with JavaScript, i would first hide the elements, for example

    #empty-WPQ1{ display: None}
    then Show with JavaScript when you modified the text.

    Friday, August 08, 2014 12:51 PM
  • Hi,

    Thank you for the help so far. Unfortunately, I need to customise the messages for each specific List, so I think I have to use the JavaScript approach(?).

    I have re-written the function to remove the innerText & just use innerHTML, which appears to work across browsers. I have also attempted to follow your suggestion and use the display:None concept, but I am struggling to make it work correctly with the level of knowledge that I have.

    I couldn't find a way to set the CSS element outside of the function & then change it within without setting up a clash that crashes the page, but when trying to do it all within the function the script as I have it messes badly with the rest of the page functionality (alters the edit tab & prevents selection/deletion of items).

    <script type="text/javascript">
     
    function ChangeEmptyListMessage()

        document.getElementById("empty-WPQ1").style.display="none";
        var a = document.getElementsByTagName("table"); 
        for (var i=0;i<a.length;i++) 
            {   
            if (a[i].className=="ms-list-emptyText-compact ms-textLarge")   
            {  
                if (a[i].firstChild.firstChild.firstChild.innerHTML.indexOf('There are no items to show in this view')>-1)     
                {        
                    a[i].firstChild.firstChild.firstChild.innerHTML = 'Custom Message.';
                }
            }
        }
        document.getElementById("empty-WPQ1").style.display="";
    }
      
    _spBodyOnLoadFunctionNames.push("ChangeEmptyListMessage")

    </script>

    Monday, August 11, 2014 10:32 AM
  • 1) so you have a style tag like

    <style>

    .empty-WPQ1{ display:none}

    </style>

    ? and Setting it "back" to Display="" causes altering of edit tab?

    did you try to set Display="inherit" or Display="block" instead?

    Wednesday, August 13, 2014 6:48 AM
  • Hi,

    Thanks for continuing to try and help!

    It looks like the script I posted previously was having major problems if there was no .empty-WPQ1 on the page body, and was then hiding/blocking the File & Library tabs (as well as messing with the Page tab 'Stop Editing' button when there was an .empty-WPQ1 on the page body), although I have no idea why.

    The only way I can find to stop it messing up the tabs is to use the code below which only changes the style of the .empty-WPQ1 if it exists on the page body. Unfortunately, it doesn't make much difference as the OOB message still appears before the function runs.

    Any setting of .empty-WPQ1 display outside of the function causes bad things to happen - either to the tabs or to the entire page!

    <script type="text/javascript">
     
    function ChangeEmptyLibraryAllDocumentsMessage()
    {
     var a = document.getElementById("empty-WPQ1");
     if (a)
     {
      a.style.visibility = "collapse";
      var b = a.parentNode.parentNode.getAttribute('class');
      if (b == 'ms-list-emptyText-compact ms-textLarge')   
             {  
                 if (a.innerHTML.indexOf('There are no files in the view')>-1)     
                 {        
                     a.innerHTML = 'Custom Empty Message.';
                 }
             }
         a.style.visibility = "visible";
      }
    }
      
    _spBodyOnLoadFunctionNames.push("ChangeEmptyLibraryAllDocumentsMessage")

    </script>

    Wednesday, August 13, 2014 3:03 PM