slanted W3C logo

Declarative User Interface: Forms and Apps in RDF

Tim BL, <>

Hit the space bar or swipe left for next slide

Declarative User Interface: Forms and Apps in RDF

What would that look like?

  # A simple group with two fields

  ex:form a ui:Group;
    ui:parts (ex:part1 ex:part2).

        ex:part1 a ui:SingleLineTextField ;
        ui:property vcard:fn;
        ui:label "name" .

        ex:part2 a ui:EmailField ;
        ui:property vcard:hasEmail;
        ui:label "email" .

Components are form Fields or structures



Documentation components

Single Line Text field

Form fields are set up to write linked data into Solid pods.

Each one adds (typically) a new edge to the data graph at run time

So We give the predicate which will be used in the instance of the field.

# A simple form with one boolean field
a ui:BooleanField ;
ui:property ex:allDay .

Examples of other form fields

  1. Examples of individual Form Fields
  2. Examples of structues in forms
  3. Examples of a Solid profile edting form
  4. Editing a simple form using the Form Form
  5. Editing the Form Form

Code: Render a form

To put a form in your UI

UI.widgets.appendForm(dom, container, {}, subject, form, doc, callback)
dom is the DOM HTMLDocument object, a/k/a document
container is a DOM element to contain the form
{} are unused at present
subject is the RDF thing about which data will be stored
form is the RDF object in the store for the form
doc is the RDF document on the web where the data will be stored. Often, subject.doc()
callback is a function taking an error flag and a message (if the error flag is true)

Going meta -- designing forms using the form of forms 1

Here is a form for editing a form

Users and developers should be able to design and adapt their forms

The Form Form

Going meta -- Editing forms using the form of forms 2

Here we are editing the really small form we started with.

Here we edit the FormForm with itself.

Forms and Classes

export function formsFor (subject) {
  const kb = store

  log.debug('formsFor: subject=' + subject)
  const t = kb.findTypeURIs(subject)
  let t1
  for (t1 in t) {
    log.debug('   type: ' + t1)
  const bottom = kb.bottomTypeURIs(t) // most specific
  let candidates = []
  for (const b in bottom) {
    // Find the most specific
    log.debug('candidatesFor: trying bottom type =' + b)
    candidates = candidates.concat(
      findClosest(kb, b, ns.ui('creationForm'))
    candidates = candidates.concat(
      findClosest(kb, b, ns.ui('annotationForm'))
  return candidates

The Form Pane

The Form Pane

  icon: UI.icons.iconBase + 'noun_122196.svg',

  name: 'form',

  audience: [ns.solid('PowerUser')],

  // Does the subject deserve this pane?
  label: function (subject) {
    const n = UI.widgets.formsFor(subject).length
    UI.log.debug('Form pane: forms for ' + subject + ': ' + n)
    if (!n) return null
    return '' + n + ' forms'

  render: function (subject, context) {

Future: A Form registry?



The Autocomplete field

This form field allows users to select things from lists in public databases, things like Languages, Organizations, Occupations, and Skills

This is not covered in this talk.

(There is a blog Building Solid Apps which use Public Data, about this which I could run though for those interested)