Conditional Rendering for Dynamic Forms

[henrivanovermeire]

Hi all!

Thank your for the tremendous effort in providing this library.
We are currently exploring this tool for use in dynamically generated forms.

How would one approach the situation where a boolean guards the rendering of subforms? (As per the image enclosed).
Write custom javascript as an additional layer on top of the HTML elements for visibility? Or is there a more elegant approach that is directly supported by the library?

Thank you very much!

[achiminator]

Hi @henrivanovermeire ,
I'm not the maintainer, but a SHACL enthusiast :)
For your requirements, you do not need any custom JS components. You can either nest your data in node shapes to create substructures, or you group information using sh:group. The latter is only for display; the former also impacts the data structures. With nodes, you can hide them as long as they are not present.
Have a look at the following turtle, it generates

@prefix ex: <http://example.org/health#> . 
@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#> .
ex:controlstatus_poorly a ex:ControlStatus;
  rdfs:label "Poorly".

ex:controlstatus_well a ex:ControlStatus;
  rdfs:label "Well".

ex:HealthShape a sh:NodeShape;
  sh:name "Health Record";
  sh:property [
      sh:maxCount 1;
      sh:name "Hypertension";
      sh:node ex:HypertensionShape;
      sh:path ex:hyperTension
    ], [
      sh:datatype xsd:boolean;
      sh:maxCount 1;
      sh:name "Atrial Fibrilation";
      sh:path ex:atrialFibrilation
    ], [
      sh:datatype xsd:boolean;
      sh:maxCount 1;
      sh:name "AV Block";
      sh:path ex:avBlock
    ], [
      sh:datatype xsd:boolean;
      sh:group ex:implantGroup;
      sh:maxCount 1;
      sh:name "Pacemaker Installed";
      sh:path ex:paceMaker
    ],[
        sh:name "Valuar Diseases";
        sh:node ex:valuarDiseases;
        sh:maxCount 1;
        sh:path ex:valuarDiseases
    ], [
      sh:datatype xsd:boolean;
      sh:group ex:implantGroup;
      sh:maxCount 1;
      sh:name "ICD";
      sh:path ex:icd
    ];
  sh:targetClass ex:HealthRecord.

ex:valuarDiseases a sh:NodeShape ;
sh:name "Valuar Diseases" ;
sh:property [
    sh:name "Arotic Valve Stenosis";
    sh:datatype xsd:boolean ;
    sh:maxCount 1 ;
    sh:path ex:aroticValveStenosis
    ], [
    sh:name "Mitral Valve Stenosis" ;
    sh:datatype xsd:boolean ;
    sh:maxCount 1 ;
        sh:path ex:mitralValveStenosis
    ] .

ex:HypertensionShape a sh:NodeShape;
  sh:property [
      sh:in (ex:controlstatus_poorly ex:controlstatus_well);
      sh:maxCount 1;
      sh:minCount 1;
      sh:name "Control Status";
      sh:path ex:controlStatus
    ], [
      sh:datatype xsd:integer;
      sh:maxCount 1;
      sh:minCount 1;
      sh:name "Systolic Pressure";
      sh:path ex:systolicPressure
    ], [
      sh:datatype xsd:integer;
      sh:maxCount 1;
      sh:minCount 1;
      sh:name "Diastolic Pressure";
      sh:path ex:diastolicPressure
    ];
  sh:targetClass ex:HypertensionRecord.

ex:implantGroup a sh:PropertyGroup;
  rdfs:label "Implantable Devices".

The difference in nesting with nodes or only using groups is visible in the data:

@prefix ex: <http://example.org/health#>.
@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#>.
[ a ex:HealthRecord;
  ex:avBlock true;
  ex:hyperTension [ a ex:HypertensionRecord;
      ex:controlStatus ex:controlstatus_well;
      ex:diastolicPressure 23;
      ex:systolicPressure 2
    ];
  ex:paceMaker true;
  ex:valuarDiseases [
      ex:aroticValveStenosis true
    ]
].

[s-tittel]

Hi @henrivanovermeire , thanks for the feedback! Personally I like the approach of @achiminator , but if that does not suit your needs, then indeed, JavaScript would be required since there is nothing in the SHACL spec that could be used to derive logic for conditional rendering.

Just as a hint (in case you not already know): you can read and modify the form content because shacl-form is a web component in "open mode". Additionally, shacl-form supports adding CSS classes to form elements that you can define in the SHACL shapes, e.g.

  sh:property [
    sh:datatype     xsd:boolean ;
    sh:maxCount     1 ;
    sh:name         "boolean" ;
    sh:path         ex:guard ;
  ] ;
  sh:property [
    sh:datatype     xsd:boolean ;
    sh:maxCount     1 ;
    sh:name         "boolean" ;
    sh:path         ex:atrialFibrilation ;
    <http://www.w3.org/ns/oa#styleClass> "subform-1" ;
  ] ;

You could then use the class subform-1 to conditionally show/hide these elements, e.g.

const form = document.querySelector('shacl-form')
form.addEventListener('change', () => {
    const guardChecked = form.shadowRoot.querySelector('.property-instance[data-path="http://example.org/guard"] .editor')?.checked
    for (const property of form.shadowRoot.querySelectorAll('.subform-1')) {
      property.style.display = guardChecked ? 'block' : 'none'
    }
})

[s-tittel]

@henrivanovermeire : can we close this?

[claudius108]

Hi!

Waiting for node expressions to be implemented in shacl-engine, I have used the mechanism you described above to calculate a derived property.

Thanks for your work!

Claudius