data-values not working

renevoorburg commented 2 months ago

I'm having an issue with preloading data into the <shacl-form> component. Here's the code I'm using:

<!DOCTYPE html>
<html>
  <head>
    <script
      src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/form-default.js"
      type="module"
    ></script>
  </head>
  <body>
    <shacl-form
      data-collapse="closed"
      data-shapes="@prefix sh: <http://www.w3.org/ns/shacl#> .
@prefix ex: <http://example.org#> .

ex:ExampleShape
  a sh:NodeShape ;
  sh:targetClass ex:Thing ;
  sh:property [
    sh:path ex:exampleValue ;
    sh:minCount 1
  ] ."
      data-values="@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix ex: <http://example.org#> .

_:a6fb1d55-51ba-4e62-ba01-25efe5bbc144
  a ex:Thing ;
  ex:exampleValue 'this value should be loaded' ."
    ></shacl-form>

    <script>
      const form = document.querySelector("shacl-form");
      form.addEventListener("change", (event) => {
        if (event.detail?.valid) {
          const triples = form.serialize();
          console.log("entered form data", triples);
        }
      });
    </script>
  </body>
</html>

renevoorburg commented 2 months ago

Ah, I had to add data-value-subject="_:a6fb1d55-51ba-4e62-ba01-25efe5bbc144" to make it work. In a side note: it can be somewhat confusing that there is data-values , data-values-url but data-value-subject. Shouldn't there be an s / plural too?

s-tittel commented 2 months ago

Glad that it works now. Thanks for the hint regarding the plural "s". I just released version 1.4.5 with the respective change and updated the docs. The attribute "valueSubject" is now deprecated but will still be supported for some time.

ULB-Darmstadt / shacl-form

data-values not working #15