@c0ldra1n/svelte-json-schema-form v0.0.7-4
svelte-json-schema-form
Howto
Writing Custom Widgets
Importing widgets
When importing widgets, you must use the *
(general import) identifier.
This is to access both the component itself and its metadata.
<script>
import JSONSchemaForm from "@c0ldra1n/svelte-json-schema-form";
import * as StringWidget from "./string-widget.svlete";
</script>
<JSONSchemaForm widgets="{[StringFormWidget]}" />
Priorities
Custom widgets have priorities over default widgets. Prioritiies within them are determined by the order they are inserted in.
Assigning widgets
It is important that a widget is instantiated from the correct, designated property. The following methods are used to "resolve" the widget from each properties.
If both type
and resolveWidget
are exported, the widget resolver code will first match for type, then execute resolveWidget
.
Type
<script context="module">
export const type = "string";
</script>
type could also be an array if it can support multiple types
<script context="module">
export const type = ["integer", "number"];
</script>
shouldResolve
<script context="module">
export const shouldResolve = (propertyID, schema) => {
if(/*some condition*/){
// the widget will be displayed.
return true;
}else{
// the widget will not be displayed.
return false;
}
}
</script>
Recursive widgets
It is possible to use the resolveWidget
function within a custom widget. Use getContext("@c0ldra1n/svelte-json-schema-form")
to access the function.
<script>
import { getContext } from "svelte";
const { resolveWidget } = getContext("@c0ldra1n/svelte-json-schema-form");
</script>
A note about default
The default
key in JSON schema is retained, but is renamed as defaultValue
during property assignment.
When exporting properties from your custom widget, you should export defaultValue
instead of default
, as shown in the example below.
<script>
export let defaultValue;
</script>