RDF forms for Solid

This blog post is part of a series of posts on the topic of Linked Data driven frontends. In the previous post we talked about How a Turtle file can describe you application frontend. While the previous post will satisfy a number of use cases, there are also use cases that require the user to be able to EDIT the data on the Pod. This brings us to the topic of user forms.

Everyone is familiar with paper forms needed to fill in for any bureaucratic process: getting a visa, registering for your first ID, tax returns and so on. This is what we mean by forms. And yes they are also used for collecting data, and in online forms one can also delete data. Basically, we are looking for easy & customizable Pod interfaces for doing CRUD operations.

In the Solid community forum you come across such prototype solutions already. The SolidOS team also has one. If you have a Pod on solidcommunity.net you have seen and used it already. For example: the Solid profile editing form shown in Figure 1.


Figure 1: Solid profile editing form - snippet from solidcommunity.net frontend

Let’s get technical.

Like in the previous blog post, you have some raw RDF data and you want it displayed in an editable frontend form like in Figure 2. How can you do this?


Figure 2: An edit form for editing the RDF data about the application called Ramen

Sir Tim Berners-Lee created a piece of code part of the solid-ui library, we call it the solid-ui forms library, which does exactly this. Written in JS, it interprets the UI ontology (also created by Tim) and creates HTML snippets. This code is meant as a prototype, an example of what is possible with Semantic Web in Solid. It is driving part of the frontend for solidcommunity.net.

To create such a frontend you need an RDF resource which makes use of the UI ontology. This RDF resource we simply call a form. A snippet of the form which creates the frontend for editing the project name, description and author in my Solid Hello Worlds demo is shown in Figure 3. 


Figure 3: A form snippet using the UI ontology to create the edit form on the frontend of Figure 2

So the form is what describes how the frontend looks like and what data it should use. Then this form is rendered as HTML. The result can look like the screenshot in Figure 2.

With data as RDF we can go even further with our frontends. While Figure 1 is simply editing strings (labels) one can, with forms one can also edit things (skos:concepts, NamedNodes). For example in Figure 2 on the right screenshot there is a multi-select field under Technical stack. That field is autocomplete with skos:concepts classified as Solid libraries in the specially created Knowledge Graph for the demo. Either you select an existing Solid library or you can create a new one. In the background, according triples with relations are created in the Knowledge Graph.

Let’s briefly highlight what the solid-ui forms library achieves.

  1. It showcases an easy and customizable way to create frontends to edit Solid data directly on the Pod.

  2. It does not require any coding (beyond basic HTML and CSS if you want styling), It only requires the creation of the form resource file which uses the UI ontology with the available UI elements.

  3. You make use of an existing JS library (solid-ui form) which can simply be imported into your HTML.

  4. By design, there is no ‘Save’ button on the resulting frontend form. The data is autosaved in real time after each edit.

The SolidOS team is working on solutions that make it easier for anyone in the community to create such RDF forms that can be embedded in a HTML page. A starting point, for the solid-ui forms, is the GitHub readme. It contains examples and links to the inspirational code.

And if you want to hear from Sir Tim Berners Lee himself, he gave the SolidOS team a presentation on the available UI elements some time ago. The video is available here.

What alternatives are there?

In researching and using these solutions, community members made us aware of some alternative solutions (and we are sure there are even more). This topic was discussed in the past a lot actually. Mark Baker’s website lists some related work. A more recent work is from Daniel Beke, called rdf-form. Our community member Patrick Hochstenbach built FormsViewer, a Svelte form viewer app based on Daniël Beeke's rdf-form.

Then there is a whole category of solutions build around Shapes such as SHACL and ShEx: Jesse Wright's schimatos; TopBraid Composer from TopQuadrant based on Holger Knublauch's SHACL extension, Dash and (probably) on SPARQL Web Pages; Prud'hommeaux shex-form; Martin Maillard's shacl forms.

All in all, this topic of doing basic CRUD operations on Pod data is, as the name says: basic. And still there is not one way that seems to spearhead in the community. We wonder what is missing?

Write us your thoughts on the Solid forum so we can complete our example list. Also keep an eye on the according SolidLab Challenge and let us know what your thoughts are on the topic.

Pod on!

Resources:

Modified
Language
English
Document Status
Draft