Hiding the content by search web part (title) when there are no results

If you are using content by search web part (CSWP), it might sometimes happen that no results are retrieved for a particular query. When this happens, the CSWP will by default not render any mark-up, but you can also configure the web part to show a message when no results are retrieved.

Show image

Depending if this option is checked or not, you get one of the following output:

Show image

Note: The second web part is configured to show a no results message. The last web part is configured as default to not show.

This is how the web parts render when the page is not in edit mode.

Show image

Nothing special of course, but if you configure the web parts to show the web part title they render a bit differently.

Show image

As you can see, the web part titles will always be visible even if there are no results to show. In this case the last web part takes up unnecessary space on your page and this could affect your design. This can be solved by adding some additional code to your control template in order to hide the web part completely when you do not retrieve results.

Hiding the web part (title) when no results are retrieved

In your control display template you can find the following code at the end:

1
<!--#_
2
if (ctx.ClientControl.get_shouldShowNoResultMessage())
3
{
4
_#-->
5
        <div class="_#= noResultsClassName =#_">_#= $noResults =#_</div>
6
<!--#_
7
}
8
_#-->

This block will show the no result message when no results are retrieved. In order to hide the web part, this block needs to be updated to the following:

1
<!--#_
2
// Check if the web part should be hidden (when no results are retrieved)
3
if (ctx.ClientControl.get_shouldShowNoResultMessage()) {
4
    var containerClass = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_hide");
5
    AddPostRenderCallback(ctx, function() {
6
        // Check if page is in edit mode
7
        var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode;
8
        var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode;
9
        var inEdit = false;
10
        if (typeof inDesignMode !== "undefined") {
11
            inEdit = inDesignMode.value === "1" ? true : false;
12
        }
13
        if (typeof wikiInEditMode !== "undefined") {
14
            inEdit = wikiInEditMode.value === "Edit" ? true : false;
15
        }
16
        // Hide the webpart when page is not in edit mode
17
        if (!inEdit) {
18
            var container = document.getElementsByClassName(containerClass);
19
            if (container.length) {
20
                var elm = container[0];
21
                while ((elm = elm.parentElement) && !elm.classList.contains('s4-wpcell-plain'));
22
                if (typeof elm !== "undefined" && elm !== null) {
23
                    elm.style.display = "none";
24
                }
25
            }
26
        }
27
    });
28
_#-->
29
    <div class="_#= containerClass =#_"></div>
30
<!--#_
31
}
32
_#-->

Note: if the page is in edit mode, the code will not hide the web part.

Once this code is in place, the web parts render as follows:

Show image

Show image

Note: as you can see in the screenshot above, the last web part (title) is not visible on the page when no results are retrieved.

Download and configuration

The control template from this article can be downloaded from the SPCSR GitHub repository: Control template.

Once you downloaded the template, you need to place it in the master page gallery of your site collection. Your CSWP needs to be configured to use the List (hide) control template and to show a message when there are no results (this is required in order to execute the additional code).

Show image