active_element

0.0.13
Light Mode Dark Mode

Schema

The json_field schema defines the shape of each JSON object contained in your database.

Each model attribute has its own schema definition, each stored in a separate file for easy maintenance.

See the Types documentation for a list of all available types.

The schema definition requires two parameters to be present at the top level:

  • type
  • shape

The type at the top level should always be array or object.

The shape parameter defines the structure of your JSON, either each element within your JSON array or the keys within your JSON object.

type is required for all fields, and shape is required for all array and object fields, either at the top level or recursively at any point in your definition.

Array of strings

An array of string objects can be defined with the following schema:

# config/forms/user/nicknames.yml

---
type: array
shape:
  type: string

You can see this schema in action in the below example:

subject do
  active_element.component.form model: User.new(email: 'user@example.com'),
                                fields: [:email, :nicknames]
end

it { is_expected.to include 'user[nicknames]' }
<div class="form pb-3" id="form-wrapper-active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1">
  <form id="active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1" class="user m-3" action="/_users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="C-G9cmgMpVF0rSQd9l1GV63v39rJkfWFVxFbLQYodTF54IGFbWJXuDCcXCK89Q9w59tXIJN4DNv2yB3B4TQUQA" autocomplete="off" />
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_email">
          Email
          <button type="button"
            style="background: none; border: none; outline: 0; position: absolute;  margin-top: 0.3rem"
            data-bs-toggle="popover"
            data-bs-trigger="focus"
            title="Email"
            data-bs-content="We will use your email address to send your account details.">
            <i class="text-secondary fa-solid fa-circle-info"></i>
          </button>
        </label>
      </div>
      <div class="col">
        <input value="user@example.com" class="form-control my-email-field-class" tabindex="2" label="Email" description="We will use your email address to send your account details." placeholder="Enter your email address, e.g. user@example.com" type="email" name="user[email]" id="user_email" />
      </div>
    </div>
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_nicknames">
          Nicknames
        </label>
        <div>
          <a data-modal-id="#json-modal-active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1-nicknames-json-view"
   id="json-view-modal-trigger-active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1-nicknames-json-view"
   data-json-modal-link="true"
   data-bs-toggle="modal"
   data-bs-target="#json-modal-active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1-nicknames-json-view"
   class="text-decoration-none text-nowrap"
   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
          <div id="json-modal-active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1-nicknames-json-view" class="modal fade"
     tabindex="-1"
     aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="modal-body p-3" data-field-type="modal-body">
                  <div class='json-highlight' style='font-family: monospace;'><span class="kc">null</span></div>
                </div>
                <div class="modal-footer" data-field-type="modal-footer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="col-sm-10 json-field form-group"
     data-data-key="user.nicknames"
     data-field-name="nicknames"
     data-form-id="active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1"
     data-field-id="active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1-json-field-nicknames"
     data-schema-field-id="active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1-json-field-nicknames-schema"
     data-json-view-modal-id="json-modal-active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1-nicknames-json-view"
     data-json-view-modal-trigger-id="json-view-modal-trigger-active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1-nicknames-json-view"
>
        </div>
        <input name="user[nicknames]" value="" id="active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1-json-field-nicknames" autocomplete="off" type="hidden" />
        <input name="__json_field_schemas[user][nicknames]" value="" id="active-element-a385d9fa-7ce9-44d3-9107-ecedefe04da1-json-field-nicknames-schema" autocomplete="off" type="hidden" />
        <input name="__json_fields[]" value="user.nicknames" autocomplete="off" type="hidden" id="user_nicknames" />
        <script type="text/javascript">
          window.ActiveElement = window.ActiveElement || {};
          ActiveElement.jsonData = ActiveElement.jsonData || {};

          ActiveElement.jsonData = {
            ...ActiveElement.jsonData,
            ...{"user.nicknames":{"data":null,"schema":{"type":"array","shape":{"type":"string"}}}}
          };
        </script>
      </div>
    </div>
    <div class="form-group">
      <input type="submit" name="" value="Create User" class="btn btn-success" data-disable-with="Create User" />
      <a data-form-input-type="clear" class="btn btn-primary  btn-secondary ms-2" title="Clear Form" href="#">
        <span class="text-nowrap">
          <span class="button-title">Clear Form</span>
        </span>
      </a>
    </div>
  </form>
</div>
JSON
Clear Form

If you watch the Javascript console in your browser, you can see the internal state updating as you edit the content (this only occurs when ActiveElement.debug is set to true in Javascript).

Pre-defined options

The string type accepts a parameter options which is a list of pre-defined options that will be used to render a select element populated with the defined options:

# config/forms/user/permissions.yml
---
type: array
shape:
  type: string
  options:
  - can_make_coffee
  - can_drink_coffee
  - can_discuss_coffee

We’ll use the schema from the previous example as well and create two separate json_field elements, and this time we’ll pre-populate the nicknames field with some values:

subject do
  active_element.component.form model: User.new(nicknames: ['Buster', 'Coffee Guy']),
                                fields: [:email, :permissions, :nicknames]
end

