[Runtime Fields] UX: Composite Runtime Fields phase 2

[mdefazio]

Summary

Our previous designs composite runtime fields combined the flow with data parsing. After discussing further, we felt it made sense to focus on composite runtime fields as their own flow within the runtime field creation flyout. The data parsing flow would be triggered separately (tbd).

Design Doc
Figma file
Figma Prototype

Discussion for placement of sub field formatting: #126396

Screenflow:

CompositeRuntimeFields.mov

---

Tasks:

• Create wireframes
• Create lo-fi prototype showing composite runtime field creation
• Create any necessary mockups
  • Generated field block beneath script editor
• Review with internal customers
• Update data view table to show composite fields grouped together with sub fields indented
• Show filtering view and behavior of child fields

---

Previous issue (Primarily around preview setup)

[mdefazio]

Need to determine best approach for handling the formatting of child fields—either within the parent form, or as their own contexts similar to other es fields (where only the format and label are available options).

[mdefazio]

@mattkime @sixstringcode @shivindera @ryankeairns

Here is the screencast with designs.

Composite.Runtime.Fields--design720.mov

Some stuff to note:

• Child fields and Parent field both show as runtime in the field list
• Can navigate to parent field from child flyout (opens flyout over current flyout), but cannot go from parent to child
• Grouping of fields in the field list is done only by name at the moment. So if a custom label is given to a child field, it might be difficult to find.
• Showing a 'refresh' button next to the generated fields section—maybe not necessary, but didn't know if there was any reason that it wouldn't auto detect changes to the script above, then this would give it another shot.

Todo:

• Get in touch with some copy writers to go through it (not sure if 'Generated fields' is the right text
• Run through this with a few more internal folks to validate decisions further.

[mattkime]

Do we have that configuration of the double flyout anywhere else? I just want to make sure there's no lurking problems before heading in this direction.

[mdefazio]

@mattkime I've removed the flyout over flyout...apparently I was mis-remembering something. While I still think we will need a way to go from a child field to a parent (and vice-versa), let's keep the straightforward for the time-being and see how some feedback comes back.

[mdefazio]

@sixstringcode @mattkime Updated flows and designs to address our feedback.

• Add data view name to toast confirmations
• Add option to go to parent field within callout in flyout
• Add discard/unsaved change dialog when switching to parent field (this is not ideal, but worth testing I think)