FormsReadme.md

Welcome to solidUI Forms

Forms are what we call the code part of solid-ui which takes the User Interface ontology at http://www.w3.org/ns/ui and makes it usable for developers. As its name suggests, Forms are used for rendering WebApp Frontend elements. For example, http://www.w3.org/ns/ui#Choice will translate to something like the following:

<div id=dropDownDiv>
    <div id=labelOfDropDown> </div>
    <div id=selectDiv>
        <select id=dropDownSelect>
            <option> ....
        </select>
    </div>
</div>

A few starting points

There are different documentation entry points for the topic.

To get you started with Forms, we have the forms-intro. If you're asking yourself how Forms fit into the Solid ecosystem, head over to form-ecosystem.

Sir Tim Berners-Lee gave a talk about Forms to the SolidOS team end of 2021. His slides are online here, while a recording of the talk is on the SolidOS pod.

Creating your own Form using Turtle

In the form-playground (code here), you can create your own Form to render a frontend for some given Turtle.

Code examples

To make use of Forms, you need to use solid-ui. Head over to the solid-ui readme for some how-to guides on how to use it in npm or as a html <script>.

Once you are set up with the code, take a look at some examples over at solid-ui/Documentation. The examples there are also deployed on Git Pages:

• Basic Form Demo
• WebID profile Demo
• ui:Form and ui:Group examples
• ui:Classifier and ui:Options example
• ui:Choice example
• if you want, you can try to wrap your head around a rendering of the entire UI vocabulary (Scroll to the far right if all you see is a column or two of plain text...)

Most interesting may be how it is all wired together in the test-form.js, while the code for the form itself is mostly under solid-ui/src/widgets/forms.js.

Running or testing it locally

Locally you can setup your own test of forms. All you need is the /Documentation/form-examples folders and the test-form.js.

1. First build solid-ui locally and copy it to /Documentation/form-examples Run this instruction which will do all that for you.

npm run build-form-examples

2. Use the newly build solid-ui (called main.js) in your html. You need to use the new build main.js:

• uncommenting the usage of the main.js script; Example here
• commenting out the mashlib.js usage. Example here

3. Use your own rad data and form Switch out the input and target (form and raw data) links. Example here

4. Run a local server For example run npx vitein the Documentation folder and the navigate to something like: http://localhost:3000/form-examples/profile-demo.html

Spin-offs & further examples

• Jeff's solid-ui-components is a different take on the UI vocabulary
• Timea's Solid Hello Worlds is a demo implementing both Jeff's lib and solid-ui Forms in one demo