ResourcePicker Options (initialQuery)

Solved
Excursionist
30 0 4

Hi All,

 

I'm switching over to AppBridge (finally) with my current app update and I'm running into an issue. I'm trying to display a collection resource picker for Custom and Smart collections. I'd like to display the different collection types independently so I currently have the following for the Custom collection.

 

Custom Collection Picker using GraphQL Initial Query:

var ResourcePicker = actions.ResourcePicker;

const customPicker = ResourcePicker.create(app, {
    resourceType: ResourcePicker.ResourceType.Collection,
    initialQuery: "collection_type:custom"
});

 

The problem is that when the picker loads, it's loading both Custom and Smart collections so it seems the query isn't taking effect. Can anyone see what I'm doing wrong here?

 

Thanks!

 

[EDIT] I just realized as well that the autocomplete search in the resource picker does't seem to be finding some of the collections. I know I have a Custom collection called "Unit Test 3" but when I enter that into the autocomplete search in the picker, it says No Results. Any ideas? Lastly, there doesn't seem to be any paging controls in the picker as shown in the example image. It actually looks like the old picker even though I'm using AppBridge. Strange...

0 Likes

Success.

Shopify Staff
Shopify Staff
1552 77 232

Hey @Kris_Doyle.

 

Something I'm noticing as a difference between my code and yours is that I'm putting my initial query in an options object:

 

    const collectionPicker = ResourcePicker.create(app,{
      resourceType: ResourcePicker.ResourceType.Collection,
      options: {
        open: true,
        initialQuery: 'collection_type:smart'
      }
    });

That works for me.

 

It looks like that screen shot is out of date. I was able to confirm with the App Bridge team that the resource picker currently utilizes infinite scrolling rather than pagination.

 

Cheers.

1 Like
Excursionist
30 0 4

Hi @Alex,

 

Thanks VERY much for your help with this! This was indeed the issue. All is right with the world now, thanks :)

 

Kris

0 Likes
Excursionist
30 0 4

Hey @Alex ,

 

I just realized something...although the initial query is working to show only Custom or Smart collections, if I hit Cancel and then open the ResourcePicker again with the same initial query, it shows the query text in the search box which allows the user to then clear it which negates the initial query. Is that by design?

 

Hopefully this makes sense but it looks like this below...the red arrow is the first time I show the picker and the query text is not showing as expected. Then I click cancel. The green arrow is the second time I show the picker (second click on Search). On the second click, the InitialQuery text is shown in the search box. Just not sure if that's by design or not. The problem is of course that when the user starts to search, the first thing they'll do is clear the text and start searching...but then the scope will be wrong. Does that make sense? Do I need to destroy the picker somehow on Cancel?

 

image.png

 

 

1 Like
Highlighted
Shopify Partner
72 0 13

Hi,

 

Running into the same problem here, the initial query is hidden when a resource picker is displayed the first time.

On subsequent open actions, the initial query is visible.

How can we avoid this?

 

Here's an (incomplete) code snippet that shows how we create a picker in plain Javascript:

 

let picker = ResourcePicker.create(app, {
                    resourceType: resourceType,
                    options: {
                        initialQuery: query,
                        selectMultiple: selectMultiple,
                        showVariants: showVariants,
                        showHidden: showHidden
                    }
                });

                picker.subscribe(ResourcePicker.Action.SELECT, function (selection) {
                    //...
                });

                picker.dispatch(ResourcePicker.Action.OPEN);
Bart Coppens | Limoni Apps | Building apps for Shopify since 2016
0 Likes
Shopify Partner
72 0 13

I've created a new post for this issue specifically: https://community.shopify.com/c/Shopify-APIs-SDKs/App-Bridge-ResourcePicker-InitialQuery-not-hidden-...

Bart Coppens | Limoni Apps | Building apps for Shopify since 2016
0 Likes