search

ulion / jsonform

Build forms from JSON Schema. Easily template-able. Compatible with Twitter Bootstrap out of the box.
http://ulion.github.io/jsonform/playground/
MIT License
49 stars 27 forks source link

selectfieldset doesn't support customising the fields in the form #22

Closed epitomus closed 9 years ago

epitomus commented 9 years ago

If you create a customfieldset, you cannot have the fields present in the form section as they are created dynamically. If you do, it causes name clashes, and will also show the field all the time.

{
  "schema": {
    "choice": {
      "type": "string",
      "enum": [ "text", "cat" ]
    },
    "text": {
      "type": "string",
      "title": "Text"
    },
    "category": {
      "type": "string",
      "title": "Category",
      "enum": [
        "Geography",
        "Entertainment",
        "History",
        "Arts",
        "Science",
        "Sports"
      ]
    }
  },
  "form": [
    {
      "type": "selectfieldset",
      "key": "choice",
      "title": "Make a choice",
      "titleMap": {
        "text": "Search by text",
        "cat": "Search by category"
      },
      "items": [
        "text",
        "category"
      ]
    },
    {
      "type": "text",
      "key": "category",
      "append": "today"
    },
    {
      "type": "submit",
      "value": "Submit"
    }
  ]
}
epitomus commented 9 years ago

Not an issue, you can add extra information in the items. For reference, the following json does what I want:

{
  "schema": {
    "choice": {
      "type": "string",
      "enum": [ "text", "cat" ]
    },
    "text": {
      "type": "string",
      "title": "Text"
    },
    "category": {
      "type": "string",
      "title": "Category",
      "enum": [
        "Geography",
        "Entertainment",
        "History",
        "Arts",
        "Science",
        "Sports"
      ]
    }
  },
  "form": [
    {
      "type": "selectfieldset",
      "key": "choice",
      "title": "Make a choice",
      "titleMap": {
        "text": "Search by text",
        "cat": "Search by category"
      },
      "items": [
        {
          "key": "text",
          "append": "today"
        },
        {
          "key": "category"
        }
      ]
    },
    {
      "type": "submit",
      "value": "Submit"
    }
  ]
}
epitomus commented 9 years ago

Hmm, either there is am actual problem here or I'm missing something obvious. Hope it's the second option...

Using object types to represent sub-fields. There's 2 options, put the definition under "items" and specify the key in dot-notation which means the sub-fields don't get their form definitions:

 "form": [
    {
      "items": [
        {
          "key": "text",
        },
        {
          "key": "text.text1",
          "append": "today"
        },
        {
          "key": "text.text2",
          "append": "tomorrow"
        },
        {
          "key": "category"
        }
      ]
    }
  ]

Or nest the sub-fields under the items, which means the fields get their definitions, but are shown twice as the parent is listed in the items too.

  "form": [
    {
      "type": "selectfieldset",
      "key": "choice",
      "title": "Make a choice",
      "titleMap": {
        "text": "Search by text",
        "cat": "Search by category"
      },
      "items": [
        {
          "key": "text",
          "items": [
            {
              "key": "text.text1",
              "append": "today"
            },
            {
              "key": "text.text2",
              "append": "tomorrow"
            },
            ]
        },
        {
          "key": "category"
        }
      ]
    },
    {
      "type": "submit",
      "value": "Submit"
    }
  ]

Complete examples. Reference fields in dot-notation under in the form items:

{
  "schema": {
    "choice": {
      "type": "string",
      "enum": [ "text", "cat" ]
    },
    "text": {
      "type": "object",
      "properties": {
        "text1": {
          "type": "string",
          "title": "Text1"
        },
        "text2": {
          "type": "string",
          "title": "Text2"
        }
      }
    },
    "category": {
      "type": "string",
      "title": "Category",
      "enum": [
        "Geography",
        "Entertainment",
        "History",
        "Arts",
        "Science",
        "Sports"
      ]
    }
  },
  "form": [
    {
      "type": "selectfieldset",
      "key": "choice",
      "title": "Make a choice",
      "titleMap": {
        "text": "Search by text",
        "cat": "Search by category"
      },
      "items": [
        {
          "key": "text",
        },
        {
          "key": "text.text1",
          "append": "today"
        },
        {
          "key": "text.text2",
          "append": "tomorrow"
        },
        {
          "key": "category"
        }
      ]
    },
    {
      "type": "submit",
      "value": "Submit"
    }
  ]
}

