When generating a form from a model file that contains multiple models, I should be able to select which of the models that I want to render:

• I should be able to make the selection programmatically
• I should be able to make the selection in the UI

Given a model and a JSON serialization, I should be able to auto-populate the values of the form.

Enums, Relationships, and Concepts should be handled and built into the form generator.

• We will support up to 3 levels of nesting

• Create form elements for the composer types: Integer, Long, Double.
• Include validation for

• From a free-textarea or similar, the user should be able to provide text by copy / paste as the source for the generator.
• The source model should be validate before form generation
• Errors in the source model should be visualized in the UI.

https://hyperledger.github.io/composer/latest/reference/cto_language#field-validators

• Regular Expressions
• Ranges
• Default values

Dan:

A cool demo would be a React app that: (edited)

1. Prompt the user for the the fully-qualified name of a CML type and a URL to import the type from
2. Generate the web form dynamically from the type
3. User populates the web form
4. The JSON is displayed and validated against the mode

As a user of this library, I should be able to apply custom styling to the generated code so that it fits within the context of my application.

So that I can run the generator client-side, the packages should be browserified. This includes dependencies such as composer-common

Matt:

Let’s talk about CI/CD later today. AP and Composer both use travis for builds, mocha/chai for tests, and coveralls for test coverage

If we’re in GitHub land, using a GH project associated with your repo is probably sufficient. You could create a kanban board to organise your tasks and issues into milestones

Three components

• The main form generator tool (Reusable and generic)
• React form generator and
• Vanilla JS version

Setup code repo with lerna and start working on the generic form generator

To reproduce paste this contents:

namespace org.accordproject.address

/**
 * Based on http://schema.org/PostalAddress
 */
concept Foo {
  o String streetAddress optional
  o String postalCode optional
  o String postOfficeBoxNumber optional
  o String addressRegion optional
  o String addressLocality optional
  o String addressCountry optional
}

There are 3 instances of Foo generated.

How should relationships be visualised in the form?

• As a tuple for the three components? https://hyperledger.github.io/composer/latest/reference/cto_language#relationships
• As a input string field?

The README.md files should give instructions on how to install libraries and how to run the demo.

Add localization.

Dan

It would be very useful to be able to decorate the Composer model with annotations that are used as the labels for the generated form. See accordproject/template-archive#111. Additional annotations could be defined for accessibility, keyboard navigation etc.

concept Bar {
  o String a
}

concept Foo extends Bar {
  o String b
}

Instantiating Foo ...

{
  $class: "Foo",
  a: "A",
  b: "B"
}

Enumerations should be presented as single-select fields

I should be able to install the composer-form libraries from NPM so that I can use them in a project

Date/Time fields should be rendered in the user's locale as determined by the browser

On a button click or function call, the contents of a valid form should generate a JSON serialization.

Parsing this JSON serialization with the Model Manager's Serializer (fromJSON) should be guaranteed to succeed.

Questions

• What does it mean for a form to be valid?
• How do you handle / present errors in the serialization process?

• Create form elements for the composer primitive types.
• Include validation for