Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
epitomus opened this issue Aug 14, 2015 · 9 comments
Closed

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

epitomus opened this issue Aug 14, 2015 · 9 comments

Comments

@epitomus
Copy link

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
Copy link
Author

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
Copy link
Author

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"
    }
  ]
}

@epitomus epitomus reopened this Aug 17, 2015
@ulion
Copy link
Owner

ulion commented Aug 17, 2015

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
#22 (comment).

Ulion

@epitomus
Copy link
Author

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
Copy link
Owner

ulion commented Aug 17, 2015

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
#22 (comment).

Ulion

@epitomus
Copy link
Author

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

@epitomus
Copy link
Author

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

@ulion
Copy link
Owner

ulion commented Aug 17, 2015

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
#22 (comment).

Ulion

@ulion
Copy link
Owner

ulion commented Aug 17, 2015

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
#22 (comment).

Ulion

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ulion @epitomus