Merge pull request #3754 from SherpasGroup/add-download-to-layouts

Add download button to layouts

docs/usage/search-results/layouts/cards.md

@@ -9,3 +9,4 @@ The 'cards' layout allows you to display items as tiles, just like the native 'H
 | **Show file icon** | Hide or display the file icon for the result card. The file icon is determined using the `FileType` [slot](../slots.md). | True.
 | **Compact mode** | Display cards as compact. | False.
 | **Preferred number of cards per row** | Specify the **preferred** number of cards to display per row **when the required width space is available**. The Web Part will always adjust the number of possible tiles to display depending the available width. It means that if you set this value to '3' but you display the Web Part in small column, only 1 tile will be displayed. | 3.
+| **Enable download** | Enable download of selected files. Requires _Allow items selection_ to be enabled and supports both single and multiple selection. If single selection is enabled the selected file will be downloaded as is. If multiple selection is enabled the selected files and folders will be downloaded in a single zip file like in SharePoint document libraries. Requires _SPWebUrl_, _ContentTypeId_, _NormListID_ and _NormUniqueID_ to be selected in _Selected properties_. | false

docs/usage/search-results/layouts/details-list.md

@@ -5,8 +5,8 @@ The 'details list' layout allows you to display items as a structured list, the
 | Setting | Description | Default value 
 | ------- |---------------- | ---------- |
 | **Manage columns** | Allows you to build you own table view by adding or removing columns dynamically. For each column, you get the following options:<br><p align="center">[!["Manage columns"](../../../assets/webparts/search-results/layouts/details_list_fields.png)](../../../assets/webparts/search-results/layouts/details_list_fields.png)</p><ul><li>**Sort order**: the order of the column in the table.</li><li>**Column name**: the column friendly name to display.</li><li>**Column value**: you can choose here either a field from the data source current results set (from the list or as free text) without any transformation or use an Handlebars expression by clicking on the checkbox next to it. In this case, all Handlebars helpers from the main template are available and you can also add you own HTML markup in the column value. For HTML fields you can use the special variable `@root.theme` to use theme colors (ex: `@root.theme.palette.themePrimary`).<br>You can specify a different field for sorting when using an Handlebars expression by specifying the field from the separate dropdown.<br>![Handlebars Expression](../../../assets/webparts/search-results/layouts/details_list_hb_expr.png)<br><br>![Handlebars Expression 2](../../../assets/webparts/search-results/layouts/details_list_hb_expr2.png)</li><li>**Minimum width in px**: the minimum width of the column in pixels.</li><li>**Maximum width in px**: the maximum width of the column in pixels.</li><li>**Sortable**: allows you to sort column values according to the **data source sort settings**. It means you must first configure the sort setting at data source level with option _'User sort'_ to `true` to see them in the details list columns configuration. Sort is perfromed one column at a time.</li><li>**Resizable**: allows you to resize the column dynamically in display mode.</li><li>**Multiline**: if the column column should be multiline. By default only ellipsis (...) will be display for larger text.</li></ul>
-| **Show file icon** | Hide or display the file icon in the first column.
-| **Compact mode** | Display the details list in compact mode.
-| **Enable grouping** | Display a grouped list, grouped by the specified column. You may also specify a list of additional columns to group by in a hierarchy of groups.
-| **Enable sticky header** | Display the details list with a sticky header that will stay in place when scrolling. Specify the desired height for the view (in pixels) and then specify the desired items per page in _Number of items per page_ under _Paging options_ and all items on the page will be scrollable within the view.
-| **Enable download** | Enable download of selected files. Requires _Allow items selection_ to be enabled and supports both single and multiple selection. If single selection is enabled the selected file will be downloaded as is. If multiple selection is enabled the selected files and folders will be downloaded in a single zip file like in SharePoint document libraries. Requires _SPWebUrl_, _ContentTypeId_, _NormListID_ and _NormUniqueID_ to be selected in _Selected properties_.
+| **Show file icon** | Hide or display the file icon in the first column. | True.
+| **Compact mode** | Display the details list in compact mode. | False.
+| **Enable grouping** | Display a grouped list, grouped by the specified column. You may also specify a list of additional columns to group by in a hierarchy of groups. | False.
+| **Enable sticky header** | Display the details list with a sticky header that will stay in place when scrolling. Specify the desired height for the view (in pixels) and then specify the desired items per page in _Number of items per page_ under _Paging options_ and all items on the page will be scrollable within the view. | False.
+| **Enable download** | Enable download of selected files. Requires _Allow items selection_ to be enabled and supports both single and multiple selection. If single selection is enabled the selected file will be downloaded as is. If multiple selection is enabled the selected files and folders will be downloaded in a single zip file like in SharePoint document libraries. Requires _SPWebUrl_, _ContentTypeId_, _NormListID_ and _NormUniqueID_ to be selected in _Selected properties_. | False.

docs/usage/search-results/layouts/simple-list.md

