I am trying to play around with react-jsonschema form of Mozilla.
I have my jsonschema as
{
"definitions": {
"address": {
"type": "object",
"properties": {
"street_address": {
"type": "string"
},
"city": {
"type": "string"
},
"state": {
"type": "string"
}
},
"required": [
"street_address",
"city",
"state"
]
},
"node": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"children": {
"type": "array",
"items": {
"$ref": "#/definitions/node"
}
}
}
}
},
"type": "object",
"properties": {
"billing_address": {
"title": "Billing address",
"$ref": "#/definitions/address"
},
"shipping_address": {
"title": "Shipping address",
"$ref": "#/definitions/address"
},
"tree": {
"title": "Recursive references",
"$ref": "#/definitions/node"
}
}
}
UiSchema as
{
"ui:order": [
"shipping_address",
"billing_address",
"tree"
]
}
Using reorder I can control the order of controls on the ui, but as shipping address has street address,city and state. How can I control the ui:order of these controls, consider I want city to appear first within shipping address, how can I do that using Mozilla React jsonschema form.
You can add order at the shipping address level.
{
"shipping_address": {
"ui:order": [
"city",
"*"
]
},
"ui:order": [
"shipping_address",
"billing_address",
"tree"
]
}
Try #ver01/form here
with schema this:
{
"definitions": {
"address": {
"type": "object",
"properties": {
"street_address": {
"title": "street_address",
"type": "string"
},
"city": {
"title": "city",
"type": "string"
},
"state": {
"title": "state",
"type": "string"
}
},
"required": [
"street_address",
"city",
"state"
]
},
"node": {
"type": "object",
"properties": {
"name": {
"title": "name",
"type": "string"
},
"children": {
"title": "children",
"type": "array",
"items": {
"$ref": "#/definitions/node"
}
}
}
}
},
"type": "object",
"properties": {
"billing_address": {
"title": "Billing address",
"$ref": "#/definitions/address"
},
"shipping_address": {
"title": "Shipping address",
"$ref": "#/definitions/address",
"$vf_opt": {
"option": {
"order": [
"city",
"*"
]
}
}
},
"tree": {
"title": "Recursive references",
"$ref": "#/definitions/node"
}
},
"$vf_opt": {
"option": {
"order": [
"shipping_address",
"billing_address",
"tree"
]
}
}
Related
I have a field called transportation_assistance_needed which if is true, then are_there_transportation_accommodations_needed should either render or be enabled, if it's false then is should either not render or be disabled. I was able to accomplish this logic using if/else however I'm using Retool to render the form and it doesn't support JSON Schema if/else statements. Any idea of what can be the equivalent using dependencies?
"properties": {
"preferred_times": {
"items": {
"type": "string",
"anyOf": [
{
"enum": [
"morning"
],
"title": " Mornings",
"type": "string"
},
{
"title": " Afternoons",
"type": "string",
"enum": [
"afternoon"
]
}
]
},
"type": "array",
"title": "Preferred time(s)",
"uniqueItems": true
},
"preferred_days": {
"items": {
"type": "number",
"anyOf": [
{
"title": " Monday",
"enum": [
1
],
"type": "number"
},
{
"type": "number",
"title": " Tuesday",
"enum": [
2
]
},
{
"type": "number",
"title": " Wednesday",
"enum": [
3
]
},
{
"enum": [
4
],
"type": "number",
"title": " Thursday"
},
{
"enum": [
5
],
"title": " Friday",
"type": "number"
}
]
},
"uniqueItems": true,
"type": "array",
"title": "Preferred day(s)"
},
"transportation_assistance_needed": {
"title": "Is transportation assistance needed?",
"oneOf": [
{
"Title": "Yes",
"const": "Yes"
},
{
"title": "No",
"const": "No"
}
],
"type": "string"
}
},
"type": "object",
"if": {
"properties": {
"transportation_assistance_needed": {
"const": "Yes"
}
}
},
"then": {
"properties": {
"are_there_transportation_accommodations_needed": {
"title": "Are any transportation accommodations needed, like wheelchair accessibility?",
"type": "string"
}
}
}
}
I'm trying to add the collection field (name and family) to my metadata using VSC. Not sure where to begin or how to do it. Any help appreciated. Thanks!
{
"name": "Solflare X NFT",
"symbol": "",
"description": "Celebratory Solflare NFT for the Solflare X launch",
"seller_fee_basis_points": 0,
"image": "https://www.arweave.net/abcd5678?ext=png",
"animation_url": "https://www.arweave.net/efgh1234?ext=mp4",
"external_url": "https://solflare.com",
"attributes": [
{ "trait_type": "web", "value": "yes" },
{ "trait_type": "mobile", "value": "yes" },
{ "trait_type": "extension", "value": "yes" }
],
"collection": { "name": "Solflare X NFT", "family": "Solflare" },
"properties": {
"files": [
{
"uri": "https://www.arweave.net/abcd5678?ext=png",
"type": "image/png"
},
{
"uri": "https://watch.videodelivery.net/9876jkl",
"type": "unknown",
"cdn": true
},
{ "uri": "https://www.arweave.net/efgh1234?ext=mp4", "type": "video/mp4" }
],
"category": "video",
"creators": [
{ "address": "SOLFLR15asd9d21325bsadythp547912501b", "share": 100 }
]
}
}
How can I set json schema validator for next objects?
They all have field account_id, but options is dependent on type.
In case of twitter it has list of tokens, each of those has four fields.
If type is instagram, than each token has only one field in
tokens.
And for facebook type field options must be empty.
{
"type": "twitter",
"account_id": "xyz",
"options": {
"tokens": [{
"access_token": "long string",
"access_token_secret": "long string",
"consumer_key": "long string",
"consumer_secret": "long string"
}]
}
}
{
"type": "instagram",
"account_id": "xyz",
"options": {
"tokens": [{
"access_token": "long string"
}]
}
}
{
"type": "facebook",
"account_id": "xyz",
"options": {}
}
Is it possible to make json schema, that would satisfy those requirements? Even the most simple schema when definition for every type is wrapped in oneOf keywords does not work.
{
"type": "object",
"additionalProperties": false,
"oneOf": [{
"properties": {
"account_id": {
"type": "string",
},
"type": {
"const": "facebook"
},
"options": {
"type": "object",
"additionalProperties": false
}
},
"required": [
"account_id",
"type",
"options"
]
},
{
"type": "object",
"additionalProperties": false,
"properties": {
"account_id": {
"type": "string",
},
"type": {
"const": "twitter"
},
"options": {
"type": "array",
"items": {
"type": "object",
"additionalProperties": false,
"properties": {
"access_token": {
"type": "string"
},
"access_token_secret": {
"type": "string"
},
"consumer_key": {
"type": "string"
},
"consumer_secret": {
"type": "string"
}
},
"required": [
"access_token",
"access_token_secret",
"consumer_key",
"consumer_secret"
]
}
}
},
"required": [
"account_id",
"type",
"options"
]
},
{
"type": "object",
"additionalProperties": false,
"properties": {
"account_id": {
"type": "string",
},
"type": {
"const": "instagram"
},
"options": {
"type": "array",
"items": {
"type": "object",
"additionalProperties": false,
"properties": {
"access_token": {
"type": "string"
}
},
"required": [
"access_token"
]
}
}
},
"required": [
"account_id",
"type",
"options"
]
}
]
}
Thank you for any suggestions!
How can I pass the arrayIndex as a parameter to the function in onClick? Eg:
{
key:"someKey"
type:"array",
items:[
{
"key":"someKey[].itemNo"
},
{
"type":"button",
"onClick":"someFunction(someKey[arrayIndex].itemNo)"
}
]
}
arrayIndex in "condition" works. But in the function, undefined is what I am getting. I am able to access the entire model or the form's data in someFunction (i.e. i can access someKey), but I need access to the particular item in the array(i.e. someKey[index]).
UPDATED as requested:
(Taken from schema form example page)
See the performAction button. I need the email in the button's context to be passed into a function.
Form:
[
{
"key": "comments",
"add": "New",
"style": {
"add": "btn-success"
},
"items": [
"comments[].name",
"comments[].email",
{
"key": "comments[].spam",
"type": "checkbox",
"title": "Yes I want spam.",
"condition": "model.comments[arrayIndex].email"
},
{
"key": "comments[].comment",
"type": "textarea"
},
{
"type":"button",
"onClick":"performAction(comments[arrayIndex].email)",
"title":"Perform Action"
}
]
},
{
"type": "submit",
"style": "btn-info",
"title": "OK"
}
]
Schema:
{
"type": "object",
"title": "Comment",
"required": [
"comments"
],
"properties": {
"comments": {
"type": "array",
"maxItems": 2,
"items": {
"type": "object",
"properties": {
"name": {
"title": "Name",
"type": "string"
},
"email": {
"title": "Email",
"type": "string",
"pattern": "^\\S+#\\S+$",
"description": "Email will be used for evil."
},
"spam": {
"title": "Spam",
"type": "boolean",
"default": true
},
"comment": {
"title": "Comment",
"type": "string",
"maxLength": 20,
"validationMessage": "Don't be greedy!"
}
},
"required": [
"name",
"comment"
]
}
}
}
}
This was added in v1.0.0-alpha.1 with the addition of arrayIndices.
I am using Angular Schema Form to generate input fields for me. I am wondering if there is any way I could customize the input fields by adding IDs. I tried looking at the documentation (https://github.com/Textalk/angular-schema-form/blob/development/docs/index.md), but it doesn't seem like the current version supports it (only adding classes).
I've just done a bit of research and on the "Kitchen Sink" Example on -
http://schemaform.io/examples/bootstrap-example.html
they have used this code
Form:
`[
{
"type": "fieldset",
"title": "Stuff",
"items": [
{
"type": "tabs",
"tabs": [
{
"title": "Simple stuff",
"items": [
{
"key": "name",
"placeholder": "Check the console",
"onChange": "log(modelValue)",
"feedback": "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
},
{
"key": "favorite",
"feedback": false
}
]
},
{
"title": "More stuff",
"items": [
"attributes.eyecolor",
"attributes.haircolor",
{
"key": "attributes.shoulders.left",
"title": "Left shoulder",
"description": "This value is copied to attributes.shoulders.right in the model",
"copyValueTo": [
"attributes.shoulders.right"
]
},
{
"key": "shoesizeLeft",
"feedback": false,
"copyValueTo": [
"shoesizeRight"
]
},
{
"key": "shoesizeRight"
},
{
"key": "invitation",
"tinymceOptions": {
"toolbar": [
"undo redo| styleselect | bold italic | link image",
"alignleft aligncenter alignright"
]
}
},
"things",
"dislike"
]
}
]
}
]
},
{
"type": "help",
"helpvalue": "<hr>"
},
"soul",
{
"type": "conditional",
"condition": "modelData.soul",
"items": [
{
"key": "soulserial",
"placeholder": "ex. 666"
}
]
},
{
"key": "date",
"minDate": "2014-06-20"
},
{
"key": "radio",
"type": "radios",
"titleMap": [
{
"value": "Transistor",
"name": "Transistor <br> Not the tube kind."
},
{
"value": "Tube",
"name": "Tube <br> The tube kind."
}
]
},
{
"key": "radio2",
"type": "radios-inline",
"titleMap": [
{
"value": "Transistor",
"name": "Transistor <br> Not the tube kind."
},
{
"value": "Tube",
"name": "Tube <br> The tube kind."
}
]
},
{
"key": "radiobuttons",
"style": {
"selected": "btn-success",
"unselected": "btn-default"
},
"type": "radiobuttons",
"notitle": true
},
{
"type": "actions",
"items": [
{
"type": "submit",
"style": "btn-info",
"title": "Do It!"
},
{
"type": "button",
"style": "btn-danger",
"title": "Noooooooooooo",
"onClick": "sayNo()"
}
]
}
]`
Schema:
`{
"type": "object",
"required": [
"name",
"shoesizeLeft"
],
"properties": {
"name": {
"title": "Name",
"description": "Gimme yea name lad",
"type": "string",
"pattern": "^[^/]*$",
"minLength": 2
},
"invitation": {
"type": "string",
"format": "html",
"title": "Invitation Design",
"description": "Design the invitation in full technicolor HTML"
},
"favorite": {
"title": "Favorite",
"type": "string",
"enum": [
"undefined",
"null",
"NaN"
]
},
"shoesizeLeft": {
"title": "Shoe size (left)",
"default": 42,
"type": "number"
},
"shoesizeRight": {
"title": "Shoe size (right)",
"default": 42,
"type": "number"
},
"attributes": {
"type": "object",
"title": "Attributes",
"required": [
"eyecolor"
],
"properties": {
"eyecolor": {
"type": "string",
"format": "color",
"title": "Eye color",
"default": "pink"
},
"haircolor": {
"type": "string",
"title": "Hair color"
},
"shoulders": {
"type": "object",
"title": "Shoulders",
"properties": {
"left": {
"type": "string",
"title": "Left"
},
"right": {
"type": "string",
"title": "Right"
}
}
}
}
},
"things": {
"type": "array",
"title": "I like...",
"items": {
"type": "string",
"enum": [
"clowns",
"compiling",
"sleeping"
]
}
},
"dislike": {
"type": "array",
"title": "I dislike...",
"items": {
"type": "string",
"title": "I hate"
}
},
"soul": {
"title": "Terms Of Service",
"description": "I agree to sell my undying <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'>soul</a>",
"type": "boolean",
"default": true
},
"soulserial": {
"title": "Soul Serial No",
"type": "string"
},
"date": {
"title": "Date of party",
"type": "string",
"format": "date"
},
"radio": {
"title": "Radio type",
"type": "string",
"enum": [
"Transistor",
"Tube"
]
},
"radio2": {
"title": "My Second Radio",
"type": "string",
"enum": [
"Transistor",
"Tube"
]
},
"radiobuttons": {
"type": "string",
"enum": [
"Select me!",
"No me!"
]
}
}
}`
From first glance, it seems to generate an ID on the first input field. So I presume it is related to the Key in the form and the title in the Schema.
ID fields are generated from the last segment of the key in old 0.x versions and a combined form name and object path in the next version code for 1.0.0 and beyond.
So from 1.0.0 onward you will have proper unique ids like:
formName--objectName-arrayName-4-property
While a class matching that will also be available along with a version without array positions: formName--objectName-arrayName-property
The combination of unique id and flexible classes should cater to any customisation needs.