Hiding Empty Web Parts in SharePoint Online with jQuery
When building Pages in SharePoint, we often include Web Parts that are configured to use views that may, at times, not contain any information. The 'Announcements' list Web Part using a view that filters out 'expired' items is a perfect example of this. While useful in ensuring that only current / pertinent information is displayed, it can lead to the somewhat unsightly display of empty Web Parts if the information is not routinely updated.
The most efficient method we have found of conditionally hiding these Web Parts is to use jQuery to identify the empty Web Parts and then hide them. The script that we use and a detailed explanation of how to install it and how it works is provided below:
How to Install
To hide these Web Parts when they are empty we use a 'Script Editor Web Part' with the jQuery Script from above. To add a script editor Web Part, first choose the Edit option from the Page menu.
Once in the Edit interface, add the script editor Web Part to an available area on the page by following the procedure below:
NOTE: The script Editor Web Part will only be visible in the edit interface, it is not displayed once the page has been saved and the edit interface closed.
- Click the area in which you wish to insert the Web Part.
- Select the 'Insert' Tab and then Select the 'Web Part' option.
- Select the 'Media and Content' category.
- Select the 'Script Editor' option.
- Select 'Add' and the script Editor webpart will be added to the page.
- Select to edit the Web Part.
- Select the "Edit Snippet" option in the Web Part.
- Paste the script into the body of the snippet, select 'Insert' in the script editor dialog and 'OK' in the Web Part editor panel to include the script and refresh the page.
- Once refreshed, the empty Web Part is now hidden.
How it Works
When SharePoint displays and empty view on a page, it displays the following static text inside a 'TD' HTML Element: 'There are no items to show in this view of the [list name]'. SharePoint assigns a specific HTML Class to the top level container Web Parts called 'ms-rte-wpbox'. To verify this, (assuming you are using the Google Chrome browser) right click on the static text within the empty Web Part and select the 'Inspect' option.
NOTE: Other browsers offer the same / similar functionality but are accessed differently.
This will display the HTML content of the page for the selected section. The light highlighted line (1) shows the Web Part element; the dark highlighted line (2) shows the 'TD' element that contains the 'There are no items to show' text.
Below is an expanded and numbered diagram of the script which includes detailed explanations of what each major component does.
1. jQuery Library Reference:
Support for jQuery is not natively built into SharePoint. To execute jQuery script, you must include a reference to a jQuery library. This can either be done by adding a reference to a Site's Master Page (which will then cascade down to all pages within the site that reference that master page) or a reference can be added directly to the page you are working on. You can either download the library files and store them in the Site Assets Library (or other location in your SharePoint environment) and reference the files there or (as is the case in the example below) you can reference the publicly available library.
2. Function Declaration
In this example we declare a function which we will call after the page has fully loaded. This is described later in the process.
3. jQuery (.Class) Selector (https://api.jquery.com/class-selector/)
We use the jQuery 'class' selector to retrieve all elements containing a specific class. In this case we look for the 'ms-rte-wpbox' class that we know is associated with the top level Web Part container.
4. jQuery :has() Selector (https://api.jquery.com/has-selector/)
We use the jQuery 'has' selector to refine the set of elements returned from the 'Class' selector to identify descendants of the element that meet a specific criteria (which is defined in the next step).
5.jQuery :contains() Selector (https://api.jquery.com/contains-selector/)
We use the jQuery 'contains' selector as the criteria for the preceding 'has' selector to search for a 'TD' element that contains a specific string of text - the "There are no items to show" text.
6. jQuery .hide() Method (https://api.jquery.com/hide/)
Once the desired element has been identified (the empty webpart) we use the jQuery 'hide' method to hide it.
7. SharePoint post Body load function execution array
We need to make sure that the content of the page is loaded and the empty webparts are added before we can try to find and hide them. SharePoint provides the '_spBodyOnLoadFunctionNames' function which runs any functions contained within it after the page is loaded. A more detailed description of the function is available here:
There are several different approaches that can be employed to hide / manipulate web parts in SharePoint - this is simply the method we have found to be the simplest and most flexible.
This example also only illustrates one action you can take on a specific item once you have found it. This same general approach could be used to dynamically manipulate page elements in other ways (like set the background of a web part or an element contained within it to RED if the text contains the word 'warning').
More information about working with jQuery can be found form the following online resources: