How to disable labels for additional properties with react-jsonschema-form?

user_5605365 0
Viewed 1045

I am trying to use this playground to find a schema which will allow me to show an object addable custom properties (basically I want the user to enter an associative array).

When I do this:

{
  "title": "My object",
  "type": "object",
  "additionalProperties":  true
}

I get this

But I don't want the titles "newKey Key" and "newKey" to show.

I tried disabling labels in the uischema

{
  "additionalProperties": {
      "ui:label": false
  }
}

But that only disables them for the values, not the keys

How do I get rid of the "newKey Key"?

react-jsonschema-forms reactjs
2 Answers

I solved this problem using a CSS stylesheet. In the uiSchema, you can give a unique className to the additionalProperties. For example, here I used hidden-title as my additional class:

{
    'uiSchema': {
        "title": "My object",
        "type": "object",
        'additionalProperties': {
            'ui:label': False,
            'classNames': 'hidden-title'
        }
    }
}

Then, your html is rendered with the new className as part of the parent form-group div:

<div class="form-group field field-string hidden-title">
    <div class="row">
        <div class="col-xs-5 form-additional">
            <div class="form-group">
                <label class="control-label" for="root_new-key">new key</label> 
                <input class="form-control" type="text" id="root_new-key" value="new key">
            </div>
        </div>
        <div class="form-additional form-group col-xs-5">
            <input class="form-control" id="root_new-key" label="new key" placeholder="" type="text" value="">
        </div>
        <div class="col-xs-2">
            <button type="button" class="btn btn-danger array-item-remove btn-block" tabindex="-1" style="border: 0px;">
                <i class="glyphicon glyphicon-remove"></i>
            </button>
        </div>
    </div>
</div>

Lastly, we can set our CSS to display: none; for any classes matching the unique className we defined. Note that this new className has only been applied to the additionalProperties of your object, not any pre-defined properties.

.hidden-title label.control-label {
  display: none;
}

The documentation was a little confusing on this point, since it seems to imply that 'ui:label': False will cover both labels. As you pointed out, it only hides the value label (not the key label).

user_50371330

You don't need additionalProperties, use below code:

{
  schema: {
    newKey: {
      type: "string"
    }
  },
  uiSchema: {
    newKey: {
    "ui:widget": "select2",
    "ui:options": {
      label: false
    }
  }
}
user_3492060
Related