\
**Category:** General Discussion\
**Created:** [September 21, 2020, 8:12am UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457 "2020-09-21T08:12:03Z")\
**Posts on this page:** 20\
**Page:** 1
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [September 21, 2020, 8:12am UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/1 "2020-09-21T08:12:03Z")
I am working on a prototype to convert RDF to an HTML form.
> **[danielbeeke/rdf-form](https://github.com/danielbeeke/rdf-form)**
>
> RDF form provides rendered forms via a form definition provided in RDF turtle format.
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.
---
**Author:**  [@Smag0](https://forum.solidproject.org/u/Smag0)\
**Post date:** [September 21, 2020, 8:29pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/2 "2020-09-21T20:29:11Z")
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/](https://ruben.verborgh.org/blog/2019/06/17/shaping-linked-data-apps/) ?
---
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [September 22, 2020, 7:36am UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/3 "2020-09-22T07:36:07Z")
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](https://www.w3.org/ns/ui) maybe that can help and shacl.
---
**Author:**  [@Smag0](https://forum.solidproject.org/u/Smag0)\
**Post date:** [September 22, 2020, 8:32am UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/4 "2020-09-22T08:32:05Z")
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/](https://holacratie.solid.community/public/Schema/)
that can be read by [https://scenaristeur.github.io/holon/](https://scenaristeur.github.io/holon/) (source [https://github.com/scenaristeur/holon](https://github.com/scenaristeur/holon)) -\> click on bottom buttons (orga / user…) to use the concerned shex shape 😉
or more recent and Vue.js components [https://scenaristeur.github.io/solid-vue-panes/forms](https://scenaristeur.github.io/solid-vue-panes/forms) ([https://github.com/scenaristeur/solid-vue-panes/blob/master/src/components/crud/Crud.vue](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 😉
---
**Author:**  [@Kevin](https://forum.solidproject.org/u/Kevin)\
**Post date:** [September 22, 2020, 9:45pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/5 "2020-09-22T21:45:18Z")
@danielbeeke Recommend you take a look at [https://www.w3.org/DesignIssues/Footprints.html](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](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.
---
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [September 23, 2020, 7:14am UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/6 "2020-09-23T07:14:26Z")
Thanks, I have checked a bit of the code, looks great.
I will start experimenting with ShEx
---
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [September 23, 2020, 7:16am UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/7 "2020-09-23T07:16:14Z")
Thanks 🙂
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.
---
**Author:**  [@Smag0](https://forum.solidproject.org/u/Smag0)\
**Post date:** [September 23, 2020, 12:15pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/8 "2020-09-23T12:15:40Z")
Could you explain how the playground works ? I’m a little bit confused
---
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [November 26, 2020, 1:59pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/9 "2020-11-26T13:59:23Z")
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/](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
---
**Author:**  [@anon36056958](https://forum.solidproject.org/u/anon36056958)\
**Post date:** [November 26, 2020, 2:54pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/10 "2020-11-26T14:54:11Z")
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](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.
---
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [November 26, 2020, 3:05pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/11 "2020-11-26T15:05:32Z")
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.
---
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [November 26, 2020, 3:08pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/12 "2020-11-26T15:08:27Z")
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.
---
**Author:**  [@Smag0](https://forum.solidproject.org/u/Smag0)\
**Post date:** [November 27, 2020, 9:48pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/13 "2020-11-27T21:48:45Z")
Hi @danielbeeke
Nice we components 🙂👍
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?
---
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [November 27, 2020, 10:01pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/14 "2020-11-27T22:01:44Z")
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.
---
**Author:**  [@aschrijver](https://forum.solidproject.org/u/aschrijver)\
**Post date:** [November 28, 2020, 12:02am UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/15 "2020-11-28T00:02:26Z")
I get a white screen in both FF and Chrome on Ubuntu 18. My ad-blockers are not blocking anything either.
---
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [November 28, 2020, 10:34am UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/16 "2020-11-28T10:34:21Z")
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. 🙂
---
**Author:**  [@aschrijver](https://forum.solidproject.org/u/aschrijver)\
**Post date:** [November 28, 2020, 10:45am UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/17 "2020-11-28T10:45:30Z")
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.
---
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [November 28, 2020, 12:08pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/18 "2020-11-28T12:08:30Z")
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
At the moment it only works in the newest browsers.
---
**Author:**  [@Vincent](https://forum.solidproject.org/u/Vincent)\
**Post date:** [November 30, 2020, 4:40pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/19 "2020-11-30T16:40:43Z")
Looks good and works fine in Firefox 83. Just one typo though 😉
---
**Author:**  [@danielbeeke](https://forum.solidproject.org/u/danielbeeke)\
**Post date:** [November 30, 2020, 7:08pm UTC](https://forum.solidproject.org/t/rdf-form-prototype-for-rdf-to-html-form/3457/20 "2020-11-30T19:08:01Z")
Nice one 🙂
I will be working on a quick start and a better introduction form. Then I will also fix this typo ;).