Drag & drop form builder app to build a basic RDF form definition

[phochste]

Pitch

Create a drag & drop form builder application that combines HTML form input fields, and generates an RDF form definition of the created form. This RDF form definition should be stored in a preferred Solid location.

See: #19 for the use-cases that a related to this challenge.

The basic idea is to start with a Google Forms like interface but for the generation of RDF data. This application is one application that can be used in an enviroment in which:

• Form builder applications can generate a RDF Form definition
• Form render applications that can render an RDF form for end users (e.g. as HTML or as a text menu)
• Form viewer applications that can view the generated RDF in a human friendly way (e.g. a Form builder can create a Doodle form, a Form render can make the HTML version to input the data, a Form viewer application can render a nice read-only view)

Use case

An end-user wants to create Web Form that can be used to generate RDF data for a book review. She knows a little bit about RDF namespaces and fields and wants to drag & drop the fields:

• Title a text field which binds to dc:title
• Author a text field which binds to dc:author
• Rating a dropbox field for which she doesn't find a binding but chooses ex:rating as temporary solution. The drop down should contains these options:
  • "★ - I don't like it" binding to ex:NotLikeIt
  • "★★ - It was ok" binding to ex:ItWasOk
  • "★★★ - I liked it" binding to ex:LikedIt
  • "★★★★ - I really liked it" binding to ex:ReallyLikedIt
• Review a textarea which binds to dc:description

The enduser can store the RDF form description in a Solid pod location of choice. At a later time she decides she wants to add an extra choice option and adds:

• "★★★★★ - It was amazing" binding to ex:Amazing

The enduser can use an Form renderer application to view and fill-out the generated RDF Form (not part of this challenge, see: #65).

Desired solution

• A user is presented with a drag&drop menu to build up a basic form (basic = without nesting)
• A selection of the following fields is available
  - Checkbox field : a checkbox on the form
  - Text field : a text input field in the form
  - Textarea field : a textarea field in the form
  - Date field : a date picker in the form
  - Choice field : a field with a selection of one or more items
• Each field provides a way to provide:
  - A field title
  - A field type (eg. something that maps to checkbox, text, area, date, choice,...)
  - A field default value
  - A binding (e.g. http://xmlns.com/foaf/0.1/name)
  - Indication if the field is required or not (e.g. this can be implemented as a yes/no button in the app)
  - Indication if the field can be used repeated or not (idem)
  - (internally) the order of the field in the list
• The app makes an abstraction of the data model above and provides a way to serialize this model using (to be checked which one or maybe combination is feasible):
  • rdf-form vocabulary
  • solid-ui vocabulary
  • shacl vocabulary
• The generated RDF is stored in a Solid location
• The generated RDF can be edited (fields be added, deleted)

Acceptance criteria

• The Form builder app can be used to drag&drop the fields to the book review example that will be given below
• The Form builder app will serialize an RDF form that is at least compatible with rdf-form
• The Form builder app can store the generated RDF form into a Solid pod
• The Form builder app can read an existing book review RDF form definition and add/delete fields

Pointers

See: https://docs.google.com/document/d/11uj4kjh96gBXQgU3b3asRZZiHjQC2HXL0Xy-I_gtB6k/edit# for overview of existing implementations that tried this

Scenarios

• Solid basic form builder (Google Forms but the Solid way) #19

[phochste]

Not for myself: add an example of a book review form that the Form builder app should be able to support in rdf-from, solid-ui and shacl .

[RubenVerborgh]

@phochste Cool, and the same could perhaps be applied to #65?

[phochste]

@RubenVerborgh yes, #19 , #64 and #65 are all related, but can (and probably should be) implemented independently just to prove the point.

[phochste]

See https://github.com/smessie/FormGenerator for first implementation

[phochste]

Sample book review forms in three different ways:

RDF Form

https://github.com/phochste/solidui2rdfform/blob/main/data/rdfform/book_review.ttl

Solid-UI

https://github.com/phochste/solidui2rdfform/blob/main/data/solidui/book_review.ttl

SHACL

https://github.com/phochste/solidui2rdfform/blob/main/data/shacl/book_review.ttl

[pheyvaer]

@phochste Are all the changes done? Can Ruben review it again?