Field Groups

Field groups render individual form inputs, labels and a feedback component for a model attribute on the edit and create pages. They are used in the ModelEditForm and ModelCreateForm components.

The complete list of field group components is below.

Layout

The default layout is vertical. The other layouts are horizontal and floating. Individual fields can be configured to use a different layout by explicitly using the ModelFieldGroup variant ie <ModelFieldGroupHorizontal model="blog" path="title".

Global horizontal layout

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelFieldGroup: ModelFieldGroupHorizontal
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelFieldGroup: ModelFieldGroupHorizontal
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      title: {
        ModelFieldGroup: ModelFieldGroupHorizontal
      }
    }
  }
}

Global floating layout

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelFieldGroup: ModelFieldGroupFloating
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelFieldGroup: ModelFieldGroupFloating
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      title: {
        ModelFieldGroup: ModelFieldGroupFloating
      }
    }
  }
}

Field behaviour

Change label

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelFieldGroup: { props: { label: 'Awesome Title!' } }
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelFieldGroup: { props: { label: 'Awesome Title!' } }
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      title: {
        ModelFieldGroup: { props: { label: 'Awesome Title!' } }
      }
    }
  }
}

tip

A better approach may be to set the label on the server side using rhino_properties_readable_name.

Set read-only

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelFieldGroup: { props: { readOnly: true } }
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelFieldGroup: { props: { readOnly: true } }
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      title: {
        ModelFieldGroup: { props: { readOnly: true } }
      }
    }
  }
}

Change placeholder

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelFieldGroup: { props: { placeholder: 'Please enter title...' } }
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelFieldGroup: { props: { placeholder: 'Please enter title...' } }
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      title: {
        ModelFieldGroup: { props: { placeholder: 'Please enter title...' } }
      }
    }
  }
}

ModelFieldGroupReference

Additional filtering

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelFieldGroupReference: { props: { filter: { published: true } } }
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelFieldGroupReference: { props: { filter: { published: true } } }
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      title: {
        ModelFieldGroupReference: { props: { filter: { published: true } } }
      }
    }
  }
}

ModelFieldGroupOwnerReference

Additional filtering

By default, the owner reference field group will only show items owned by the current base owner.

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelFieldGroupReference: { props: { filter: { archived: false } } }
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelFieldGroupReference: { props: { filter: { archived: false } } }
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      category: {
        ModelFieldGroupReference: { props: { filter: { archived: false } } }
      }
    }
  }
}

Component Hierarchy