it { is_expected.to include 'Coffee Guy' }
<div class="form pb-3" id="form-wrapper-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede">
  <form id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede" class="user m-3" action="/_users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="nUOI_s2rXeMKe_WgISUcxPgy3auVU_u8RjUpZOsAM9Sl6WRp4RaMoAKMQGZW4fFXd4RW-fH-zAaGsOZt6BW70w" autocomplete="off" />
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_email">
          Email
          <button type="button"
            style="background: none; border: none; outline: 0; position: absolute;  margin-top: 0.3rem"
            data-bs-toggle="popover"
            data-bs-trigger="focus"
            title="Email"
            data-bs-content="We will use your email address to send your account details.">
            <i class="text-secondary fa-solid fa-circle-info"></i>
          </button>
        </label>
      </div>
      <div class="col">
        <input class="form-control my-email-field-class" tabindex="2" label="Email" description="We will use your email address to send your account details." placeholder="Enter your email address, e.g. user@example.com" type="email" name="user[email]" id="user_email" />
      </div>
    </div>
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_permissions">
          Permissions
        </label>
        <div>
          <a data-modal-id="#json-modal-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-permissions-json-view"
   id="json-view-modal-trigger-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-permissions-json-view"
   data-json-modal-link="true"
   data-bs-toggle="modal"
   data-bs-target="#json-modal-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-permissions-json-view"
   class="text-decoration-none text-nowrap"
   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
          <div id="json-modal-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-permissions-json-view" class="modal fade"
     tabindex="-1"
     aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="modal-body p-3" data-field-type="modal-body">
                  <div class='json-highlight' style='font-family: monospace;'><span class="kc">null</span></div>
                </div>
                <div class="modal-footer" data-field-type="modal-footer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="col-sm-10 json-field form-group"
     data-data-key="user.permissions"
     data-field-name="permissions"
     data-form-id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede"
     data-field-id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-json-field-permissions"
     data-schema-field-id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-json-field-permissions-schema"
     data-json-view-modal-id="json-modal-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-permissions-json-view"
     data-json-view-modal-trigger-id="json-view-modal-trigger-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-permissions-json-view"
>
        </div>
        <input name="user[permissions]" value="" id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-json-field-permissions" autocomplete="off" type="hidden" />
        <input name="__json_field_schemas[user][permissions]" value="" id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-json-field-permissions-schema" autocomplete="off" type="hidden" />
        <input name="__json_fields[]" value="user.permissions" autocomplete="off" type="hidden" id="user_permissions" />
        <script type="text/javascript">
          window.ActiveElement = window.ActiveElement || {};
          ActiveElement.jsonData = ActiveElement.jsonData || {};

          ActiveElement.jsonData = {
            ...ActiveElement.jsonData,
            ...{"user.permissions":{"data":null,"schema":{"type":"array","shape":{"type":"string","options":["can_make_coffee","can_drink_coffee","can_discuss_coffee"]}}}}
          };
        </script>
      </div>
    </div>
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_nicknames">
          Nicknames
        </label>
        <div>
          <a data-modal-id="#json-modal-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-nicknames-json-view"
   id="json-view-modal-trigger-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-nicknames-json-view"
   data-json-modal-link="true"
   data-bs-toggle="modal"
   data-bs-target="#json-modal-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-nicknames-json-view"
   class="text-decoration-none text-nowrap"
   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
          <div id="json-modal-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-nicknames-json-view" class="modal fade"
     tabindex="-1"
     aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="modal-body p-3" data-field-type="modal-body">
                  <div class='json-highlight' style='font-family: monospace;'><span class="p">[</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="s2">"Buster"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="s2">"Coffee Guy"</span><span class="w"><br/>
                    </span><span class="p">]</span></div>
                </div>
                <div class="modal-footer" data-field-type="modal-footer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="col-sm-10 json-field form-group"
     data-data-key="user.nicknames"
     data-field-name="nicknames"
     data-form-id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede"
     data-field-id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-json-field-nicknames"
     data-schema-field-id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-json-field-nicknames-schema"
     data-json-view-modal-id="json-modal-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-nicknames-json-view"
     data-json-view-modal-trigger-id="json-view-modal-trigger-active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-nicknames-json-view"
>
        </div>
        <input name="user[nicknames]" value="" id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-json-field-nicknames" autocomplete="off" type="hidden" />
        <input name="__json_field_schemas[user][nicknames]" value="" id="active-element-ae932a05-ae07-4f54-b5b9-ff4441b7eede-json-field-nicknames-schema" autocomplete="off" type="hidden" />
        <input name="__json_fields[]" value="user.nicknames" autocomplete="off" type="hidden" id="user_nicknames" />
        <script type="text/javascript">
          window.ActiveElement = window.ActiveElement || {};
          ActiveElement.jsonData = ActiveElement.jsonData || {};

          ActiveElement.jsonData = {
            ...ActiveElement.jsonData,
            ...{"user.nicknames":{"data":["Buster","Coffee Guy"],"schema":{"type":"array","shape":{"type":"string"}}}}
          };
        </script>
      </div>
    </div>
    <div class="form-group">
      <input type="submit" name="" value="Create User" class="btn btn-success" data-disable-with="Create User" />
      <a data-form-input-type="clear" class="btn btn-primary  btn-secondary ms-2" title="Clear Form" href="#">
        <span class="text-nowrap">
          <span class="button-title">Clear Form</span>
        </span>
      </a>
    </div>
  </form>