@@ -5,4 +5,5 @@ The 'simple list' layout display items as a simple list with larger rows, like a
 | Setting | Description | Default value 
 | ------- |---------------- | ----------
 | **Show file icon** | Hide or display the file icon for the result card. The file icon is determined using the `FileType` [slot](../slots.md). | True.
-| **Show thumbnail** | If enabled, display a thumbnail for the itme + a callout with an interactive preview of the document on click based on the value specified value for the `PreviewUrl` current data source [slot](../slots.md).</br> <p align="center">[!["Card Preview"](../../../assets/webparts/search-results/layouts/simple_list_thumbnail.png)](../../../assets/webparts/search-results/layouts/simple_list_thumbnail.png)</p> | False.
+| **Show thumbnail** | If enabled, display a thumbnail for the itme + a callout with an interactive preview of the document on click based on the value specified value for the `PreviewUrl` current data source [slot](../slots.md).</br> <p align="center">[!["Card Preview"](../../../assets/webparts/search-results/layouts/simple_list_thumbnail.png)](../../../assets/webparts/search-results/layouts/simple_list_thumbnail.png)</p> | False.
+| **Enable download** | Enable download of selected files. Requires _Allow items selection_ to be enabled and supports both single and multiple selection. If single selection is enabled the selected file will be downloaded as is. If multiple selection is enabled the selected files and folders will be downloaded in a single zip file like in SharePoint document libraries. Requires _SPWebUrl_, _ContentTypeId_, _NormListID_ and _NormUniqueID_ to be selected in _Selected properties_. | False.

docs/usage/search-results/layouts/slider.md

@@ -11,4 +11,5 @@ The 'slider' layout allows you to display data as as dynamic slider (i.e carouss
 | **Show page dots** | Enable or disable slider navigation. You can adjust the dots position by updating the `.flickity-page-dots` CSS class. | True.
 | **Infinite scrolling** | Enable or disable infinite scrolling on the carousel. | False.
 | **Slide height (in px)** | Dynamically set the slides height to adjust your results. | 360px.
-| **Slide width (in px)** | Dynamically set the slides width to adjust your results. | 318px.
+| **Slide width (in px)** | Dynamically set the slides width to adjust your results. | 318px.
+| **Enable download** | Enable download of selected files. Requires _Allow items selection_ to be enabled and supports both single and multiple selection. If single selection is enabled the selected file will be downloaded as is. If multiple selection is enabled the selected files and folders will be downloaded in a single zip file like in SharePoint document libraries. Requires _SPWebUrl_, _ContentTypeId_, _NormListID_ and _NormUniqueID_ to be selected in _Selected properties_. | False.

search-parts/src/controls/TemplateRenderer/TemplateRenderer.scss

@@ -111,6 +111,7 @@
         &--toolbar {
             display: flex;
             justify-content: space-between;
+            align-items: center;
         }
         &--cardContainer {
             display: flex;

search-parts/src/layouts/results/cards/CardsLayout.ts

@@ -37,6 +37,11 @@ export interface ICardsLayoutProperties {
      * The card size in %
      */
     columnSizePercentage: number;
+
+    /**
+     * If the download button should be visible
+     */
+    enableDownload: boolean;
 }
 
 export class CardsLayout extends BaseLayout<ICardsLayoutProperties> {
@@ -188,7 +193,12 @@ export class CardsLayout extends BaseLayout<ICardsLayoutProperties> {
                 step: 1,
                 showValue: true,
                 value: this.properties.preferedCardNumberPerRow,                
-            })              
+            }),
+            PropertyPaneToggle('layoutProperties.enableDownload', {
+                label: strings.Layouts.DetailsList.EnableDownload,
+                checked: this.properties.enableDownload
+            })
+
         ];
     }
 

search-parts/src/layouts/results/cards/cards.html

@@ -24,19 +24,30 @@
         {{/if}}
 
         <div class="template--header">
