Missing array brackets [] on array items when using a custom field type

[domeales-paloit]

Hi there,

Still loving this library!

I have created a custom field type and I am attempting to get it working in an array type.

The issue is that the id and name attributes of the input field generated do no contain the array brackets [x] and so everything is a bit confused.

I have something like:

JSONForm.fieldTypes['mediaitem-doc'] = {
    template: '<i class="mediaitem-doc-icon fa-solid fa-fa-question-circle" style="display:none"></i>' +
        '<span class="mediaitem-doc-name" style="display:none"></span>' +
        '<a href="#" class="button mediaitem-doc-upload">Select document</a>' +
        '<a href="#" class="mediaitem-doc-remove" style="display:none">Remove document</a>' +
        '<input type="hidden" name="<%=node.key%>" value="" ' +
        'id="<%= id %>"' +
        '<%= (node.required && (node.schemaElement.type !== "boolean") ? " required=\'required\'" : "") %>' +
        '>',
    fieldtemplate: true,
    inputfield: true,
    array: false,
    onInsert: function (evt, node) {
       /* lots of stuff to bind the events to the button and link */
    }
};

When the type is used in an array:

var formConfig = {
    "form": [
        {
            "type": "fieldset",
            "title": "General",
            "items":
            {
                "key": "impactDocumentsCmsIds",
                "title": "Impact Documents",
                "type": "array",
                "items": {
                    "key": "impactDocumentsCmsIds",
                    "type": "mediaitem-doc"
                },
                "draggable": false,
            }
        }
    ],
    "schema": {
        "impactDocumentsCmsIds": {
            "minItems": 1,
            "type": "array",
            "items": {
                "minimum": 1,
                "type": "integer",
                "format": "int32"
            },
            "required": true
        }
    }
};

Have I got something wrong in the template? I have scanned the library code for how the id and name fields are being created internally and I can't seem to see how to get the array brackets [x] added.

The generated HTML for <div class="controls"> looks like this:

<div id="jsonform-1-elt-impactDocumentsCmsIds">
  <ul class="_jsonform-array-ul" style="list-style-type:none;">
    <li data-idx="0">
      <div class="form-group jsonform-error-impactDocumentsCmsIds jsonform-required">
        <label for="jsonform-1-elt-impactDocumentsCmsIds">impactDocumentsCmsIds</label>
        <div class="controls">
          <i class="mediaitem-doc-icon fa-solid fa-fa-question-circle" style="display:none"></i>
          <span class="mediaitem-doc-name" style="display:none"></span>
          <a href="#" class="button mediaitem-doc-upload">Select document</a>
          <a href="#" class="mediaitem-doc-remove" style="display:none">Remove document</a>
          <input type="hidden" name="impactDocumentsCmsIds" value="" id="jsonform-1-elt-impactDocumentsCmsIds">
          <span class="help-block jsonform-errortext" style="display:none;"></span>
        </div>
      </div>
      <span class="_jsonform-array-buttons">
        <a href="#" class="btn btn-default _jsonform-array-deletecurrent disabled">
          <i class="glyphicon glyphicon-minus-sign" title="Delete current"></i></a></span>
    </li>
  </ul><span class="_jsonform-array-buttons"><a href="#" class="btn btn-default _jsonform-array-addmore"><i
        class="glyphicon glyphicon-plus-sign" title="Add new"></i></a> <a href="#"
      class="btn btn-default _jsonform-array-deletelast disabled"><i class="glyphicon glyphicon-minus-sign"
        title="Delete last"></i></a></span>
</div>

Can anyone help with this?

Thanks!

[domeales-paloit]

I worked it out... I was missing the [] on the items key in the form config:

                "items": {
                    "key": "impactDocumentsCmsIds[]",
                    "type": "mediaitem-doc"
                },