</div>
JSON
JSON
Clear Form

Array of Objects

To define an array of objects, set the type parameter of the array’s shape to object and specify another shape with a list of fields, each with an associated name and type.

The name is used as the object’s key when the input is converted to JSON:

# config/forms/user/family.yml
---
type: array
shape:
  type: object
  shape:
    fields:
    - name: relation
      type: string
      options:
      - Parent
      - Sibling
      - Spouse
    - name: name
      type: string
    - name: date_of_birth
      type: date

Like the previous example, we’ll keep the existing fields we’ve defined to generate a more complex form.

We’ve also introduced a date field here, which generates an HTML5 date input field (see the Types section for more information on each of the available types).

let(:user) do
  User.new(email: 'user@example.com',
           nicknames: ['Buster', 'Coffee Guy'],
           permissions: ['can_drink_coffee'])
end

subject do
  active_element.component.form model: user,
                                fields: [:email, :nicknames, :permissions, :family]
end

it { is_expected.to include 'Spouse' }
<div class="form pb-3" id="form-wrapper-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd">
  <form id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd" class="user m-3" action="/_users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="PjLqIlaMN92PSVEGlk8cPXLK3TgkQSssoiktG4Aiz9yPYVDgQ7e1tnuuwP2tFtR6Fid3PyZz2vnMlJIdVGj-RQ" autocomplete="off" />
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_email">
          Email
          <button type="button"
            style="background: none; border: none; outline: 0; position: absolute;  margin-top: 0.3rem"
            data-bs-toggle="popover"
            data-bs-trigger="focus"
            title="Email"
            data-bs-content="We will use your email address to send your account details.">
            <i class="text-secondary fa-solid fa-circle-info"></i>
          </button>
        </label>
      </div>
      <div class="col">
        <input value="user@example.com" class="form-control my-email-field-class" tabindex="2" label="Email" description="We will use your email address to send your account details." placeholder="Enter your email address, e.g. user@example.com" type="email" name="user[email]" id="user_email" />
      </div>
    </div>
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_nicknames">
          Nicknames
        </label>
        <div>
          <a data-modal-id="#json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-nicknames-json-view"
   id="json-view-modal-trigger-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-nicknames-json-view"
   data-json-modal-link="true"
   data-bs-toggle="modal"
   data-bs-target="#json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-nicknames-json-view"
   class="text-decoration-none text-nowrap"
   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
          <div id="json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-nicknames-json-view" class="modal fade"
     tabindex="-1"
     aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="modal-body p-3" data-field-type="modal-body">
                  <div class='json-highlight' style='font-family: monospace;'><span class="p">[</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="s2">"Buster"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="s2">"Coffee Guy"</span><span class="w"><br/>
                    </span><span class="p">]</span></div>
                </div>
                <div class="modal-footer" data-field-type="modal-footer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="col-sm-10 json-field form-group"
     data-data-key="user.nicknames"
     data-field-name="nicknames"
     data-form-id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd"
     data-field-id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-nicknames"
     data-schema-field-id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-nicknames-schema"
     data-json-view-modal-id="json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-nicknames-json-view"
     data-json-view-modal-trigger-id="json-view-modal-trigger-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-nicknames-json-view"
>
        </div>
        <input name="user[nicknames]" value="" id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-nicknames" autocomplete="off" type="hidden" />
        <input name="__json_field_schemas[user][nicknames]" value="" id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-nicknames-schema" autocomplete="off" type="hidden" />
        <input name="__json_fields[]" value="user.nicknames" autocomplete="off" type="hidden" id="user_nicknames" />
        <script type="text/javascript">
          window.ActiveElement = window.ActiveElement || {};
          ActiveElement.jsonData = ActiveElement.jsonData || {};

          ActiveElement.jsonData = {
            ...ActiveElement.jsonData,
            ...{"user.nicknames":{"data":["Buster","Coffee Guy"],"schema":{"type":"array","shape":{"type":"string"}}}}
          };
        </script>
      </div>
    </div>
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_permissions">
          Permissions
        </label>
        <div>
          <a data-modal-id="#json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-permissions-json-view"
   id="json-view-modal-trigger-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-permissions-json-view"
   data-json-modal-link="true"
   data-bs-toggle="modal"
   data-bs-target="#json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-permissions-json-view"
   class="text-decoration-none text-nowrap"
   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
          <div id="json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-permissions-json-view" class="modal fade"
     tabindex="-1"
     aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="modal-body p-3" data-field-type="modal-body">
                  <div class='json-highlight' style='font-family: monospace;'><span class="p">[</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="s2">"can_drink_coffee"</span><span class="w"><br/>
                    </span><span class="p">]</span></div>
                </div>
                <div class="modal-footer" data-field-type="modal-footer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="col-sm-10 json-field form-group"
     data-data-key="user.permissions"
     data-field-name="permissions"
     data-form-id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd"
     data-field-id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-permissions"
     data-schema-field-id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-permissions-schema"
     data-json-view-modal-id="json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-permissions-json-view"
     data-json-view-modal-trigger-id="json-view-modal-trigger-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-permissions-json-view"
