How to use initialQuery in ResourcePicker properly?

Rubix-House
Shopify Partner
2 0 0
Hi All, does anyone ever use initialQuery in "ResourcePicker"? I've tried but it did not work, please see my code below. So, basically, I want to show only products with a specific vendor.
 
I've tried this one
<ResourcePicker
  resourceType='Product'
  selectMultiple={true}
  open={resourcePickerProductActiveState}
  onSelection={handleResourcePickerProductSelection}
  onCancel={handleResourcePickerProductClose}
  initialQuery="query=vendor:Boeing"
 />
 and this one
<ResourcePicker
  resourceType='Product'
  selectMultiple={true}
  open={resourcePickerProductActiveState}
  onSelection={handleResourcePickerProductSelection}
  onCancel={handleResourcePickerProductClose}
  initialQuery="vendor:Boeing"
 />

 

and both of them didn't work.

 

If anyone knows about this issue, please kindly reply to this thread. Thank you in advance!

 

Regards,
Aldo

Replies 2 (2)

JoeyF
Shopify Staff (Retired)
35 7 12

Hi Aldo, the second example (the one with initialQuery="vendor:Boeing") should work.

I just created a new app and this is the syntax that worked for me.

 

To help us find the problem, can you please let me know:

 

  • When you say that things did not work, what exactly was the behaviour?
  • Which version of app-bridge and app-bridge-react are you using?
  • If remove the initialQuery property and instead type vendor:Boeing in your app's UI (in the search box at the top of the Resource Picker), are the products being filtered as expected?

To learn more visit the Shopify Help Center or the Community Blog.

Rubix-House
Shopify Partner
2 0 0

Hi Joey,

 

Thanks for the reply. 

 

Here the information that maybe benefit for the investigation

  • When you say that things did not work, what exactly was the behaviour?

-> answer: it should be prepopulate the search bar in resource picker, but it did not. So the search bar still blank even I added "initialQuery" in "ResourcePicker"

 

  • Which version of app-bridge and app-bridge-react are you using?

-> the version is 3.1.1

 

  • If remove the initialQuery property and instead type vendor:Boeing in your app's UI (in the search box at the top of the Resource Picker), are the products being filtered as expected?

-> Yes, the products being filtered as expected if I directly add the query in the search bar

rubixhouse_0-1662433129121.png