KeyValue

The KeyValue field makes it easy to edit flat key-value pairs stored in JSON format in the database.

# app/avo/resources/user.rb
field :meta, as: :key_value

By default, users can edit keys and values, add and delete rows, and reorder rows by dragging. Labels use Avo's translations, suggestions are off, and the field is hidden on the Index view.

Customize the labels

Set key_label and value_label to rename the column headers. Use action_text, delete_text, and reorder_text to change the add, delete, and drag-handle tooltips.

# app/avo/resources/user.rb
field :meta,
  as: :key_value,
  key_label: "Meta key",
  value_label: "Meta value",
  action_text: "New item",
  delete_text: "Remove item",
  reorder_text: "Move item"

Suggest common keys and values

Since avo >= v4.3.1

If your users keep typing the same keys, pass suggestions to offer them in a dropdown as the user types. Give a hash to also suggest values for each key. Once a row has a key, its value input suggests that key's values. Users can pick with the mouse or the arrow keys and Enter.

# app/avo/resources/user.rb
field :headers,
  as: :key_value,
  suggestions: {
    "Content-Type" => ["application/json", "text/html"],
    "Accept" => ["application/json", "*/*"],
    "Authorization" => []
  }

Suggestions are only hints. Nothing is added to the record unless the user picks or types it, so an ignored suggestion never saves as an empty entry like {"Content-Type": ""}.

If you only want to suggest keys, pass an array. If the suggestions depend on the record, pass a block.

# app/avo/resources/user.rb
field :headers, as: :key_value, suggestions: ["Content-Type", "Accept"]

# app/avo/resources/user.rb
field :headers, as: :key_value, suggestions: -> { record.default_headers }

Suggestions don't show on keys or values whose editing is disabled, and keys already used by another row aren't suggested again.

Enforce restrictions

If users should only fill in values for existing keys, set disable_editing_keys to true. This also prevents adding rows. Set disable_deleting_rows to keep the existing rows in place.

# app/avo/resources/user.rb
field :meta,
  as: :key_value,
  disable_editing_keys: true,
  disable_deleting_rows: true

To prevent changes to values instead, use disable_editing_values. To prevent new rows without locking existing keys, use disable_adding_rows.

Avo applies the row and value restrictions again when the form is saved, so editing the submitted value directly cannot bypass them.

To disable key and value editing, adding rows, and deleting rows together, set disabled to true.

# app/avo/resources/user.rb
field :meta, as: :key_value, disabled: true

Common field options

For options shared with other field types, see Common field options.