Nest sub-fields in an item:[]

{
  "schema": {
    "choice": {
      "type": "string",
      "enum": [ "text", "cat" ]
    },
    "text": {
      "type": "object",
      "properties": {
        "text1": {
          "type": "string",
          "title": "Text1"
        },
        "text2": {
          "type": "string",
          "title": "Text2"
        }
      }
    },
    "category": {
      "type": "string",
      "title": "Category",
      "enum": [
        "Geography",
        "Entertainment",
        "History",
        "Arts",
        "Science",
        "Sports"
      ]
    }
  },
  "form": [
    {
      "type": "selectfieldset",
      "key": "choice",
      "title": "Make a choice",
      "titleMap": {
        "text": "Search by text",
        "cat": "Search by category"
      },
      "items": [
        {
          "key": "text",
          "items": [
            {
              "key": "text.text1",
              "append": "today"
            },
            {
              "key": "text.text2",
              "append": "tomorrow"
            },
            ]
        },
        {
          "key": "category"
        }
      ]
    },
    {
      "type": "submit",
      "value": "Submit"
    }
  ]
}
ulion commented 9 years ago

To custom sub items, you only need help of "customFormItems" with "text.text1" and "text.text2" as keys with their form definitions.

2015-08-17 12:24 GMT+08:00 epitomus notifications@github.com:

Hmm, either there is am actual problem here or I'm missing something obvious. Hope it's the second option...

Using object types to represent sub-fields. There's 2 options, put the definition under "items" and specify the key in dot-notation which means the sub-fields don't get their form definitions:

"form": [ { "items": [ { "key": "text", }, { "key": "text.text1", "append": "today" }, { "key": "text.text2", "append": "tomorrow" }, { "key": "category" } ] } ]

Or nest the sub-fields under the items, which means the fields get their definitions, but are shown twice as the parent is listed in the items too.

"form": [ { "type": "selectfieldset", "key": "choice", "title": "Make a choice", "titleMap": { "text": "Search by text", "cat": "Search by category" }, "items": [ { "key": "text", "items": [ { "key": "text.text1", "append": "today" }, { "key": "text.text2", "append": "tomorrow" }, ] }, { "key": "category" } ] }, { "type": "submit", "value": "Submit" } ]

Complete examples. Reference fields in dot-notation under in the form items:

{ "schema": { "choice": { "type": "string", "enum": [ "text", "cat" ] }, "text": { "type": "object", "properties": { "text1": { "type": "string", "title": "Text1" }, "text2": { "type": "string", "title": "Text2" } } }, "category": { "type": "string", "title": "Category", "enum": [ "Geography", "Entertainment", "History", "Arts", "Science", "Sports" ] } }, "form": [ { "type": "selectfieldset", "key": "choice", "title": "Make a choice", "titleMap": { "text": "Search by text", "cat": "Search by category" }, "items": [ { "key": "text", }, { "key": "text.text1", "append": "today" }, { "key": "text.text2", "append": "tomorrow" }, { "key": "category" } ] }, { "type": "submit", "value": "Submit" } ] }

Nest sub-fields in an item:[]

{ "schema": { "choice": { "type": "string", "enum": [ "text", "cat" ] }, "text": { "type": "object", "properties": { "text1": { "type": "string", "title": "Text1" }, "text2": { "type": "string", "title": "Text2" } } }, "category": { "type": "string", "title": "Category", "enum": [ "Geography", "Entertainment", "History", "Arts", "Science", "Sports" ] } }, "form": [ { "type": "selectfieldset", "key": "choice", "title": "Make a choice", "titleMap": { "text": "Search by text", "cat": "Search by category" }, "items": [ { "key": "text", "items": [ { "key": "text.text1", "append": "today" }, { "key": "text.text2", "append": "tomorrow" }, ] }, { "key": "category" } ] }, { "type": "submit", "value": "Submit" } ] }