>
        </div>
        <input name="user[permissions]" value="" id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-permissions" autocomplete="off" type="hidden" />
        <input name="__json_field_schemas[user][permissions]" value="" id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-permissions-schema" autocomplete="off" type="hidden" />
        <input name="__json_fields[]" value="user.permissions" autocomplete="off" type="hidden" id="user_permissions" />
        <script type="text/javascript">
          window.ActiveElement = window.ActiveElement || {};
          ActiveElement.jsonData = ActiveElement.jsonData || {};

          ActiveElement.jsonData = {
            ...ActiveElement.jsonData,
            ...{"user.permissions":{"data":["can_drink_coffee"],"schema":{"type":"array","shape":{"type":"string","options":["can_make_coffee","can_drink_coffee","can_discuss_coffee"]}}}}
          };
        </script>
      </div>
    </div>
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_family">
          Family
        </label>
        <div>
          <a data-modal-id="#json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-family-json-view"
   id="json-view-modal-trigger-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-family-json-view"
   data-json-modal-link="true"
   data-bs-toggle="modal"
   data-bs-target="#json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-family-json-view"
   class="text-decoration-none text-nowrap"
   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
          <div id="json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-family-json-view" class="modal fade"
     tabindex="-1"
     aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="modal-body p-3" data-field-type="modal-body">
                  <div class='json-highlight' style='font-family: monospace;'><span class="kc">null</span></div>
                </div>
                <div class="modal-footer" data-field-type="modal-footer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="col-sm-10 json-field form-group"
     data-data-key="user.family"
     data-field-name="family"
     data-form-id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd"
     data-field-id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-family"
     data-schema-field-id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-family-schema"
     data-json-view-modal-id="json-modal-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-family-json-view"
     data-json-view-modal-trigger-id="json-view-modal-trigger-active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-family-json-view"
>
        </div>
        <input name="user[family]" value="" id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-family" autocomplete="off" type="hidden" />
        <input name="__json_field_schemas[user][family]" value="" id="active-element-de3ad2c3-4502-45fd-b3a1-e5c19775b2dd-json-field-family-schema" autocomplete="off" type="hidden" />
        <input name="__json_fields[]" value="user.family" autocomplete="off" type="hidden" id="user_family" />
        <script type="text/javascript">
          window.ActiveElement = window.ActiveElement || {};
          ActiveElement.jsonData = ActiveElement.jsonData || {};

          ActiveElement.jsonData = {
            ...ActiveElement.jsonData,
            ...{"user.family":{"data":null,"schema":{"type":"array","shape":{"type":"object","shape":{"fields":[{"name":"relation","type":"string","options":["Parent","Sibling","Spouse"]},{"name":"name","type":"string"},{"name":"date_of_birth","type":"date"}]}}}}}
          };
        </script>
      </div>
    </div>
    <div class="form-group">
      <input type="submit" name="" value="Create User" class="btn btn-success" data-disable-with="Create User" />
      <a data-form-input-type="clear" class="btn btn-primary  btn-secondary ms-2" title="Clear Form" href="#">
        <span class="text-nowrap">
          <span class="button-title">Clear Form</span>
        </span>
      </a>
    </div>
  </form>
</div>
JSON
JSON
JSON
Clear Form

Focus

So far things are pretty easy to manage, but if we have a user with a large family then the view will quickly become very cluttered and it will be difficult for users to navigate the form.

To keep things manageable, the array type has an extra parameter focus. Use this parameter to specify a list of fields from each object found in the array. The first truthy value (e.g. a non-empty string) found on each field is displayed as a placeholder. You can specify as many fields as you like.

This time we’ll use another JSON column on our User model: extended_family. We’ll populate it with a few more family members and we’ll specify focus on name and estranged. The new field estranged is a boolean, which we’ll use for family members whose name we’ve forgotten.

We’ll use Faker to generate some random data:

# config/forms/user/extended_family.yml
---
type: array
focus:
- name
- estranged
shape:
  type: object
  shape:
    fields:
    - name: relation
      type: string
      options:
      - Cousin
      - Aunt
      - Uncle
    - name: name
      type: string
    - name: date_of_birth
      type: date
    - name: estranged
      type: boolean
let(:user) do
  User.new(
    email: 'user@example.com',
    nicknames: ['Buster', 'Coffee Guy'],
    permissions: ['can_make_coffee', 'can_drink_coffee', 'can_discuss_coffee'],
    extended_family: extended_family
  )
end

let(:extended_family) do
  20.times.map do
    estranged = (rand(3) % 3).zero?
    { name: estranged ? nil : Faker::Name.unique.name,
      relation: ['Cousin', 'Aunt', 'Uncle'].sample,
      date_of_birth: Faker::Date.birthday,
      estranged: estranged }
  end
end

subject do
  active_element.component.form model: user,
                                fields: [:email, :nicknames, :permissions, :extended_family]
end

