How to show additional text under heading using Picker API?

App Bridge
1

Hello,

I am building customer picker using Picker API.

const picker = await shopify.picker({
  heading: 'Add customers',
  multiple: true,
  headers: [{content: 'Name'}],
  items: [
    {
      id: '1',
      heading: 'Jack',
      data: ['jack@example.com'],
    },
    {
      id: '2',
      heading: 'Kante',
      data: ['kante@example.com'],
    },
  ],
});

From Picker Parameters:

data: DataPoint []
The additional content to display in the second and third columns of the row, if provided.

But email is not being shown as second column of the row.

Customer picker using picker API
Customer picker using picker API636×291 9.15 KB

Shopify customer picker
Shopify customer picker621×646 15.6 KB

What is the way to show second and third columns of row on Picker?

2

Hey @remy727,

We display the columns based on the headers you add. So, for your example, you’d want to have Name and Email added as column headers like this:

const picker = await shopify.picker({
  heading: 'Add customers',
  multiple: true,
  headers: [{content: 'Name'}, {content: 'Email'}],
  items: [
    {
      id: '1',
      heading: 'Jack',
      data: ['jack@example.com'],
    },
    {
      id: '2',
      heading: 'Kante',
      data: ['kante@example.com'],
    },
  ],
});
3

Thank you, @Charlie-Shopify!
I misunderstood data parameters :man_facepalming:
It works as Document mentioned.
But is there any way to show email under name like Shopify customer picker like in the second screenshot I attached?

4

But is there any way to show email under name like Shopify customer picker like in the second screenshot I attached?

No, it’s meant to be displayed as a table in the modal, with each piece of information showing up in a separate column. The closest you can get to multiple pieces of information showing up in a single cell like that would be to use badges, but I don’t think that fits your usage well. The way I described above with separate columns for name and email is the recommended way.

1 Like
5

Gotcha.
Yeah. I saw I can use badges but it is not fit for email.

Thank you for clarifying!

1 Like