RDF form, prototype for RDF to HTML form

I am working on a prototype to convert RDF to an HTML form.

I am interested in other initiatives and thoughts of Solid enthusiasts.
In the readme you can read what the main idea is.

I want it to work with all the mainly used Ontologies. It has a plugin system so that you can add your own Ontologies.
It should have al the basic field types and for specific predicates it can have specific widgets.

1 Like

Hi @danielbeeke, just read the readme. Afaik rdf is not ordered, so triple can be in any order,
Have you heard about this article https://ruben.verborgh.org/blog/2019/06/17/shaping-linked-data-apps/ ?

Hi Smag0,

nice. Yes the order may be a problem. I have also looked at streams. I thought for having a form, streams may be not needed. Streams may also complicate order.

I have read the article. I will investigate shapes. The article has interesting links in it. For example the UI ontology. https://www.w3.org/ns/ui maybe that can help and shacl.

If you want to see what can be done with ShEx, i give you my first experiments :
I made some ShEx (like) here :
https://holacratie.solid.community/public/Schema/
that can be read by https://scenaristeur.github.io/holon/ (source https://github.com/scenaristeur/holon) -> click on bottom buttons (orga / user…) to use the concerned shex shape :wink:

or more recent and Vue.js components https://scenaristeur.github.io/solid-vue-panes/forms (https://github.com/scenaristeur/solid-vue-panes/blob/master/src/components/crud/Crud.vue)
with test for solid:webId, or storage:workspace to indicates to the app where to store data.
Footprints is another big part to explore

It’s a first part, i’ve not used UI ontology, but hope this could help you :wink:

@danielbeeke Recommend you take a look at https://www.w3.org/DesignIssues/Footprints.html. Describes how Forms can be rendered based on Form Models which can be hand written or generated from ShEx shapes. As an example, see https://solid.github.io/form-playground/playground.html.

While Forms could be rendered directly from the ShEx shape, the use of Form Models gives the form designer more control over the labeling/layout/ordering of the Form.

Thanks, I have checked a bit of the code, looks great.
I will start experimenting with ShEx

Thanks :slight_smile:

While thinking about that, a form builder would possible more interesting.
A visual builder that generates the forms along with a form renderer.
While using ShEx or forms.

Could you explain how the playground works ? I’m a little bit confused

Hi all, I have been working on the prototype.

I have created an ontology that holds form properties.
A bit of documentation and an example can be found here:

https://rdf-form.danielbeeke.nl/

The general structure is now:

  • create a form definition in turtle, publish it on the internet. (this can be attached to the ontology of the thing…)
  • create html: ‘’ with a couple of attributes.
  • Enjoy the form to edit or create things

For now I have stayed away from shex… I think it is really complex and doubt a web developer would like to create a form with that. I think it could be attached in the validation phase.

If anyone has feedback or observations I am looking forward to hear.

Kind regards Daniel

3 Likes

That is really cool.

I wonder how rdf-form intended to be different from ui:form in https://solid.github.io/solid-ui/Documentation/forms-intro.html ? In ui:form, I don’t see anything like the binding property in rdf-form.

The ui:form does not have all the properties I needed for complex forms.
I have however started with those properties.

One other thing is that you could have an address field, or a geo location picker. These two examples both have multiple bindings, (postal code, country, house number etc and latitude and longitude).

At this moment nested forms are not possible. But that is one thing that I would like to add, nested forms with certain rules. Min or max values of the nested object etc.

1 Like

One other difference is that I would like to make it so that conforms to general usage of forms.

I think one submit button is a general UI pattern and should be used as opposed to multiple save buttons or simply always saving via ajax. It could also be that multiple strategies would be okay to build in.

I build this for myself and for a big product I am experimenting for. We have a lot of reuse of forms in that application and a situation were we would like to join data from multiple data sources.

1 Like

Hi @danielbeeke
Nice we components :slightly_smiling_face::+1:
the two ‘translation’ button disappear when we click on it, so it is fixed for two lang by the dev of the form ? Or could we add another lang?

Ah yes, the example has a limited set of languages.
They disappear when you have had all the languages that are added to the form.

I get a white screen in both FF and Chrome on Ubuntu 18. My ad-blockers are not blocking anything either.

Hi @aschrijver!

That may be because I have not yet done any cross browser checks etc.
What versions are you using?
I also installed sentry now. So upcoming failures will be logged to my sentry dashboard. :slight_smile:

This is on Firefox 73.0.1 and Chrome 80.0.3987.122 on Ubuntu 18 (4.15.0-88-generic).

I get in FF:

SyntaxError: expected expression, got ‘.’ [App.js:105:47]

The debugger doesn’t load any files. But in App.js it might be indeed line 105.

it is because of property?.[‘rdf:type’]?.[’@id’]
It is a new syntax. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

At the moment it only works in the newest browsers.

1 Like

Looks good and works fine in Firefox 83. Just one typo though :wink:

1 Like

Nice one :slight_smile:

I will be working on a quick start and a better introduction form. Then I will also fix this typo ;).