Merge pull request #3710 from microsoft-search/fix/3679

Fix for #3679
microsoft-search · Apr 23, 2024 · 5021bca · 5021bca
2 parents 64f6c1e + ff28ee8
commit 5021bca
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 48 deletions.
diff --git a/docs/usage/search-results/index.md b/docs/usage/search-results/index.md
@@ -5,7 +5,9 @@ The _'Search Results' Web Part_ is the fundamental building block of whole globa
 This Web Part can be used **alone** or **connected to other Web Parts** to add dyanmic interactions (filters, search box or verticals). To use the Web Part on a SharePoint page:
 
 1. Edit your SharePoint modern page.
-2. Search for the _'PnP - Search Results'_ Web Part and add it to your page:
+2. Search for the _'PnP - Search Results'_ Web Part and add it to your page.<br><br>
+    _You may use "PnP - Search Rollup" instead if you don't need to connect web parts. This version support being lazy loaded in the SharePoint framework to optimize page loading._
+
 
 !["PnP Search Results"](../../assets/webparts/search-results/search_results_wp_picker.png){: .center}
 

diff --git a/search-parts/src/webparts/searchResults/ISearchResultsWebPartProps.ts b/search-parts/src/webparts/searchResults/ISearchResultsWebPartProps.ts
@@ -122,6 +122,11 @@ export default interface ISearchResultsWebPartProps extends IBaseWebPartProps {
      */
     verticalsDataSourceReference: string;
 
+    /**
+     * Disable dynamic data to allow SPFx lazy load
+     */
+    allowWebPartConnections: boolean;
+
     /**
      * The selected vertical fro the Web Part
      */

diff --git a/search-parts/src/webparts/searchResults/SearchResultsWebPart.manifest.json b/search-parts/src/webparts/searchResults/SearchResultsWebPart.manifest.json
@@ -8,27 +8,68 @@
     "requiresCustomScript": false,
     "supportsFullBleed": true,
     "supportedHosts": [
-        "SharePointWebPart", "TeamsTab", "SharePointFullPage","TeamsPersonalApp"
+        "SharePointWebPart",
+        "TeamsTab",
+        "SharePointFullPage",
+        "TeamsPersonalApp"
     ],
     "supportsThemeVariants": true,
-    "preconfiguredEntries": [{
-        "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
-        "group": {
-            "default": "Other"
+    "preconfiguredEntries": [
+        {
+            "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+            "group": {
+                "default": "Other"
+            },
+            "title": {
+                "default": "PnP - Search Results",
+                "fr-fr": "PnP - Résultats de recherche",
+                "pl-pl": "PnP - Wyniki wyszukiwania",
+                "da-dk": "PnP - Søgeresultater",
+                "de-de": "PnP - Suchergebnisse",
+                "es-es": "PnP - Resultados de la búsqueda",
+                "fi-fi": "PnP - Hakutulokset",
+                "nb-no": "PnP - Søkeresultater",
+                "nl-nl": "PnP - Zoekresultaten",
+                "pt-br": "PnP - Procurar Resultados",
+                "sv-se": "PnP - Sökresultat"
+            },
+            "description": {
+                "default": "Displays JSON based data using customizable templates",
+                "fr-fr": "Affiche des données de multiples source de données au format JSON selon des modèles d'affichage personnalisables.",
+                "pl-pl": "Wyświetla dane typu JSON używając konfigurowalnych szablonów"
+            },
+            "officeFabricIconFontName": "SearchAndApps",
+            "properties": {
+                "documentationLink": "https://microsoft-search.github.io/pnp-modern-search/",
+                "allowWebPartConnections": true
+            }
         },
-        "title": {
-            "default": "PnP - Search Results",
-            "fr-fr": "PnP - Résultats de recherche",
-            "pl-pl": "PnP - Wyniki wyszukiwania"
-        },
-        "description": {
-            "default": "Displays JSON based data using customizable templates",
-            "fr-fr": "Affiche des données de multiples source de données au format JSON selon des modèles d'affichage personnalisables.",
-            "pl-pl": "Wyświetla dane typu JSON używając konfigurowalnych szablonów"
-        },
-        "officeFabricIconFontName": "SearchAndApps",
-        "properties": {
-            "documentationLink": "https://microsoft-search.github.io/pnp-modern-search/"
+        {
+            "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+            "group": {
+                "default": "Other"
+            },
+            "title": {
+                "default": "PnP - Search Rollup",
+                "fr-fr": "PnP - Compilation de recherche",
+                "pl-pl": "PnP - Kompilacja wyszukiwania",
+                "da-dk": "PnP - Søgesamling",
+                "de-de": "PnP - Suchzusammenstellung",
+                "es-es": "PnP - Compilación de búsqueda",
+                "fi-fi": "PnP - Hakukokoelma",
+                "nb-no": "PnP - Søkesamling",
+                "nl-nl": "PnP - Zoekcompilatie",
+                "pt-br": "PnP - Compilação de pesquisa",
+                "sv-se": "PnP - Söksammanställning"
+            },
+            "description": {
+                "default": "To be used for content roll-up and allow lazy loading"
+            },
+            "officeFabricIconFontName": "SearchAndApps",
+            "properties": {
+                "documentationLink": "https://microsoft-search.github.io/pnp-modern-search/",
+                "allowWebPartConnections": false
+            }
         }
-    }]
+    ]
 }
