Added 'associatedsites' and 'hubsiteId' parameters to SitePicker to have option to show only sites associated with the hub.

Author: kadu-jr

src/common/Interfaces.ts

@@ -2,6 +2,7 @@ import { SPHttpClient } from '@microsoft/sp-http';
 import { PageContext, SPField } from '@microsoft/sp-page-context';
 import { ListViewAccessor } from "@microsoft/sp-listview-extensibility";
 import { ISPField } from './SPEntities';
+import { INavNodeInfo } from '@pnp/sp/navigation/types';
 
 /**
  * Customizer context interface.
@@ -27,3 +28,23 @@ export interface IFields {
 export interface IProps {
     context: IContext;
 }
+
+export interface IHubSiteData {
+    headerEmphasis: string;
+    hideNameInNavigation: boolean;
+    isNavAudienceTargeted: boolean;
+    isSameTenantInstance: boolean;
+    logoFileHash: number;
+    logoUrl: string;
+    megaMenuEnabled: boolean;
+    name: string;
+    navigation: INavNodeInfo[];
+    parentHubSiteId: string;
+    relatedHubSiteIds: string[];
+    requiresJoinApproval: boolean;
+    siteDesignId: string;
+    tenantInstanceId: string;
+    themeKey: string;
+    url: string;
+    usesMetadataNavigation: boolean;
+}

src/controls/sitePicker/ISitePicker.ts

@@ -27,9 +27,9 @@ export interface ISitePickerProps {
    */
   multiSelect?: boolean;
   /**
-   * Defines what entities are available for selection: site collections, sites, hub sites.
+   * Defines what entities are available for selection: site collections, sites, hub sites, sites inside hub.
    */
-  mode?: 'site' | 'web' | 'hub';
+  mode?: 'site' | 'web' | 'hub' | 'associatedsites';
 
   /**
    * Specifies if the options should be limited by the current site collections. Taken into consideration if selectionMode is set to 'web'
@@ -88,4 +88,11 @@ export interface ISitePickerProps {
    * Applicable if mode is set to site or web.
    */
   additionalQuery?: string;
+
+  /**
+   * If provided will be used in the search for all sites in a hub.
+   * Applicable if mode is set to associatedsites.
+   * If mode is set to associatedsites and no hubsiteId is provided, the current site's hub ID will be used.
+   */
+  hubsiteId?: string;
 }

src/controls/sitePicker/SitePicker.tsx

@@ -10,7 +10,7 @@ import * as React from 'react';
 
 import * as telemetry from '../../common/telemetry';
 import { toRelativeUrl } from '../../common/utilities/GeneralHelper';
-import { getAllSites, getHubSites, ISite } from '../../services/SPSitesService';
+import { getAllSites, getHubSites, ISite, getAssociatedSites } from '../../services/SPSitesService';
 import { ISitePickerProps } from './ISitePicker';
 
 const styles = mergeStyleSets({
@@ -73,7 +73,8 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
     className,
     selectedSites,
     trimDuplicates,
-    additionalQuery
+    additionalQuery, 
+    hubsiteId
   } = props;
 
   const [isLoading, setIsLoading] = React.useState<boolean>();
@@ -233,11 +234,18 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
     setFilteredSites([]);
 
     let promise: Promise<ISite[]>;
-    if (mode === 'hub') {
-      promise = getHubSites(context);
-    }
-    else {
-      promise = getAllSites(context, mode !== 'site', limitToCurrentSiteCollection, trimDuplicates === true, additionalQuery);
+    switch (mode) {
+      case 'hub':
+        promise = getHubSites(context);
+        break;
+        
+      case 'associatedsites':
+        promise = getAssociatedSites(context, trimDuplicates === true, hubsiteId);
+        break;
+    
+      default:
+        promise = getAllSites(context, mode !== 'site', limitToCurrentSiteCollection, trimDuplicates === true, additionalQuery);
+        break;
     }
 
     promise.then(newSites => {

src/services/SPSitesService.ts

@@ -1,5 +1,6 @@
 import { BaseComponentContext } from '@microsoft/sp-component-base';
 import { SPHttpClient } from '@microsoft/sp-http';
+import { IHubSiteData } from '../common/Interfaces';
 
 export interface ISite {
   /**
@@ -161,3 +162,25 @@ export const getSiteWebInfo = async (ctx: BaseComponentContext, webUrl: string):
     siteId: siteInfoResult.Id
   };
 }
+
+export const getAssociatedSites = async (ctx: BaseComponentContext, trimDuplicates: boolean, hubSiteId?: string): Promise<ISite[]> => {
+  if (!hubSiteId){
+  
+    const requestUrl = `${ctx.pageContext.site.absoluteUrl}/_api/web/HubsiteData`;
+    const response = await ctx.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1);
+    const json = await response.json();
+  
+    const hubsiteData: IHubSiteData = JSON.parse(json.value);
+  
+    if (hubsiteData === null)
+      return [];
+  
+    hubSiteId = hubsiteData.relatedHubSiteIds[0];
+
+  }
+
+  const queryText = `(contentclass:STS_Site DepartmentId:${hubSiteId})`;
+
+
+  return getAllSitesInternal(ctx, queryText, trimDuplicates);
+};