在带有羊驼毛的阵列中使用颜色选择器？

Question

I have been trying to use a colorpicker in an array (using Alpaca ) without success.

This may be my "issue" but I've been wrestling with it for a few hours now and I am stumped. I've got a stripped down jsfiddle here which demonstrates the issue: I am able to create a colorpicker – but the same code does not work when in an array.

Am I misunderstanding what an Alpaca array field can contain?

---

Example code from the jsfiddle:

  var test = {
  view: 'bootstrap-edit-horizontal',
  schema: {
    "title": "Can't put a color picker in array?",
    "type": "object",
    "properties": {
      "testColorPicker": {
        "type": "string",
        "default": "#ff0000"
      },
      "categories": {
        "type": "array",
        "items": {
          "title": "Category",
          "type": "object",
          "properties": {
            "categoryID": {
              "type": "string",
              "title": "Category ID"
            },
            "categoryColor": {
              "type": "string",
              "title": "Where is my color picker?"
            }
          }

        }
      }
    }
  },
  options: {
    fields: {
      "testColorPicker": {
        "type": "colorpicker",
        "label": "Test Color"
      },
      "category": {
        "type": "object",
        "items": {
          "categoryID": {
            "label": "Category ID"
          },
          "categoryColor": {
            "type": "colorpicker",
            "label": "Category Color"
          }
        }
      }
    }
  }
};

$('#form').alpaca(test);

Answer 1

Finally figured this out. Wish there was aa more active Alpaca dev community and that the documentation was just a little bit more detailed about how options and views should be structured and how to specify parameters for fields like colorpicker .

Anyway: working fiddle: https://jsfiddle.net/ut8wgtk5/60/

var data = {
    view: {
        "parent": "bootstrap-edit-horizontal"
    },
    schema: {
        "title": "Test",
        "type": "object",
        "properties": {
            "testColorPicker": {
                "type": "string",
                "default": "#000000"
            },
            "testSummernote": {
                "type": "string"
            },

            "testArray": {
                "type": "array",
                "title": "Array",
                "items": {
                    "title": "Array Item",
                    "type": "object",
                    "properties": {
                        "categorySummernote": {
                            "type": "string",
                        },
                        "categoryColor": {
                            "type": "string",
                            "default": "#000000"
                        }
                    }
                },
            }

        }
    },
    options: {
        "fields": {
            "testColorPicker": {
                "type": "colorpicker",
                "component": true,
                "label": "Test Color",
                useAlpha: false
            },
            "testSummernote": {
                "label": "Test Summernote",
                "type": "summernote",
                "summernote": {
                    "toolbar": [
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['font', ['strikethrough', 'superscript', 'subscript']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']]
                    ]
                }
            },
            "testArray": {
                "toolbarSticky": true,
                "actionbarStyle": "bottom",
                "label": "Array",
                "items": {
                    "fields": {
                        "categorySummernote": {
                            "label": "Test Summernote",
                            "type": "summernote",
                            "summernote": {
                                "toolbar": [
                                    ['style', ['bold', 'italic', 'underline', 'clear']],
                                    ['font', ['strikethrough', 'superscript', 'subscript']],
                                    ['fontsize', ['fontsize']],
                                    ['color', ['color']],
                                    ['para', ['ul', 'ol', 'paragraph']],
                                    ['height', ['height']]
                                ]
                            }
                        },
                        "categoryColor": {
                            "type": "colorpicker",
                            "component": true,
                            "label": "Test Color"
                        }
                    }
                }
            }
        }
    }
};

$('#form').alpaca(data);