SHACL-driven UI

Hello

I have just found out about your CG from a Web Components/Polymer Slack.

I do not yet know in what degree I may or may not contribute to the group, I thought that I would share something that I have been working on as part of my personal project as well as pushing for adoption inside my company, for customer-facing projects.

At Zazuko we are heavily using RDF and other open standards to build our software. An important open standard, which we are now starting to apply in new ways, is SHACL [1] which in an RDF-based description of graph structures. Together with a non-standard RDF vocabulary DASH [2] we are able to create highly customisable and data-driven form descriptions. DASH provides a structured and machine-readable way for matching form elements to the SHACL-described graph.

To bring these together as actionable UI I have been implementing chaperone [3]. While I’m in the process of creating some proper documentation pages, I encourage you to check a playground that I’ve built which presents most of the features

https://forms.hypermedia.app

It implements (not completely; work in progress) the algorithm for selecting appropriate form editors according to DASH specification. Here’s an example for scoring of a text field [4]. As you will see, the score is assigned based on the SHACL Shape as well as actual data (in case of inconsistencies)

The actual editor rendering is completely decoupled, connected only by the unique editor identifiers, be it DASH, custom extension or app-specific. Here’s an example for how date/time picker elements are rendered using Vaadin Web Components [5].

Please let me know if you think my undertaking overlaps with the interests of the Open UI Community Group. I would love to hear if I could contribute or possible offer the be an early adopter if it makes sense for shaperone.

Best,
Tom

[1]: https://www.w3.org/TR/shacl/
[2]: http://datashapes.org/forms.html
[3]: https://github.com/hypermedia-app/shaperone
[4]: https://github.com/hypermedia-app/shaperone/blob/master/packages/core/DashEditors.ts#L9-L24
[5]: https://github.com/hypermedia-app/shaperone/blob/master/packages/wc-vaadin/components/date.ts#L5-L27

Received on Saturday, 31 October 2020 16:32:56 UTC