Section container

A grouping block that visually separates related fields with a heading and optional collapse behaviour.

A Section groups related fields under a heading. Sections can be collapsed, hidden via visibility rules, and styled with custom CSS classes.

Properties

PropertyDescription
title
string
default: 'Section title'
Heading rendered above the grouped fields. Optional, leave blank for an untitled divider.

A Section is a layout container, not a field: it carries no value and is not written to SharePoint. Show/hide it with a visibility rule on the container, or style it with a custom CSS class.

JavaScript recipes

Show a group of fields together

// Reveal the fields in an "Approval" section only when escalation is on.
f365.events.onChange((e) => {
  if (e.fieldKey !== 'Escalate') return;
  const show = Boolean(e.newValue);
  for (const key of ['Approver', 'ApprovalNotes', 'ApprovalStatus']) {
    f365.field(key).visible = show;
  }
});

Jump to a section on load

f365.events.onLoad(() => {
  // Bring the first field of a deep section into view.
  if (f365.context.displayMode === 'edit') {
    f365.field('Approver').scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
});

Related articles

  • Card container

    A grouping block with elevation and rounded corners, visually distinct from the surrounding form.

  • Tabs container

    A horizontal tab strip with multiple panels, only one panel visible at a time.

  • Accordion container

    A vertical stack of collapsible panels, one or more can be expanded at a time.