it { is_expected.to include 'Coffee Guy' }
<div class="form pb-3" id="form-wrapper-active-element-41440414-53e7-440e-a54c-0270e76c9822">
  <form id="active-element-41440414-53e7-440e-a54c-0270e76c9822" class="user m-3" action="/_users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="CeAzTUrrFZ7QuHGAPjPc8dcpRafhuG-XPLgr7Q1IHSm1WiEcLOZoGydBDaZ7uH6zgdzkX7gmAvyh7rRdEGjDvQ" autocomplete="off" />
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_email">
          Email
          <button type="button"
            style="background: none; border: none; outline: 0; position: absolute;  margin-top: 0.3rem"
            data-bs-toggle="popover"
            data-bs-trigger="focus"
            title="Email"
            data-bs-content="We will use your email address to send your account details.">
            <i class="text-secondary fa-solid fa-circle-info"></i>
          </button>
        </label>
      </div>
      <div class="col">
        <input value="user@example.com" class="form-control my-email-field-class" tabindex="2" label="Email" description="We will use your email address to send your account details." placeholder="Enter your email address, e.g. user@example.com" type="email" name="user[email]" id="user_email" />
      </div>
    </div>
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_nicknames">
          Nicknames
        </label>
        <div>
          <a data-modal-id="#json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-nicknames-json-view"
   id="json-view-modal-trigger-active-element-41440414-53e7-440e-a54c-0270e76c9822-nicknames-json-view"
   data-json-modal-link="true"
   data-bs-toggle="modal"
   data-bs-target="#json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-nicknames-json-view"
   class="text-decoration-none text-nowrap"
   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
          <div id="json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-nicknames-json-view" class="modal fade"
     tabindex="-1"
     aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="modal-body p-3" data-field-type="modal-body">
                  <div class='json-highlight' style='font-family: monospace;'><span class="p">[</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="s2">"Buster"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="s2">"Coffee Guy"</span><span class="w"><br/>
                    </span><span class="p">]</span></div>
                </div>
                <div class="modal-footer" data-field-type="modal-footer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="col-sm-10 json-field form-group"
     data-data-key="user.nicknames"
     data-field-name="nicknames"
     data-form-id="active-element-41440414-53e7-440e-a54c-0270e76c9822"
     data-field-id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-nicknames"
     data-schema-field-id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-nicknames-schema"
     data-json-view-modal-id="json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-nicknames-json-view"
     data-json-view-modal-trigger-id="json-view-modal-trigger-active-element-41440414-53e7-440e-a54c-0270e76c9822-nicknames-json-view"
>
        </div>
        <input name="user[nicknames]" value="" id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-nicknames" autocomplete="off" type="hidden" />
        <input name="__json_field_schemas[user][nicknames]" value="" id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-nicknames-schema" autocomplete="off" type="hidden" />
        <input name="__json_fields[]" value="user.nicknames" autocomplete="off" type="hidden" id="user_nicknames" />
        <script type="text/javascript">
          window.ActiveElement = window.ActiveElement || {};
          ActiveElement.jsonData = ActiveElement.jsonData || {};

          ActiveElement.jsonData = {
            ...ActiveElement.jsonData,
            ...{"user.nicknames":{"data":["Buster","Coffee Guy"],"schema":{"type":"array","shape":{"type":"string"}}}}
          };
        </script>
      </div>
    </div>
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_permissions">
          Permissions
        </label>
        <div>
          <a data-modal-id="#json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-permissions-json-view"
   id="json-view-modal-trigger-active-element-41440414-53e7-440e-a54c-0270e76c9822-permissions-json-view"
   data-json-modal-link="true"
   data-bs-toggle="modal"
   data-bs-target="#json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-permissions-json-view"
   class="text-decoration-none text-nowrap"
   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
          <div id="json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-permissions-json-view" class="modal fade"
     tabindex="-1"
     aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="modal-body p-3" data-field-type="modal-body">
                  <div class='json-highlight' style='font-family: monospace;'><span class="p">[</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="s2">"can_make_coffee"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="s2">"can_drink_coffee"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="s2">"can_discuss_coffee"</span><span class="w"><br/>
                    </span><span class="p">]</span></div>
                </div>
                <div class="modal-footer" data-field-type="modal-footer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="col-sm-10 json-field form-group"
     data-data-key="user.permissions"
     data-field-name="permissions"
     data-form-id="active-element-41440414-53e7-440e-a54c-0270e76c9822"
     data-field-id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-permissions"
     data-schema-field-id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-permissions-schema"
     data-json-view-modal-id="json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-permissions-json-view"
     data-json-view-modal-trigger-id="json-view-modal-trigger-active-element-41440414-53e7-440e-a54c-0270e76c9822-permissions-json-view"
