SitePicker: add HubId to filter to only sites within a hub

[russgove]

Category

[x ] Enhancement

[ ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.7 ]

Expected / Desired Behavior / Question

We should add an optional HubId to the sitePicker Control. If you want to search just for a site that is a member of the hub.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[kadu-jr]

Looks like a fair addition. I'll try to implement it and get back to you over the weekend.

[NishkalankBezawada]

Hello @russgove & @kadu-jr

We already have a property called "additionalQuery," which, if supplied, will be added as part of the AND operator in the search query. If mode is set to site or web, then it applies.

To obtain the sites that are linked to hub sites, simply enter the hubsite id in the property to the fetch the sites linked to a specific hubsite function.

Below is the sample query text

(DepartmentId:{Hub.Id} OR DepartmentId:Hub.Id) AND ContentClass:STS_Site AND SiteId<>{Hub.Id} 

So, in our case the query would be as below

(DepartmentId:{f9f37a78-a7f2-4d4d-a294-c5609559d664} OR DepartmentId:f9f37a78-a7f2-4d4d-a294-c5609559d664) AND SiteId<>{f9f37a78-a7f2-4d4d-a294-c5609559d664}

and the control code will be as below,

                <SitePicker
                  context={this.props.context}
                  label={'select sites'}
                  mode={'site'}
                  allowSearch={true}
                  multiSelect={false}
                  onChange={(sites) => { console.log(sites); }}
                  placeholder={'Select sites'}
                  searchPlaceholder={'Filter sites'} 
                  additionalQuery={'(DepartmentId:{f9f37a78-a7f2-4d4d-a294-c5609559d664} OR DepartmentId:f9f37a78-a7f2-4d4d-a294-c5609559d664) AND SiteId<>{f9f37a78-a7f2-4d4d-a294-c5609559d664}'}
                  />

Let me know if this helps.

Thanks,
Nishkalank Bezawada

[kadu-jr]

Hi @NishkalankBezawada,

Yeah, I took a brief look at the code yesterday and realized that, indeed, the developer is already able to implement that. However, I think it would be a nice addition to have this option built-in, especially given that the component already has a 'mode' property and that the developer would need an additional query to fetch the hubId to insert in the query. I'm thinking about adding a 'associatedsites' option to the mode prop which does just that.

[joelfmrodrigues]

PR from @kadu-jr has been merged and will be in the next release. Thanks everyone