Look into supporting inputFields with list and children

[BrunoBernardino]

Could we support list + children? How would it look?

Spun off from zapier/zapier-platform-cli#114 @ZenCocoon is this how you'd want it to work? A use case here would also help evaluate this in the future.

Definition

...
inputFields: [
  {
    key: "phones",
    label: "Phones",
    list: true,
    children: [
      { key: 'default', label: 'Default' },
      { key: 'home', label: 'Home' },
      { key: 'business', label: 'Business' },
    ]
  },
],
...

Output

...
"phones:" [
  { "default": "123123", "home": "123123", "business": "123123" },
  { "default": "123123", "home": "123123", "business": "123123" }
]

UI

?

[ZenCocoon]

@BrunoBernardino here's an example including UI that is more representative of my intentions:

Definition

...
inputFields: [
  {
    key: "phones",
    label: "Phones",
    list: true,
    children: [
      { key: 'label', label: 'Label', placeholder: 'eg: mobile, work, ...' },
      { key: 'phone_number', label: 'Phone Number' },
      {
        key: 'country_code',
        label: 'Country Code',
        placeholder: 'eg: FR',
        helpText: '2 characters country code, following ISO 3166-1 alpha-2.'
      }
    ]
  },
],
...

Output

...
"phones:" [
  { "label": "mobile", "phone_number": "123123", "country_code": "FR" },
  { "label": "work", "phone_number": "456456", "country_code": "US" }
]

UI

[BrunoBernardino]

Awesome @ZenCocoon thank you for this! Makes it much easier to think about how would this be possible.

[ZenCocoon]

Actually here, I think all the fields should be required

[LukasRos]

+1 for list + children support, I could use this, too!

[BrunoBernardino]

Thanks @LukasRos, would you mind posting an example for us , or what @ZenCocoon posted is similar to your requirement?

[LukasRos]

I think his example already captures the requirements.

After chatting on your developer Slack I realized that my current use case is already supported because Zapier automatically turns line items into multiple sets (= a list) of an element with children, so it seems you already support the underlying functionality and it just needs to be made available in the UI in case the user wants to define multiple fields even when they're not based on the trigger input.

[jasongill]

+1 for this, our API accepts shopping cart as an array of objects, and it's not entirely clear from the "frontend" which zaps emit "line items" and which don't, so I've ended up having to work around with a bunch of optional fields and some custom code to transmogrify those into an array

[brandonbloom]

I'd also like this. I've got a set of key/value pairs that could be represented as either list, children('key', 'value'), or maybe something like dict, choices.

[RobertWHurst]

This would be very much appreciated. +1

[jawand]

is there any way to add only single object. ? Just like this one.

{
Address:{
 AddressLine1: "",
 AddressLine2: "",
.
.
.
 }
}

[finom]

Any information about supporting it in the UI?

[nbourdeau]

Wanted!

[hrehman200]

+1 Wanted

[damiancloud]

+1 Wanted

[omanizer]

I'm also looking for this feature. It's a prereq for creating an effective Zapier integration with my SAAS product. What are the chances it's going to be implemented? I've created a pretty hacky zap with multiple list fields but that concept falls short when I try to delete fields in the middle of the list. I've kept from trying to release this integration for the past 3 months due to such a lacking experience.

[codetycon]

I have this schema for fields: `inputFields: [ { key: 'name', label: 'Name', required: true }, { key: 'active', type: 'boolean', label: 'Active', required: true, helpText: 'A boolean value representing whether the customer is active.' }, { key: 'phone', label: 'Phone', helpText: 'The primary phone number of the customer.' }, { key: 'altPhone', label: 'Alt Phone', helpText: 'Alternate phone number.' }, { key: 'fax', label: 'Fax', helpText: ' A string representing the customer\'s fax number.' }, { key: 'emails', label: 'Emails', list: true, helpText: 'An array of strings representing the customer\'s email addresses.' }, { key: 'contact', label: 'Contact', helpText: 'The customer\'s contact name.' }, { key: 'accountNr', label: 'Account Number', helpText: ' The customer\'s account number.' }, { key: 'resaleNr', label: 'Resale Number', helpText: 'A string representing the resale number.' }, { key: 'statusUpdateViaText', label: 'Status Update Via Text', type: 'boolean', helpText: ' A boolean value indicating whether the customer should get the changes via SMS.' }, { key: 'creditHold', label: 'Credit Hold', type: 'boolean', helpText: 'A boolean value indicating whether the customer is placed on credit hold.' }, { key: 'creditLimit', label: 'Credit Limit', helpText: 'The maximum amount of credit for the customer.' }, { key: 'memo', label: 'Memo', helpText: 'A string representing comments associated with the customer.' }, { key: 'website', label: 'Website', helpText: 'A string representing the customer\'s website.' }, { key: 'salespersonId', label: 'Salesperson Id', helpText: 'A GUID representing the salesperson id associated with the customer.' }, //Shipping Address { key: "shippingAddress", label: "Shipping Address", children: [ { key: 'name', label: 'Name', helpText: 'Any arbitrary string to identify this address.' }, { key: 'line1', label: 'Line1', helpText: 'Address line 1 (Street address, PO Box, etc.).' }, { key: 'line2', label: 'Line2', helpText: 'Address line 2 (Apartment, suite, unit, building, etc.).' }, { key: 'city', label: 'City', helpText: 'A string representing the city, dDistrict, suburb, tTown or village name.' }, { key: 'state', label: 'State Code', helpText: '2-letter state code.' }, { key: 'zipcode', label: 'Zip Code', helpText: 'ZIP or postal code.' },
{ key: 'country', label: 'Country', helpText: 'The country name.' }, ] }, //Billing Address { key: "billingAddress", label: "Billing Address",
children: [ { key: 'name', label: 'Name', helpText: 'Any arbitrary string to identify this address.' }, { key: 'line1', label: 'Line1', helpText: 'Address line 1 (Street address, PO Box, etc.).' }, { key: 'line2', label: 'Line2', helpText: 'Address line 2 (Apartment, suite, unit, building, etc.).' }, { key: 'city', label: 'City', helpText: 'A string representing the city, dDistrict, suburb, tTown or village name.' }, { key: 'state', label: 'State Code', helpText: '2-letter state code.' }, { key: 'zipcode', label: 'Zip Code', helpText: 'ZIP or postal code.' },
{ key: 'country', label: 'Country', helpText: 'The country name.' }, ] }

  ],`

It's looking like this in UI:

There are number fields overlapped because of the same key of the child element, but the parent have an different keys.

Is there any way to reuse key inside the childrens.

[xavdid]

Hi folks! Thanks for the all the interest here.

These restrictions are a product decision by the editor team. We'll look into what it would take to change that, but given that it's out of the purview of my team (dev-platform) I don't have any info about if/when this will happen at this time.

Going forward, if folks could 👍the original issue rather than commenting, I'm sure all subscribers would appreciate it. We'll update this thread when we have any new info to share.

[zapzap]

This issue has been copied into our private issue (as PDE-869) tracker. Thanks for the report! We'll update this as we learn more.