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

issue with arrays and populating previous values... #35

Open justbill2020 opened 7 years ago

justbill2020 commented 7 years ago

first of all i'm thrilled you've picked up this project and have not allowed it to go stale... i have the most current version of your master branch with the latest commit as the dev branch on our forked repo (forked from joshfire/jsonform...) We're using this in the smart-mirror project for the remote configUI. The values of the array within light.setup[].targets[] doesn't populate as you will see when you copy and paste this into the playground please help.

{
    "schema": {
        "light": {
            "type": "object",
            "title": "Lights Settings",
            "properties": {
                "settings": {
                    "type": "object",
                    "properties": {
                        "hueIp": {
                            "type": "string",
                            "title": "Hue Light IP Address"
                        },
                        "hueUsername": {
                            "type": "string",
                            "title": "Hue Light Username"
                        }
                    }
                },
                "setup": {
                    "type": "array",
                    "title": "Setup",
                    "items": {
                        "type": "object",
                        "properties": {
                            "name": {
                                "type": "string",
                                "title": "name"
                            },
                            "targets": {
                                "type": "array",
                                "title": "targets",
                                "items": {
                                    "type": "object",
                                    "properties": {
                                        "desc":{
                                          "type":"string",
                                          "title":"Description"
                                        },
                                        "lightType": {
                                            "type": "string",
                                            "title": "type",
                                            "enum": [
                                                "hyperion",
                                                "hue"
                                            ]
                                        },
                                        "ip": {
                                            "type": "string",
                                            "title": "ip"
                                        },
                                        "id": {
                                            "type": "integer",
                                            "title": "id"
                                        },
                                        "port": {
                                            "type": "string",
                                            "title": "port"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    "form":[
        {
          "type":"fieldset",
          "expandable":true,
          "title":"Light Settings",
          "order":0,
          "items":[
            "light.settings",
            {
              "type": "fieldset",
              "title": "Setup",
              "items": [
                {
                  "type":"tabarray",
                  "items": [
                    {
                      "type":"section",
                      "legend":"{{value}}",
                      "items":[   
                          {
                            "key":"light.setup[].name",
                            "valueInLegend":true
                          },
                          {
                            "type":"tabarray",
                            "title":"Targets",
                            "items":[
                              {
                                    "type": "selectfieldset",
                                    "key": "light.setup[].targets[].lightType",
                                    "legend":"Item {{idx}}",
                                    "titleMap":{
                                        "hue":"Hue",
                                        "hyperion":"Hyperion"
                                    },
                                    "items": [
                                      {
                                        "type": "section",
                                        "items":[
                                          "light.setup[].targets[].id"
                                        ]
                                      },
                                      {
                                        "type": "section",
                                        "items":[
                                          "light.setup[].targets[].ip",
                                          "light.setup[].targets[].port"
                                        ]
                                      }
                                  ]

                              }
                            ]
                          }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      "value":{
        "light" : {
        "settings" : {
            "hueIp" : "",
            "hueUsername" : ""
        },
        "setup" : [
            {
                "name" : "parlor",
                "targets" : [
                    {
                        "lightType" : "hyperion",
                        "ip" : "",
                        "port" : "19444"
                    },
                    {
                        "lightType" : "hue",
                        "id" : 1
                    }
                ]
            },
            {
                "name" : "bath",
                "targets" : [
                    {
                        "lightType" : "hue",
                        "id" : 3
                    }
                ]
            }
        ]
    }
  }
}
ulion commented 7 years ago

it seems the "bath" tab not populated too.

ulion commented 7 years ago

at least this fixed part of the issue, you have to specify the "key" to help the form to locate your array value. @justbill2020

{
    "schema": {
        "light": {
            "type": "object",
            "title": "Lights Settings",
            "properties": {
                "settings": {
                    "type": "object",
                    "properties": {
                        "hueIp": {
                            "type": "string",
                            "title": "Hue Light IP Address"
                        },
                        "hueUsername": {
                            "type": "string",
                            "title": "Hue Light Username"
                        }
                    }
                },
                "setup": {
                    "type": "array",
                    "title": "Setup",
                    "items": {
                        "type": "object",
                        "properties": {
                            "name": {
                                "type": "string",
                                "title": "name"
                            }
                        }
                    }
                }
            }
        }
    },
    "form":[
        {
          "type":"fieldset", 
          "expandable":true,
          "title":"Light Settings",
          "order":0,
          "items":[
            "light.settings",
            {
              "type": "fieldset", 
              "title": "Setup", 
              "items": [
                {
                  "key":"light.setup",
                  "type":"array",
                  "items": [
                    {
                      "type":"section",
                      "legend":"{{value}}",
                      "items":[   
                          {
                            "key":"light.setup[].name",
                            "valueInLegend":true
                          }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      "value":{
        "light" : {
        "settings" : {
            "hueIp" : "",
            "hueUsername" : ""
        },
        "setup" : [
            {
                "name" : "parlor",
                "targets" : [
                ]
            },
            {
                "name" : "bath",
                "targets" : [
                    {
                        "lightType" : "hue",
                        "id" : 3
                    }
                ]
            }
        ]
    }
  }
}