Components
entity

section

4min

The section component groups related items together under a single title. A section can be set up on a jig.default under the entity component or on a form component as its container. The component can contain field-row and entity-field components or children components on a form component.

A component.section can be set up with the following combinations:

  1. An entity containing sections with rows and entity-field for display purposes.
  2. An entity containing sections and entity-field for display purposes.
  3. A form component containing sections with rows and children for display/capturing purposes.
  4. A form component containing sections and children components for display/capturing purposes.
  5. Horizontal lists cannot be used with the section components as an empty white will be displayed.

Some properties are common to all components, see Common component properties for a list and their configuration options.



Examples and code snippets 

Jig with sections
Jig with sections


Using sections, rows, and entity fields to create relevant display sections for the information to be functional yet elegant and neatly organized.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

Section-rows-entity-fields (static)
Section-rows-entity-fields (dynamic)
datasources (static)
datasources (dynamic)

Jig with sections & rows
Jig with sections & rows


Similar to the above example, this has the same functionality, except that this is for adding or editing data too, and not just for display purposes.

Examples: See the full example using dynamic data in GitHub.

Datasource: See the full datasource for dynamic data in GitHub.

form-section-row (dynamic)
datasources (dynamic)


Basic

Jig with display sections & fields
Jig with display sections & fields


Compact

Jig with display sections & fields


This is another example for display purposes only, but this time without the rows. Note the difference in the fields as they now display below each other instead of numerous entity-fields in a row.

Examples: Basic - See the full example using static data in GitHub. Compact - See the full example using static data in GitHub.

Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

section-entity-field (static)
section-entity-field-compact (static)
section-entity-field (dynamic)
section-entity-field-compact (dynamic)
datasources (static)
datasources (dynamic)

Form with sections
Form with sections


This is the same as the above, again with the exception of being used in a form component and not just being for display purposes, but allowing input from the user.

Examples: See the full example using dynamic data in GitHub.

Datasources: See the full datasource for dynamic data in GitHub.

form-section-children (dynamic)
datasources (dynamic)




Updated 24 Jul 2024
Doc contributor
Did this page help you?
Yes
No