A Three-Part View on Solid Web Forms

Ieben Smessaert


A Three-Part View on Solid Web Forms

Ieben Smessaert

  1. Problem Statement
  2. High-Level Architecture
  3. Form
  4. Shape
  5. Footprint
  6. Evaluation
  7. Conclusion

Problem Statement: Controllability & Decentralization

Problem Statement: Controllability & Decentralization

Problem Statement: Multiple Viewing Environments

Problem Statement: Multiple Viewing Environments

Problem Statement: Reuse Existing Forms

Problem Statement: Reuse Existing Forms

Problem Statement: Prefill Data

Problem Statement: Prefill Data

  1. Problem Statement
  2. High-Level Architecture
  3. Form
  4. Shape
  5. Footprint
  6. Evaluation
  7. Conclusion

High-Level Architecture

Traditional single structure where all the data is defined using a single vocabulary

Three-part view, constisting of a form (for display), shape (for validation), and footprint (for reasoning) part

  1. Problem Statement
  2. High-Level Architecture
  3. Form
  4. Shape
  5. Footprint
  6. Evaluation
  7. Conclusion

Drag-And-Drop Form Generator

Declarative Form Renderer

Display part not tied to one rendering environment

FormRenderer

Dataset
resource

N3 conversion
rules resource

 Form description 
resource

FormRenderer

FormRenderer

using HTML in the browser

FormCli

text-based via the command line

  1. Problem Statement
  2. High-Level Architecture
  3. Form
  4. Shape
  5. Footprint
  6. Evaluation
  7. Conclusion

Schema Alignment

  1. Problem Statement
  2. High-Level Architecture
  3. Form
  4. Shape
  5. Footprint
  6. Evaluation
  7. Conclusion

Declarative Submission With Reasoning

        @prefix ex: <http://example.org/> .
        @prefix pol: <https://www.example.org/ns/policy#> .
        @prefix fno: <https://w3id.org/function/ontology#>.
        {
          ?id ex:event ex:Submit.
        } => {
          ex:HttpPolicy pol:policy [
            a fno:Execution ;
            fno:executes ex:httpRequest ;
            ex:method "POST" ;
            ex:url <https://httpbin.org/post> ;
            ex:contentType "application/ld+json"
          ].
        }.

Uniform Reasoner Interface

        import { Quad } from '@rdfjs/types';
        {
        export interface IQueryOptions {
          blogic?: boolean;
          outputType?: 'string' | 'quads'
          output?: undefined |'derivations'|'deductive_closure'|'deductive_closure_plus_rules'|
'grounded_deductive_closure_plus_rules'
        }
        declare module "eye-mock" {
          export function n3reasoner(data: Quad[] | string, query?: Quad[] | string | undefined,
 options?: IQueryOptions): Promise<Quad[] | string>;
        }

Uniform Reasoner
Interface

  1. Problem Statement
  2. High-Level Architecture
  3. Form
  4. Shape
  5. Footprint
  6. Evaluation
  7. Conclusion

Evaluation

User Feedback

The FormGenerator app is easy to use, especially because of the drag-and-drop functionality

The FormRenderer app is straightforward to use, easy to use, and clear

I did not notice that the app is using Solid and Linked Data behind the scenes

I was unaware that schema alignment tasks were being performed

Evaluation

  1. Problem Statement
  2. High-Level Architecture
  3. Form
  4. Shape
  5. Footprint
  6. Evaluation
  7. Conclusion

Demo?

Open-Source Contributions

Conclusion

Conclusion: Controllability & Decentralization

Conclusion: Controllability & Decentralization

Conclusion: Multiple Viewing Environments

Conclusion: Multiple Viewing Environments

Conclusion: Reuse Existing Forms

Conclusion: Reuse Existing Forms

Conclusion: Prefill Data

Conclusion: Prefill Data

https://formgenerator.smessie.com/

https://formrenderer.smessie.com/

https://github.com/smessie/FormCli

https://tas.smessie.com/

https://reasoner.smessie.com/

Ieben.Smessaert@UGent.be

Supervisors: Ruben Verborgh,

                    Ruben Taelman

Counsellors: Patrick Hochstenbach,

                    Pieter Colpaert