zapier-platform icon indicating copy to clipboard operation
zapier-platform copied to clipboard

Support helpText for fields with children

Open wking opened this issue 7 years ago • 3 comments

Setting inputFields like:

{
  key: 'person',
  label: 'Person',
  helpText: 'This field contains user information.  If any of these fields are set, you must also set …',
  children: [
    {key: 'name', label: 'Name'}
  ]
}

raises zapier validate errors like:

│     Property │ App.creates.person.inputFields[0]                                                                │
│     Message  │ must not contain children and helpText, as they're mutually exclusive.                           │
│     Links    │ https://github.com/zapier/zapier-platform-schema/blob/v5.1.0/docs/build/schema.md#fieldschema    │

It would be nice if this was possible. I expect implementing this would also require UX changes to display the parent helpText and is more than just lifting this restriction, but hopefully it makes sense as a long-term feature request. In the short term, it's probably worth updating the docs here and here to mention the limitation.

wking avatar Mar 30 '18 22:03 wking

Ahh, i see the problem with zapier/zapier-platform-cli#290 (I should read these in the order they're posted 😀). The parent of children is a little weird because it's not actually a field itself, it just describes a group of fields. For your particular case, I believe you can set help text on the children. If that's not the case, let me know!

xavdid avatar Apr 03 '18 04:04 xavdid

For your particular case, I believe you can set help text on the children.

Right. But then I need to repeat the information for every child element. It would be easier for users if I could put the information in once at the parent level. It looks like there is space for this in the UI:

child-fields

which has backing HTML like:

<fieldset class="fm-fields child-fields-group">
  <legend>Person</legend>
  <span></span>
  <div class="fm-field fm-field-type-unicode validation-error-required required">
    <div class="label-logo-wrapper">
      <span class="img16 PlaceholderAPI16x16 App3420CLIAPI16x16 label-logo"></span>
      <div class="fm-label">
        <label>Name</label> <span class="required-text"></span>
      </div></div>
      …

If I use my browser dev tools to inject a <div class="fm-help"><p>…</p></div> like:

<fieldset class="fm-fields child-fields-group">
  <legend>Person</legend>
  <div class="fm-help">
    <p>This structure contains user information.  If any of these fields are set, you must also set …</p>
  </div>
  <div class="fm-field fm-field-type-unicode validation-error-required required">
    <div class="label-logo-wrapper">
      <span class="img16 PlaceholderAPI16x16 App3420CLIAPI16x16 label-logo"></span>
      <div class="fm-label">
        <label>Name</label> <span class="required-text"></span>
      </div></div>
      …

I get the display I'm looking for:

child-fields-2

That seems like a cheap win. I'm just not sure where I need to go about filing pull requests to make it happen ;).

wking avatar Apr 03 '18 04:04 wking

Thanks for the explanation and helpful screenshots @wking !

This is a feature request that is related to the internal product (Zapier Editor), so while you could do a PR in the https://github.com/zapier/zapier-platform-schema repo to allow for helpText, it wouldn't be rendered.

I'm adding this internally as well.

BrunoBernardino avatar Jun 04 '18 11:06 BrunoBernardino