-            {{#if @root.properties.showResultsCount}}
-                <div class="template--resultCount">
-                    <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
-                </div>
-            {{/if}}
-
-            <div class="template--sort">
-                <pnp-sortfield 
-                    data-fields="{{JSONstringify @root.properties.dataSourceProperties.sortList}}" 
-                    data-default-selected-field="{{sort.selectedSortFieldName}}" 
-                    data-default-direction="{{sort.selectedSortDirection}}"
-                    data-theme-variant="{{JSONstringify @root.theme}}">
-                </pnp-sortfield>    
+            <div class="template--resultCount">
+              {{#if @root.properties.showResultsCount}}
+                <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
+              {{/if}}
+            </div>
+
+            <div class="template--toolbar">
+              {{#and properties.layoutProperties.enableDownload @root.properties.itemSelectionProps.allowItemSelection}}
+                <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>
+              {{/and}}
+
+              <div class="template--sort">
+                  <pnp-sortfield 
+                      data-fields="{{JSONstringify @root.properties.dataSourceProperties.sortList}}" 
+                      data-default-selected-field="{{sort.selectedSortFieldName}}" 
+                      data-default-direction="{{sort.selectedSortDirection}}"
+                      data-theme-variant="{{JSONstringify @root.theme}}">
+                  </pnp-sortfield>    
+              </div>
             </div>
         </div>
 

search-parts/src/layouts/results/simpleList/SimpleListLayout.ts

@@ -13,6 +13,11 @@ export interface ISimpleListLayoutProperties {
      * Show or hide the item thumbnail
      */
     showItemThumbnail: boolean;
+
+    /**
+     * If the download button should be visible
+     */
+    enableDownload: boolean;
 }
 
 export class SimpleListLayout extends BaseLayout<ISimpleListLayoutProperties> {
@@ -31,6 +36,10 @@ export class SimpleListLayout extends BaseLayout<ISimpleListLayoutProperties> {
             }),
             PropertyPaneToggle('layoutProperties.showItemThumbnail', {
                 label: strings.Layouts.SimpleList.ShowItemThumbnailLabel
+            }),
+            PropertyPaneToggle('layoutProperties.enableDownload', {
+              label: strings.Layouts.DetailsList.EnableDownload,
+              checked: this.properties.enableDownload
             })
         ];
     }

search-parts/src/layouts/results/simpleList/simple-list.html

@@ -36,19 +36,30 @@
         </pnp-selectedfilters>
         {{/if}}
         <div class="template--header">
-            {{#if @root.properties.showResultsCount}}
-                <div class="template--resultCount">
-                    <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
-                </div>
-            {{/if}}
+            <div class="template--resultCount">
+              {{#if @root.properties.showResultsCount}}
+                <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
+              {{/if}}
+            </div>
+
+            <div class="template--toolbar">
+              {{#and properties.layoutProperties.enableDownload @root.properties.itemSelectionProps.allowItemSelection}}
+                <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>
+              {{/and}}
 
-            <div class="template--sort">
-                <pnp-sortfield 
-                    data-fields="{{JSONstringify @root.properties.dataSourceProperties.sortList}}" 
-                    data-default-selected-field="{{sort.selectedSortFieldName}}" 
-                    data-default-direction="{{sort.selectedSortDirection}}"
-                    data-theme-variant="{{JSONstringify @root.theme}}">
-                </pnp-sortfield>    
+              <div class="template--sort">
+                  <pnp-sortfield 
+                      data-fields="{{JSONstringify @root.properties.dataSourceProperties.sortList}}" 
+                      data-default-selected-field="{{sort.selectedSortFieldName}}" 
+                      data-default-direction="{{sort.selectedSortDirection}}"
+                      data-theme-variant="{{JSONstringify @root.theme}}">
+                  </pnp-sortfield>    
+              </div>
             </div>
         </div>
         {{#if @root.data.promotedResults}}

search-parts/src/layouts/results/slider/SliderLayout.ts

@@ -19,6 +19,11 @@ export interface ISliderLayoutProperties {
      * The slide width in px
      */
     slideWidth: number;
+
+    /**
+     * If the download button should be visible
+     */
+    enableDownload: boolean;
 }
 
 export class SliderLayout extends BaseLayout<ISliderLayoutProperties> {
@@ -96,8 +101,12 @@ export class SliderLayout extends BaseLayout<ISliderLayoutProperties> {
                 min: 120,
                 step: 1,
                 showValue: true
+            }),
+            PropertyPaneToggle('layoutProperties.enableDownload', {
+              label: strings.Layouts.DetailsList.EnableDownload,
+              checked: this.properties.enableDownload
             })
-        ]);
+      ]);
 
         return groupFields;
     }

search-parts/src/layouts/results/slider/slider.html

@@ -20,19 +20,30 @@
         {{/if}}
 
         <div class="template--header">
-            {{#if @root.properties.showResultsCount}}
-                <div class="template--resultCount">
-                    <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
-                </div>
-            {{/if}}
+            <div class="template--resultCount">
+              {{#if @root.properties.showResultsCount}}
+                <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
+              {{/if}}
+            </div>
+
+            <div class="template--toolbar">
+              {{#and properties.layoutProperties.enableDownload @root.properties.itemSelectionProps.allowItemSelection}}
+                <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>
+              {{/and}}
 
-            <div class="template--sort">
-                <pnp-sortfield 
-                    data-fields="{{JSONstringify @root.properties.dataSourceProperties.sortList}}" 
-                    data-default-selected-field="{{sort.selectedSortFieldName}}" 
-                    data-default-direction="{{sort.selectedSortDirection}}"
-                    data-theme-variant="{{JSONstringify @root.theme}}">
-                </pnp-sortfield>    
+              <div class="template--sort">
+                  <pnp-sortfield 
+                      data-fields="{{JSONstringify @root.properties.dataSourceProperties.sortList}}" 
+                      data-default-selected-field="{{sort.selectedSortFieldName}}" 
+                      data-default-direction="{{sort.selectedSortDirection}}"
+                      data-theme-variant="{{JSONstringify @root.theme}}">
+                  </pnp-sortfield>    
+              </div>
             </div>
         </div>