Page History

...

• Pick the visual emphasis that matches the page context by setting boardletType to Normal (bordered) for stronger separation or Ghost (borderless) when the Boardlet should blend into surrounding content.
• Keep the header action area compact: place at most three immediate actions in elements.header[] and expose the rest via the mandatory overflow by setting moreIconVisible: true.
• Use the footer only for workflow-related actions or tabs. If there is no workflow, hide the region (showFooter: false) so the layout stays clean.
• Provide a clear, localized identity: set a human-readable builder label with displayName, a localized product-facing name with boardletNameTranslations, and a localized header title with titleTranslations/title (the visual title reads from these values).

Sizing & Layout

• Prevent clipping when content grows by enabling internal scrolling with scrollingEnabled: true; this preserves container height and reduces layout shifts.
• Reduce visual noise by hiding unused chrome (showHeader: false, showFooter: false) instead of leaving empty regions.
• Provide quick, recognizable affordances in the header by configuring leftIcon and/or rightIcon with symbols that match the Boardlet’s purpose (e.g., info, settings).

...

• Release resources and listeners on teardown with events.ON_DESTROY to keep the UI responsive and stable over time.
• Provide deterministic automation hooks for QA and a11y testing with dataTestId so scripts can reliably target the Boardlet across builds.

Data-Driven / Conditional Behavior

• Keep the layout steady while data updates by relying on scrollingEnabled: true and stable section layout values; avoid toggling showHeader/showFooter mid-session unless essential, and prefer making those decisions once during ON_INIT.
• If the number of header actions varies with data, keep visible actions capped by limiting elements.header[] and depend on moreIconVisible: true for overflow consistency.

Visibility & Authorization

...