diff --git a/search-parts/src/webparts/searchResults/SearchResultsWebPart.ts b/search-parts/src/webparts/searchResults/SearchResultsWebPart.ts
@@ -468,20 +468,20 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
 
         ReactDom.render(renderRootElement, this.domElement);
 
-        if(this.properties.showBlankIfNoResult){
+        if (this.properties.showBlankIfNoResult) {
             let element = this.domElement.parentElement;
-                // check up to 3 levels up for padding and exit once found
-                for (let i = 0; i < 3; i++) {
-                    const style = window.getComputedStyle(element);
-                    const hasPadding = style.paddingTop !== "0px";
-                    if (hasPadding) {
-                        element.style.paddingTop = "0px";
-                        element.style.paddingBottom = "0px";
-                        element.style.marginTop = "0px";
-                        element.style.marginBottom = "0px";
-                    }
-                    element = element.parentElement;
+            // check up to 3 levels up for padding and exit once found
+            for (let i = 0; i < 3; i++) {
+                const style = window.getComputedStyle(element);
+                const hasPadding = style.paddingTop !== "0px";
+                if (hasPadding) {
+                    element.style.paddingTop = "0px";
+                    element.style.paddingBottom = "0px";
+                    element.style.marginTop = "0px";
+                    element.style.marginBottom = "0px";
                 }
+                element = element.parentElement;
+            }
         }
 
         // This call set this.renderedOnce to 'true' so we need to execute it at the very end
@@ -531,7 +531,9 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
         }
 
         // Initializes this component as a discoverable dynamic data source
-        this.context.dynamicDataSourceManager.initializeSource(this);
+        if (this.properties.allowWebPartConnections) {
+            this.context.dynamicDataSourceManager.initializeSource(this);
+        }
 
         if (this.displayMode === DisplayMode.Edit) {
             const { Placeholder } = await import(
@@ -691,7 +693,9 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
             if (!this.properties.useFilters) {
                 this.properties.filtersDataSourceReference = undefined;
                 this._filtersConnectionSourceData = undefined;
-                this.context.dynamicDataSourceManager.notifyPropertyChanged(ComponentType.SearchResults);
+                if (this.properties.allowWebPartConnections) {
+                    this.context.dynamicDataSourceManager.notifyPropertyChanged(ComponentType.SearchResults);
+                }
             }
         }
 
@@ -736,8 +740,10 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
             this._currentDataResultsSourceData.availablefilters = [];
             this._currentDataResultsSourceData.availableFieldsFromResults = [];
 
-            // Notfify dynamic data consumers data have changed
-            this.context.dynamicDataSourceManager.notifyPropertyChanged(ComponentType.SearchResults);
+            // Notify dynamic data consumers data have changed
+            if (this.properties.allowWebPartConnections) {
+                this.context.dynamicDataSourceManager.notifyPropertyChanged(ComponentType.SearchResults);
+            }
 
             this.properties.dataSourceProperties = {};
             this.properties.templateSlots = null;
@@ -1170,6 +1176,7 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
         }
 
         this.properties.useVerticals = this.properties.useVerticals !== undefined ? this.properties.useVerticals : false;
+        this.properties.allowWebPartConnections = this.properties.allowWebPartConnections !== undefined ? this.properties.allowWebPartConnections : true;
 
         if (!this.properties.paging) {
 
@@ -1960,22 +1967,28 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
     }
 
     private async getConnectionOptionsGroup(): Promise<IPropertyPaneGroup[]> {
-
         const filterConnectionFields = await this.getFiltersConnectionFields();
         const verticalConnectionFields = await this.getVerticalsConnectionFields();
         const dataResultsConnectionsFields = await this.getDataResultsConnectionFields();
 
+        let dynamicDataToggles = [];
+        if (this.properties.allowWebPartConnections) {
+            dynamicDataToggles = [
+                ...this.getSearchQueryTextFields(),
+                PropertyPaneHorizontalRule(),
+                ...filterConnectionFields,
+                PropertyPaneHorizontalRule(),
+                ...verticalConnectionFields,
+                PropertyPaneHorizontalRule(),
+                ...dataResultsConnectionsFields
+            ]
+        }
+
         let availableConnectionsGroup: IPropertyPaneGroup[] = [
             {
                 groupName: webPartStrings.PropertyPane.ConnectionsPage.ConnectionsPageGroupName,
                 groupFields: [
-                    ...this.getSearchQueryTextFields(),
-                    PropertyPaneHorizontalRule(),
-                    ...filterConnectionFields,
-                    PropertyPaneHorizontalRule(),
-                    ...verticalConnectionFields,
-                    PropertyPaneHorizontalRule(),
-                    ...dataResultsConnectionsFields
+                    ...dynamicDataToggles
                 ]
             }
         ];
@@ -2206,7 +2219,7 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
             // Input query text
             const inputQueryText = await this._getInputQueryTextValue();
             this.tokenService.setTokenValue(BuiltinTokenNames.inputQueryText, inputQueryText);
-            this.tokenService.setTokenValue(BuiltinTokenNames.originalInputQueryText, inputQueryText);   
+            this.tokenService.setTokenValue(BuiltinTokenNames.originalInputQueryText, inputQueryText);
 
             // Selected filters
             if (this._filtersConnectionSourceData) {
@@ -2216,7 +2229,7 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
                 if (filtersSourceData) {
 
                     // Set the token as 'null' if no filter is selected meaning the token is available but with no data (different from 'undefined')
-                    // It is the caller responsability to check if the value is empty before using it in an expression (ex: `if(empty('{filters}'),'doA','doB)`)
+                    // It is the caller responsibility to check if the value is empty before using it in an expression (ex: `if(empty('{filters}'),'doA','doB)`)
                     let filterTokens: IDataFilterToken = null;
 
                     const allValues = flatten(filtersSourceData.selectedFilters.map(f => f.values));
@@ -2320,6 +2333,7 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
      */
     private ensureDynamicDataSourcesConnection() {
 
+        if (!this.properties.allowWebPartConnections) return;
         // Filters Web Part data source
         if (this.properties.filtersDataSourceReference) {
 
@@ -2548,7 +2562,7 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
         }
 
         // Notfify dynamic data consumers data have changed
-        if (this.context && this.context.dynamicDataSourceManager && !this.context.dynamicDataSourceManager.isDisposed) {
+        if (this.properties.allowWebPartConnections && this.context && this.context.dynamicDataSourceManager && !this.context.dynamicDataSourceManager.isDisposed) {
             this.context.dynamicDataSourceManager.notifyPropertyChanged(ComponentType.SearchResults);
         }
 
@@ -2567,7 +2581,9 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
         this._currentDataResultsSourceData.selectedItems = cloneDeep(currentSelectedItems);
 
         // Notfify dynamic data consumers data have changed
-        this.context.dynamicDataSourceManager.notifyPropertyChanged(DynamicDataProperties.AvailableFieldValuesFromResults);
+        if (this.properties.allowWebPartConnections) {
+            this.context.dynamicDataSourceManager.notifyPropertyChanged(DynamicDataProperties.AvailableFieldValuesFromResults);
+        }
     }
 
     /**