How to use the PnP Modern Search download feature

In version 4.12 of PnP Modern Search a new feature for downloading files and folders is introduced. By default it is available for the details list layout and can be used with both single and multi select. You can also add this feature to your own custom layouts.

Enabling the download feature for the details layout

1. Add the search results webpart to the page and configure it to return the files and folders you would like to make available for your users to download.
2. Make sure that ContentTypeId, NormListID, NormUniqueID and SPWebUrl are selected under Selected properties on page 1 of the webpart properties.
3. Select Details List as the layout on page 2.
4. Enable Allow items selection. If you would like to enable download of multiple files and folders also enable Allow multiple selection.
5. Enable Enable download under Layout options.
6. Publish the page and you are done.

You should now see the disabled download button above the details list. When you select one or more files or folders the button will be enabled and when you click it the selected one(s) will be downloaded.

When a single file is selected the file will be downloaded as is and when a folder or multiple files/folders are selected they will be downloaded as a zip file. This works just as the download button in regular SharePoint document libraries. In fact under the hood the same method is used so the result should also be the same.

The files and folders selected does not have to be in the same site but within the same tenant (hostname) for the download to work.

Adding the download button to your custom layout

To demonstrate this we will use the Microsoft Search Documents layout and add the download button above the list view.

1. Add the search results webpart to the page and configure it to return the files and folders you would like to make available for your users to download.
2. Make sure that ContentTypeId, NormListID, NormUniqueID and SPWebUrl are selected under Selected properties on page 1 of the webpart properties.
3. Select List as the layout on page 2.
4. Enable Allow items selection. If you would like to enable download of multiple files and folders also enable Allow multiple selection.
5. Under Edit results template click {} to open the template editor.
6. In the template editor replace all content with the content for the Microsoft Search Documents layout.
7. In the template editor replace the following block

{{#if @root.properties.showResultsCount}}
    <div class="template--resultCount">
        <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
    </div>
{{/if}}

with this one

<div class="template--toolbar">
  <div class="template--resultCount">
    {{#if @root.properties.showResultsCount}}
      <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
    {{/if}}
  </div>
  <div>
    <pnp-download-selected-items-button 
      data-items="{{JSONstringify data.items}}" 
      data-context="{{JSONstringify (truncateContext @root)}}"
      data-theme-variant="{{JSONstringify @root.theme}}"
    >
    </pnp-download-selected-items-button>
  </div>
</div>

8. Publish the page and you are done.

You should now see the disabled download button above the list view. When you select one or more files or folders the button will be enabled and when you click it the selected one(s) will be downloaded.

The above example includes a bit of html and styling to make the button appear where we want it but all that is really needed is a layout with selection enabled and this web component:

<pnp-download-selected-items-button 
  data-items="{{JSONstringify data.items}}" 
  data-context="{{JSONstringify (truncateContext @root)}}"
  data-theme-variant="{{JSONstringify @root.theme}}"
>
</pnp-download-selected-items-button>