Frontend examples

All examples unless otherwise stated use the following field metadata, as presented in the specification:

[
  {
    "name": "trips",
    "type": "triple-pattern",
    "required": false,
    "size": "1+",
    "description": "Object that represents a mapping of string to string",
    "default": "{\"p\":\"http://www.w3.org/2000/01/rdf-schema#label\"}"
  },
  {
    "name": "mapping",
    "type": "mapping",
    "required": true,
    "size": "2-",
    "description": "Object that represents a mapping of string to string",
    "default": "{\"label\":\"http://www.w3.org/2000/01/rdf-schema#label\"}"
  },
  {
    "name": "string field",
    "type": "string",
    "required": true,
    "size": "2+",
    "description": "A plain text string field",
    "default": ""
  },
  {
    "name": "number field",
    "type": "number",
    "required": true,
    "size": "2+",
    "description": "A number field",
    "default": "2"
  },
  {
    "name": "boolean field",
    "type": "boolean",
    "required": true,
    "size": "2+",
    "description": "A number field",
    "default": "true"
  },
  {
    "name": "password field",
    "type": "password",
    "required": true,
    "size": "2+",
    "description": "A password field"
  },
  {
    "name": "SPARQL query field",
    "type": "sparql-query",
    "required": true,
    "size": "1+",
    "description": "A sparql query field",
    "default": "CONSTRUCT {?S ?P ?O}WHERE{?S ?P ?O}"
  }
]

Example usage with no modifications to defaults

<template lang="pug">
FormBuilder(:fields="example", @input="input", v-model="ex1")
</template>
<script>
// example is the schema. hidden for brevity
export default {
  name: "App",
  components: {
    FormBuilder,
  },
  data() {
    return {
      example,
      ex1: {},
    };
  },
  methods: {
    input(evt) {
      console.log(evt);
    },
  },
};
</script>

Example usage overriding 'string' type component using a v-slot

<template lang="pug">
  FormBuilder(:fields="example", @input="input", v-model="ex1")
    template(v-slot:string="slotProps")
      div(style="background:red;", @click="slotProps.input(slotProps.field.name, 'hardcoded change')") 
        p Click me to change the field value
</template>
<script>
// example is the schema. hidden for brevity
export default {
  name: "App",
  components: {
    FormBuilder,
  },
  data() {
    return {
      example,
      ex1: {},
    };
  },
  methods: {
    input(evt) {
      console.log(evt);
    },
  },
};
</script>

In this example the default component for type 'string' is replaced with a div that when clicked hardcodes a value into the field. This shows that the v-slot override can be used not only to change how a component type looks, but also how it behaves.

Example usage overriding css for a specific type of field

<template lang="pug">
.override
  FormBuilder(:fields="example", @input="input", v-model="ex1")
</template>
<script>
// example is the schema. hidden for brevity
export default {
  name: "App",
  components: {
    FormBuilder,
  },
  data() {
    return {
      example,
      ex1: {},
    };
  },
  methods: {
    input(evt) {
      console.log(evt);
    },
  },
};
</script>
<style>
.override ::v-deep .string {
    background-color: aqua;
}
</style>

This example overrides the CSS while maintaining the behaviour for a specific type of field. In this case, 'string'.

Example usage overriding css for inputs in all types of fields

<template lang="pug">
.override
  FormBuilder(:fields="example", @input="input", v-model="ex1")
</template>
<script>
// example is the schema. hidden for brevity
export default {
  name: "App",
  components: {
    FormBuilder,
  },
  data() {
    return {
      example,
      ex1: {},
    };
  },
  methods: {
    input(evt) {
      console.log(evt);
    },
  },
};
</script>
<style>
.override ::v-deep input {
    background-color: rgb(162, 0, 255);
}
</style>

This example shows that css overriding does not have to be based on a type and can instead target specific elements common to all component types

Example usage for nested forms

<template lang="pug">
  FormBuilder(:fields="nested", @input="input", v-model="ex1")
</template>
<script>
// example is the schema. hidden for brevity
export default {
  name: "App",
  components: {
    FormBuilder,
  },
  data() {
    return {
      nested: [
        {
          name: "Normal String Field",
          type: "string",
          size: "2+",
          description: "A simple field in a nested form",
          default: "",
        },
        {
          name: "Form",
          type: "form",
          required: false,
          size: "1",
          description: "This is a nested form",
          fields: example,
        },
      ],
      ex1: {},
    };
  },
  methods: {
    input(evt) {
      console.log(evt);
    },
  },
};
</script>

This example shows how to create more complex form types by nesting values. In the simplest use case, there is one top level collection and a single child collection of forms.

Example usage for nested forms with more levels of nesting

<template lang="pug">
  FormBuilder(:fields="nested", @input="input", v-model="ex1")
</template>
<script>
export default {
  name: "App",
  components: {
    FormBuilder,
  },
  data() {
    return {
      nested: [
        {
          name: "Turtles",
          type: "form",
          fields: [
            {
              name: "All",
              type: "form",
              fields: [
                {
                  name: "The",
                  type: "form",
                  fields: [
                    {
                      name: "Way",
                      type: "form",
                      fields: [
                        {
                          name: "Down",
                          type: "form",
                          fields: [
                            {
                              name: "right?",
                              type: "boolean",
                              default: "true",
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      ex1: {},
    };
  },
  methods: {
    input(evt) {
      console.log(evt);
    },
  },
};
</script>

This example shows several levels of nesting. Due to the use of recursive FormBuilder components, the number of levels of nesting is infinite. It's turtles all the way down.