>
        </div>
        <input name="user[permissions]" value="" id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-permissions" autocomplete="off" type="hidden" />
        <input name="__json_field_schemas[user][permissions]" value="" id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-permissions-schema" autocomplete="off" type="hidden" />
        <input name="__json_fields[]" value="user.permissions" autocomplete="off" type="hidden" id="user_permissions" />
        <script type="text/javascript">
          window.ActiveElement = window.ActiveElement || {};
          ActiveElement.jsonData = ActiveElement.jsonData || {};

          ActiveElement.jsonData = {
            ...ActiveElement.jsonData,
            ...{"user.permissions":{"data":["can_make_coffee","can_drink_coffee","can_discuss_coffee"],"schema":{"type":"array","shape":{"type":"string","options":["can_make_coffee","can_drink_coffee","can_discuss_coffee"]}}}}
          };
        </script>
      </div>
    </div>
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_extended_family">
          Extended Family
        </label>
        <div>
          <a data-modal-id="#json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-extended_family-json-view"
   id="json-view-modal-trigger-active-element-41440414-53e7-440e-a54c-0270e76c9822-extended_family-json-view"
   data-json-modal-link="true"
   data-bs-toggle="modal"
   data-bs-target="#json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-extended_family-json-view"
   class="text-decoration-none text-nowrap"
   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
          <div id="json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-extended_family-json-view" class="modal fade"
     tabindex="-1"
     aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="modal-body p-3" data-field-type="modal-body">
                  <div class='json-highlight' style='font-family: monospace;'><span class="p">[</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uncle"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1999-07-08"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1998-04-19"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Chantell Prohaska"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uncle"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2001-05-07"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Roland Shanahan DDS"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2002-01-06"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Lanette Hegmann"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uncle"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1972-09-20"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1965-08-04"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Oliver Leffler V"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1960-09-22"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1972-08-28"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1966-12-16"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1975-10-25"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Otha Deckow VM"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uncle"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1970-03-02"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Ariel Kerluke"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1978-06-11"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Vito Zulauf"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2001-05-01"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1973-06-10"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Maryam Williamson"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1992-08-12"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Pres. Mac Buckridge"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1980-07-20"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1966-11-24"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uncle"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1963-06-08"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1987-09-02"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Lenard Hayes"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1972-06-22"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">}</span><span class="w"><br/>
                    </span><span class="p">]</span></div>
                </div>
                <div class="modal-footer" data-field-type="modal-footer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="col-sm-10 json-field form-group"
     data-data-key="user.extendedFamily"
     data-field-name="extended_family"
     data-form-id="active-element-41440414-53e7-440e-a54c-0270e76c9822"
     data-field-id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-extended_family"
     data-schema-field-id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-extended_family-schema"
     data-json-view-modal-id="json-modal-active-element-41440414-53e7-440e-a54c-0270e76c9822-extended_family-json-view"
     data-json-view-modal-trigger-id="json-view-modal-trigger-active-element-41440414-53e7-440e-a54c-0270e76c9822-extended_family-json-view"
>
        </div>
        <input name="user[extended_family]" value="" id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-extended_family" autocomplete="off" type="hidden" />
        <input name="__json_field_schemas[user][extended_family]" value="" id="active-element-41440414-53e7-440e-a54c-0270e76c9822-json-field-extended_family-schema" autocomplete="off" type="hidden" />
        <input name="__json_fields[]" value="user.extended_family" autocomplete="off" type="hidden" id="user_extended_family" />
        <script type="text/javascript">
          window.ActiveElement = window.ActiveElement || {};
          ActiveElement.jsonData = ActiveElement.jsonData || {};

          ActiveElement.jsonData = {
            ...ActiveElement.jsonData,
            ...{"user.extendedFamily":{"data":[{"name":null,"relation":"Uncle","date_of_birth":"1999-07-08","estranged":true},{"name":null,"relation":"Aunt","date_of_birth":"1998-04-19","estranged":true},{"name":"Chantell Prohaska","relation":"Uncle","date_of_birth":"2001-05-07","estranged":false},{"name":"Roland Shanahan DDS","relation":"Aunt","date_of_birth":"2002-01-06","estranged":false},{"name":"Lanette Hegmann","relation":"Uncle","date_of_birth":"1972-09-20","estranged":false},{"name":null,"relation":"Cousin","date_of_birth":"1965-08-04","estranged":true},{"name":"Oliver Leffler V","relation":"Aunt","date_of_birth":"1960-09-22","estranged":false},{"name":null,"relation":"Aunt","date_of_birth":"1972-08-28","estranged":true},{"name":null,"relation":"Aunt","date_of_birth":"1966-12-16","estranged":true},{"name":null,"relation":"Aunt","date_of_birth":"1975-10-25","estranged":true},{"name":"Otha Deckow VM","relation":"Uncle","date_of_birth":"1970-03-02","estranged":false},{"name":"Ariel Kerluke","relation":"Cousin","date_of_birth":"1978-06-11","estranged":false},{"name":"Vito Zulauf","relation":"Aunt","date_of_birth":"2001-05-01","estranged":false},{"name":null,"relation":"Cousin","date_of_birth":"1973-06-10","estranged":true},{"name":"Maryam Williamson","relation":"Aunt","date_of_birth":"1992-08-12","estranged":false},{"name":"Pres. Mac Buckridge","relation":"Aunt","date_of_birth":"1980-07-20","estranged":false},{"name":null,"relation":"Aunt","date_of_birth":"1966-11-24","estranged":true},{"name":null,"relation":"Uncle","date_of_birth":"1963-06-08","estranged":true},{"name":null,"relation":"Aunt","date_of_birth":"1987-09-02","estranged":true},{"name":"Lenard Hayes","relation":"Aunt","date_of_birth":"1972-06-22","estranged":false}],"schema":{"type":"array","focus":["name","estranged"],"shape":{"type":"object","shape":{"fields":[{"name":"relation","type":"string","options":["Cousin","Aunt","Uncle"]},{"name":"name","type":"string"},{"name":"date_of_birth","type":"date"},{"name":"estranged","type":"boolean"}]}}}}}
          };
        </script>
      </div>
    </div>
    <div class="form-group">
      <input type="submit" name="" value="Create User" class="btn btn-success" data-disable-with="Create User" />
      <a data-form-input-type="clear" class="btn btn-primary  btn-secondary ms-2" title="Clear Form" href="#">
        <span class="text-nowrap">
          <span class="button-title">Clear Form</span>
        </span>
      </a>
    </div>
  </form>
