Spacer

Vertical or horizontal whitespace, invisible but reserves space in the layout grid.

The Spacer adds vertical or horizontal whitespace to the form layout. Use it to push fields apart, align a button to the bottom of a column, or simulate margin around a section without writing CSS.

The Spacer holds no value and writes nothing to SharePoint, it is pure layout. Its height comes from the cell it occupies on the canvas; the offset props add extra padding on top of that.

Properties

PropertyDescription
offsetTop
number (grid rows)
Empty space above the element, in row units. Serialised as padding-top for the runtime.
offsetBottom
number (grid rows)
Empty space below the element, in row units. Serialised as padding-bottom for the runtime.

JavaScript recipes

Show or hide the spacer at runtime

// Give the Spacer an internal name in the designer, then address it like any
// other non-field control.
f365.control('GapBeforeActions').hidden = f365.field('Status').value !== 'Approved';

Collapse the gap in read-only (DispForm) mode

f365.events.onModeChange(({ to }) => {
  const gap = f365.tryControl('SectionGap');
  if (gap) gap.visible = to !== 'display';
});

Related articles

  • Divider

    A thin horizontal rule used to visually separate groups of fields without adding a named heading.