Stacked container

Vertical stack with consistent gap, a vertical Flex with one less knob to configure.

A simple vertical stack container, places its children top-to-bottom with a consistent gap. Use it inside a column or table cell when you want a tidy vertical group without adding section semantics.

The stack is a pure wrapper: at runtime it renders a single f365-stack <div> and lays out whatever you drop into it. It has no type-specific settings of its own, sizing, spacing, and visibility come from the universal style props every component shares.

Properties

PropertyDescription
className
string
Custom CSS class added to the stack wrapper.
customCss
string
Inline CSS applied to the stack wrapper.
visibleIf
expression
Show / hide the whole stack (and everything inside it) from a no-code rule, e.g. {Status} = "Open".

JavaScript recipes

Show or hide the group's fields together

// A stack groups related fields. Toggle them as a unit by driving each
// child field's `visible`. (The stack wrapper itself has no JS handle.)
f365.events.onLoad(() => {
  const show = f365.field('NeedsShipping').value === true;
  for (const key of ['Street', 'City', 'Postcode']) {
    f365.field(key).visible = show;
  }
});

React to a change inside the stack

f365.events.onChange((e) => {
  if (e.fieldKey === 'NeedsShipping') {
    const show = e.newValue === true;
    for (const key of ['Street', 'City', 'Postcode']) {
      f365.field(key).visible = show;
    }
  }
});

Collapse the group on read-only forms

if (f365.context.displayMode === 'display') {
  // Hide an internal-notes stack when viewing, not editing.
  f365.field('InternalNotes').hidden = true;
  f365.ui.showToast('Viewing in read-only mode', 'info');
}