</div>
JSON
JSON
JSON
Clear Form

Wrapping Up

Aside from the handful of special parameters for certain Types we’ve covered everything you need to know about defining a JSON object schema.

To wrap things up, we’ll combine all of our schemas into one single object schema and render a form. We’ll call our field user_data and merge all the schemas into a single file. The only thing different about this schema compared to the others is that the top-level type is object instead of array. Otherwise, we’re re-using all of the same mechanisms described above. Each schema was copy & pasted into the new schema under the fields array of the top object and a name was assigned to each one, otherwise they’re completely unchanged.

Since we’re in debug mode for this documentation, the state is logged to the Javascript console each time you modify a form value, so you can see what would be submitted if this form were connected to a real application.

Make sure you read the Controller Parameters section to see how to use Rails StrongParameters in conjunction with ActiveElement JSON fields.

Form

let(:user) do
  User.new(
    email: 'user@example.com',
    user_data: {
      nicknames: ['Buster', 'Coffee Guy'],
      permissions: ['can_make_coffee', 'can_drink_coffee', 'can_discuss_coffee'],
      extended_family: extended_family
    }
  )
end

let(:extended_family) do
  20.times.map do
    estranged = (rand(3) % 3).zero?
    { name: estranged ? nil : Faker::Name.unique.name,
      relation: ['Cousin', 'Aunt', 'Uncle'].sample,
      date_of_birth: Faker::Date.birthday,
      estranged: estranged }
  end
end

subject do
  active_element.component.form model: user, fields: [:email, :user_data]
end

it { is_expected.to include 'Coffee Guy' }
<div class="form pb-3" id="form-wrapper-active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b">
  <form id="active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b" class="user m-3" action="/_users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="M7dXBfKOd6zsdyb2d4HI8DzqPuty-xFgZN4WuKRlatZfIlGZmlOX3bs3Nrnjxp6VX0lMHXnn-sm0cCMs3UE1zA" autocomplete="off" />
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_email">
          Email
          <button type="button"
            style="background: none; border: none; outline: 0; position: absolute;  margin-top: 0.3rem"
            data-bs-toggle="popover"
            data-bs-trigger="focus"
            title="Email"
            data-bs-content="We will use your email address to send your account details.">
            <i class="text-secondary fa-solid fa-circle-info"></i>
          </button>
        </label>
      </div>
      <div class="col">
        <input value="user@example.com" class="form-control my-email-field-class" tabindex="2" label="Email" description="We will use your email address to send your account details." placeholder="Enter your email address, e.g. user@example.com" type="email" name="user[email]" id="user_email" />
      </div>
    </div>
    <div class="row form-fields mb-3">
      <div class="col-sm-3">
        <label for="user_user_data">
          User Data
        </label>
        <div>
          <a data-modal-id="#json-modal-active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b-user_data-json-view"
   id="json-view-modal-trigger-active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b-user_data-json-view"
   data-json-modal-link="true"
   data-bs-toggle="modal"
   data-bs-target="#json-modal-active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b-user_data-json-view"
   class="text-decoration-none text-nowrap"
   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
          <div id="json-modal-active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b-user_data-json-view" class="modal fade"
     tabindex="-1"
     aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="modal-body p-3" data-field-type="modal-body">
                  <div class='json-highlight' style='font-family: monospace;'><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="nl">"nicknames"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="s2">"Buster"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="s2">"Coffee Guy"</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">],</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="nl">"permissions"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="s2">"can_make_coffee"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="s2">"can_drink_coffee"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="s2">"can_discuss_coffee"</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">],</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="nl">"extended_family"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Raisa Dach"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uncle"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1992-10-02"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Mrs. Mohammad Ritchie"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1980-04-15"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1964-01-11"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1972-12-13"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1974-05-02"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1968-02-22"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1969-04-15"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Amb. Kent Wehner"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uncle"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1984-06-22"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uncle"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1990-09-14"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1976-10-14"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1991-02-02"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1985-01-23"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1974-11-07"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Porfirio Hintz"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1974-10-12"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Rep. Clotilde Weber"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uncle"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1996-10-01"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Rev. Robert Bechtelar"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1979-04-25"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Malcolm Kub"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1973-10-19"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Bunny Powlowski"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cousin"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1990-05-26"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Aunt"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1964-02-16"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">},</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">{</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Carolin Leffler"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"relation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uncle"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"date_of_birth"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1986-09-14"</span><span class="p">,</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="nl">"estranged"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"><br/>
                      &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="p">}</span><span class="w"><br/>
                      &nbsp;&nbsp;</span><span class="p">]</span><span class="w"><br/>
                    </span><span class="p">}</span></div>
                </div>
                <div class="modal-footer" data-field-type="modal-footer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="col-sm-10 json-field form-group"
     data-data-key="user.userData"
     data-field-name="user_data"
     data-form-id="active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b"
     data-field-id="active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b-json-field-user_data"
     data-schema-field-id="active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b-json-field-user_data-schema"
     data-json-view-modal-id="json-modal-active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b-user_data-json-view"
     data-json-view-modal-trigger-id="json-view-modal-trigger-active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b-user_data-json-view"
