Panel container

A bordered container with an optional toolbar, heavier visual weight than a Card.

A Panel is a bordered container with optional header and footer slots, suitable for toolbar + body layouts. Heavier visually than Card.

The Panel holds no value, it's a layout container. Drop fields inside it; the chrome (border, header strip, padding) wraps whatever rows you place.

Properties

PropertyDescription
title
string
default: Panel
Heading shown in the panel header strip.
panelTone
'neutral' | 'brand' | 'success' | 'warning' | 'danger'
default: brand
Colour of the header strip.

JavaScript recipes

A Panel isn't addressable via f365.control() (only components with an SP internal name are), drive it by toggling the fields placed inside it.

Show the panel's fields only when a flag is set

f365.events.onChange((e) => {
  if (e.fieldKey !== 'HasShipping') return;
  const show = Boolean(e.newValue);
  f365.field('ShipAddress').visible = show;
  f365.field('ShipCity').visible = show;
  f365.field('ShipPostcode').visible = show;
});

Hide the whole block on the display form

f365.events.onLoad(() => {
  if (f365.context.displayMode === 'display') {
    f365.field('InternalNotes').hidden = true;
  }
});

Update the panel heading from another field

f365.events.onChange((e) => {
  if (e.fieldKey !== 'Customer') return;
  const heading = f365.field('SummaryHeading');
  heading.value = e.newValue ? `Order for ${e.newValue}` : 'Order';
});

Related articles

  • Card container

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

  • Section container

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