— Reply to this email directly or view it on GitHub https://github.com/ulion/jsonform/issues/22#issuecomment-131675711.

Ulion

epitomus commented 9 years ago

I've never seen that before, but it works perfectly! I had to look through the jsonform.js file to figure out how it works as I couldn't find any documentation for it.

For the curious, the way you use it is as follows (implementing the example above):

{
  "schema": {
    "choice": {
      "type": "string",
      "enum": [ "text", "cat" ]
    },
    "text": {
      "type": "object",
      "properties": {
        "text1": {
          "type": "string",
          "title": "Text1"
        },
        "text2": {
          "type": "string",
          "title": "Text2"
        }
      }
    },
    "category": {
      "type": "string",
      "title": "Category",
      "enum": [
        "Geography",
        "Entertainment",
        "History",
        "Arts",
        "Science",
        "Sports"
      ]
    }
  },
  "form": [
    {
      "type": "selectfieldset",
      "key": "choice",
      "title": "Make a choice",
      "titleMap": {
        "text": "Search by text",
        "cat": "Search by category"
      },
      "items": [
        {
          "key": "text",
        },
        {
          "key": "category"
        }
      ],
     },
    {
      "type": "submit",
      "value": "Submit"
    }
  ],
  "customFormItems": {
    "text.text1": {
      "append": "today"
    },
    "text.text2": {
      "append": "tomorrow"
    }
  }
}
ulion commented 9 years ago

yes, it's not documented, only in my dev branch here, but also in some of my version of playground examples: e.g. http://ulion.github.io/jsonform/playground/bootstrap3/?example=fields-checkboxes

2015-08-17 13:20 GMT+08:00 epitomus notifications@github.com:

I've never seen that before, but it works perfectly! I had to look through the jsonform.js file to figure out how it works as I couldn't find any documentation for it.

For the curious, the way you use it is as follows (implementing the example above):

{ "schema": { "choice": { "type": "string", "enum": [ "text", "cat" ] }, "text": { "type": "object", "properties": { "text1": { "type": "string", "title": "Text1" }, "text2": { "type": "string", "title": "Text2" } } }, "category": { "type": "string", "title": "Category", "enum": [ "Geography", "Entertainment", "History", "Arts", "Science", "Sports" ] } }, "form": [ { "type": "selectfieldset", "key": "choice", "title": "Make a choice", "titleMap": { "text": "Search by text", "cat": "Search by category" }, "items": [ { "key": "text", }, { "key": "category" } ], }, { "type": "submit", "value": "Submit" } ], "customFormItems": { "text.text1": { "append": "today" }, "text.text2": { "append": "tomorrow" } } }

— Reply to this email directly or view it on GitHub https://github.com/ulion/jsonform/issues/22#issuecomment-131680946.

Ulion

epitomus commented 9 years ago

Really useful! Are there any other top-level directives like form and value?

epitomus commented 9 years ago

Hmm, "disabled": true doesn't seem to work in customFormItems. All the other directives I've tried do...

ulion commented 9 years ago

probably no. if there is, it will in the playground examples.

2015-08-17 13:35 GMT+08:00 epitomus notifications@github.com:

Really useful! Are there any other top-level directives like form and value?

— Reply to this email directly or view it on GitHub https://github.com/ulion/jsonform/issues/22#issuecomment-131684315.

Ulion

ulion commented 9 years ago

then it's not related to customFormItems, must be the specific use case of yours.

please make an issue with full info.

2015-08-17 13:40 GMT+08:00 epitomus notifications@github.com:

Hmm, "disabled": true doesn't seem to work in customFormItems. All the other directives I've tried do...

— Reply to this email directly or view it on GitHub https://github.com/ulion/jsonform/issues/22#issuecomment-131685650.

Ulion