>
        </div>
        <input name="user[user_data]" value="" id="active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b-json-field-user_data" autocomplete="off" type="hidden" />
        <input name="__json_field_schemas[user][user_data]" value="" id="active-element-680e6dc0-d9db-4b4b-b430-61b439d25a6b-json-field-user_data-schema" autocomplete="off" type="hidden" />
        <input name="__json_fields[]" value="user.user_data" autocomplete="off" type="hidden" id="user_user_data" />
        <script type="text/javascript">
          window.ActiveElement = window.ActiveElement || {};
          ActiveElement.jsonData = ActiveElement.jsonData || {};

          ActiveElement.jsonData = {
            ...ActiveElement.jsonData,
            ...{"user.userData":{"data":{"nicknames":["Buster","Coffee Guy"],"permissions":["can_make_coffee","can_drink_coffee","can_discuss_coffee"],"extended_family":[{"name":"Raisa Dach","relation":"Uncle","date_of_birth":"1992-10-02","estranged":false},{"name":"Mrs. Mohammad Ritchie","relation":"Cousin","date_of_birth":"1980-04-15","estranged":false},{"name":null,"relation":"Cousin","date_of_birth":"1964-01-11","estranged":true},{"name":null,"relation":"Aunt","date_of_birth":"1972-12-13","estranged":true},{"name":null,"relation":"Aunt","date_of_birth":"1974-05-02","estranged":true},{"name":null,"relation":"Cousin","date_of_birth":"1968-02-22","estranged":true},{"name":null,"relation":"Aunt","date_of_birth":"1969-04-15","estranged":true},{"name":"Amb. Kent Wehner","relation":"Uncle","date_of_birth":"1984-06-22","estranged":false},{"name":null,"relation":"Uncle","date_of_birth":"1990-09-14","estranged":true},{"name":null,"relation":"Cousin","date_of_birth":"1976-10-14","estranged":true},{"name":null,"relation":"Aunt","date_of_birth":"1991-02-02","estranged":true},{"name":null,"relation":"Aunt","date_of_birth":"1985-01-23","estranged":true},{"name":null,"relation":"Cousin","date_of_birth":"1974-11-07","estranged":true},{"name":"Porfirio Hintz","relation":"Cousin","date_of_birth":"1974-10-12","estranged":false},{"name":"Rep. Clotilde Weber","relation":"Uncle","date_of_birth":"1996-10-01","estranged":false},{"name":"Rev. Robert Bechtelar","relation":"Cousin","date_of_birth":"1979-04-25","estranged":false},{"name":"Malcolm Kub","relation":"Cousin","date_of_birth":"1973-10-19","estranged":false},{"name":"Bunny Powlowski","relation":"Cousin","date_of_birth":"1990-05-26","estranged":false},{"name":null,"relation":"Aunt","date_of_birth":"1964-02-16","estranged":true},{"name":"Carolin Leffler","relation":"Uncle","date_of_birth":"1986-09-14","estranged":false}]},"schema":{"type":"object","shape":{"fields":[{"name":"nicknames","type":"array","shape":{"type":"string"}},{"name":"permissions","type":"array","shape":{"type":"string","options":["can_make_coffee","can_drink_coffee","can_discuss_coffee"]}},{"name":"family","type":"array","shape":{"type":"object","shape":{"fields":[{"name":"relation","type":"string","options":["Parent","Sibling","Spouse"]},{"name":"name","type":"string"},{"name":"date_of_birth","type":"date"}]}}},{"name":"extended_family","type":"array","focus":["name","estranged"],"shape":{"type":"object","shape":{"fields":[{"name":"relation","type":"string","options":["Cousin","Aunt","Uncle"]},{"name":"name","type":"string"},{"name":"date_of_birth","type":"date"},{"name":"estranged","type":"boolean"}]}}}]}}}}
          };
        </script>
      </div>
    </div>
    <div class="form-group">
      <input type="submit" name="" value="Create User" class="btn btn-success" data-disable-with="Create User" />
      <a data-form-input-type="clear" class="btn btn-primary  btn-secondary ms-2" title="Clear Form" href="#">
        <span class="text-nowrap">
          <span class="button-title">Clear Form</span>
        </span>
      </a>
    </div>
  </form>
</div>
JSON
Clear Form

Schema

# config/forms/user/user_data.yml
---
type: object
shape:
  fields:
  - name: nicknames
    type: array
    shape:
      type: string

  - name: permissions
    type: array
    shape:
      type: string
      options:
      - can_make_coffee
      - can_drink_coffee
      - can_discuss_coffee

  - name: family
    type: array
    shape:
      type: object
      shape:
        fields:
        - name: relation
          type: string
          options:
          - Parent
          - Sibling
          - Spouse
        - name: name
          type: string
        - name: date_of_birth
          type: date

  - name: extended_family
    type: array
    focus:
    - name
    - estranged
    shape:
      type: object
      shape:
        fields:
        - name: relation
          type: string
          options:
          - Cousin
          - Aunt
          - Uncle
        - name: name
          type: string
        - name: date_of_birth
          type: date
        - name: estranged
          type: boolean
Documentation generated by rspec-documentation