Forms in Milo

[Ben-Zahler]

For the Adobe partner portals, we're asked to implement a solution to build and render forms.

The current requirements are:

1. Completely self service, business user should be able to author/create the form (form builder), save and share it...
2. easy to use form builder (we're compared to Microsoft forms builder)
3. support for "branching" based on answers (e.g. if user selects "Solution Partner Portal" in step 1, he get different questions than a user who selects "Technology Partner Portal")
4. Drop down to select one or multiple pre-listed option(s), additional field "other" to write 'free text'
5. support forms that require authentication (with adobe id/IMS) as well as publicly availalbe forms
6. forms very likely contain PII (Personal Identifiable Information) of Adobe partners and customers, e.g. email adresses

We did investigate a few options:

• FaaS forms are not future proof, so the existing component in Milo should not be used
• Franklin form block exists[0], but afaik currently does not support requirements 3 and 4, also managing the form in sharepoint is less user-friendly than MS forms and implementing reqs 3 and 4 will add a lot of complexity for authors
• one option would be to build a form generator similar to the caas generator [1]
  • this could generate json that then is stored in sharepoint
  • from what I read this not the rpeferred way to do things in Milo
  • there is already an open source tool that generates json schema for user built forms [2,3], but it's also complex to use has many configuration options that imho are very unlikely to ever be needed on adobe.com

I'm happy to hear your ideas and comments to the above!

[0] https://www.hlx.live/developer/forms#author-created-forms
[1] https://caas-milo-feature-parity-gap--milo--adobecom.hlx.page/tools/caas
[2] https://codepen.io/travist/full/xVyMjo/
[3] https://github.com/formio/formio

[Ben-Zahler]

Update from our latest call with business:
They are happy to create forms in a sharepoint table in a first step
Building a form generator can be evaluated as an additional feature at a later point.

[Ben-Zahler]

more input from Yugo/Gravity team:

1. our team can support building a solution with sharepoint-authoring in Q3/Q4. This would be very silimar to the franklin forms implementation, but covering the additional requirements for our business.
2. our business would be happy to get a statement if a UI-based form configurator is generally aligned with Milo and can be envisioned for a later point.

How can we:

• in the milo community define/validate the specs for (1)?
• get an answer if (2) is a valid long term vision for Milo?

[nerrdo]

@Ben-Zahler For Item 1, when you say "similar to franklin forms" does that mean it will use franklin forms as a foundation?
For item 2, I'd say it's unclear yet whether form authoring in Milo rises to the complexity of needing a Milo configurator, as opposed to relying on the forms block. But either way, a business user should be able to create/author a form. If the question is whether we'd build something like MS forms in Milo, that doesn't seem likely.

[Ben-Zahler]

@nerrdo from what I was informed, we can't actually reuse the franklin forms but we'll have to copy the code.
We will certainly use the code as a starting point, but since the franklin implementation does not cover all of our requirements, we'll have to structure the sharepoint slightly differently.
I assume that this structure should be discussed with someone from Milo community, how does that work?

[nerrdo]

@Ben-Zahler I like that assumption.

[Ben-Zahler]

@nerrdo what's the process of getting this discussion started?

[nerrdo]

Sorry @Ben-Zahler I missed this question. Why not just bring your questions to the community?

[Ben-Zahler]

@nerrdo what is "the community" for you? I don't have actual question, we have a proposal/requirements and I tried to document the relevant aspects in this thread. Now I'm waiting for the "the community" to provide feedback and validate our proposal from milo community.

[Ben-Zahler]

@nerrdo @narcis-radu @auniverseaway
Dejan has implemented a first proposal for a Milo forms block, it's currently in his milo-college project, will share the code in a few minutes.
Compared to the franklin implementation [0], we suggest the following changes:

• dropdown options are in separate colums. Each column that has prefix 'option-' as a column title is considered for options
• added a column for "OtherOption": if this is authored for a dropdown or radio field, the an additional text field is rendered where the user can enter any value.
• implemented radio button type
• different implementation of the "conditional field rendering" feature
  • helix implementation requires authors to put something like this: {"type": "visible", "condition": { "key": "portal", "operator": "eq", "value": "SPP"}}
  • our proposal is more simple: "portal=SPP"
  • in both implementations "portal" must match the "Field" value of a form field and "SPP" is the value of that field

The design of our implementation is "best effort". Where do we find the design from in order to implement this for Milo?

I would be very happy if we can have a meeting where we decide:

• are our proposals above ok to be added to MILO?
• does the MILO team want us to contribute the code to MILO?
• discuss the design to be implemented

[dejanpreradovic]

Hi @nerrdo @narcis-radu @auniverseaway ,

Here is the link of initial milo form implementation based on Franklin form block:
https://github.com/dejanpreradovic/milo-college/pull/1/commits

Orignial Frankling form implementation and docs:
https://github.com/adobe/helix-website/tree/main/blocks/form
https://www.hlx.live/developer/forms

Example form definition excel spreadsheet can be found here:
https://adobe.sharepoint.com/:x:/r/sites/milo-academy/_layouts/15/Doc.aspx?sourcedoc=%7B629DF061-45ED-4A62-B905-9994058A739E%7D&file=form.xlsx&action=default&mobileredirect=true

Styling is based on Franklin implementation but as Ben mentioned it would be great if you can provide us with design guidelines.

Thank you for considering this form proposal.

cc: @Ben-Zahler

[dejanpreradovic]

@nerrdo @narcis-radu @auniverseaway

If you would like to see form test page in action here is the link:
https://milo-form--milo-college--dejanpreradovic.hlx.page/drafts/dejan/form-example

Again form definition spreadsheet:
https://adobe.sharepoint.com/:x:/r/sites/milo-academy/_layouts/15/Doc.aspx?sourcedoc=%7B629DF061-45ED-4A62-B905-9994058A739E%7D&file=form.xlsx&action=default&mobileredirect=true

Form incoming spreadsheet:
https://adobe.sharepoint.com/:x:/r/sites/milo-academy/_layouts/15/Doc.aspx?sourcedoc=%7B0aa2e6ff-171f-45d7-bcf3-1851223c798b%7D&action=editnew

cc: @Ben-Zahler

[Ben-Zahler]

hi @narcis-radu , hi @nerrdo ,
thanks for supporting with the design!
We have demoed the solution to our business yesterday and are ready to move forward.
I still have not gotten any feedback on our functional changes compared to the franklin implementation:
Compared to the franklin implementation [0], we suggest the following changes:

• dropdown options are in separate colums. Each column that has prefix 'option-' as a column title is considered for options
• added a column for "OtherOption": if this is authored for a dropdown or radio field, the an additional text field is rendered where the user can enter any value.
• implemented radio button type
• different implementation of the "conditional field rendering" feature
  • helix implementation requires authors to put something like this: {"type": "visible", "condition": { "key": "portal", "operator": "eq", "value": "SPP"}}
  • our proposal is more simple: "portal=SPP"
  • in both implementations "portal" must match the "Field" value of a form field and "SPP" is the value of that field

Unless we receive any feedback here, we'll prepare a Milo PR and then check if there is feedback on the implementation.
Does that work?
thanks,
Ben

cc @dejanpreradovic

[narcis-radu]

Hi @Ben-Zahler! Would it be possible to have this code in SPP for the time being?
I have discussed the details with @dejanpreradovic, for the moment there aren't any plans to replace FaaS, I think we would want to avoid having duplicate (form) blocks in Milo.