layout: display of h1 elements

renevoorburg commented 3 months ago

The display of h1 headings, being the sh:name of sh:NodeShape entities that have a sh:class can be confusing or seemingly (?) inconsistent. Take the example code below. The form will show a h1 header "Aggregation level", which is nice and fine. However, when now a "Has part" is added, the header "Aggregation level" is not shown for this added shape . Expected behaviour is that it is shown here too, in a design identical to the first appearance.

Desired behaviour can be triggered by adding sh:maxCount 1 to the shape having sh:path mdto:bevatOnderdeel (replace placeholder sh:xxxmaxCount 1). Additionally, this changes the display of "Has part" in a way that makes it more consistent and logical for the user.

<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="open"
      data-shape-subject="http://www.example.com/InformatieobjectShape"
      data-shapes="
@prefix sh:      <http://www.w3.org/ns/shacl#> .
@prefix xsd:     <http://www.w3.org/2001/XMLSchema#> .
@prefix rdfs:    <http://www.w3.org/2000/01/rdf-schema#> .
@prefix mdto:    <http://www.nationaalarchief.nl/mdto#> .
@prefix ex:     <http://www.example.com/> .

ex:InformatieobjectShape
    a sh:NodeShape ;
    sh:targetClass mdto:Informatieobject ;
    sh:name 'Informationbject' ;
    sh:property [
        a sh:NodeShape ;
        sh:path mdto:naam ;
        sh:datatype xsd:string ;
        sh:name 'Name' 
    ] ;
    sh:property [
        a sh:NodeShape ;
        sh:path mdto:aggregatieniveau ;
        sh:class mdto:BegripGegevens ;
        sh:minCount 1 ;
        sh:maxCount 1 ;
        sh:name 'Aggregation level' 
    ] ;
    sh:property [
        a sh:NodeShape ;
        sh:path mdto:bevatOnderdeel ;
        sh:class mdto:Informatieobject ;
        sh:xxxmaxCount 1 ;
        sh:name 'Has part' ;
    ] .

ex:BegripGegevensShape
    a sh:NodeShape ;
    sh:targetClass mdto:BegripGegevens ;
    sh:property [
        a sh:NodeShape ;
        sh:path mdto:begripLabel ;
        sh:datatype xsd:string ;
        sh:name 'Label' 
    ] .  
  " ></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>

s-tittel commented 3 months ago

This was a too lax written CSS selector. Please check v1.5.2

renevoorburg commented 3 months ago

Fixed, thanks again!

ULB-Darmstadt / shacl-form

layout: display of h1 elements #22