Four Columns

Use a TypeScript application with a CSS-capable bundler. Install @blukavantui/community@1.1.0 from npm, or install the matching downloaded archive.

// In your test application’s package.json dependencies:
"@blukavantui/community": "1.1.0"

Run npm install in that test application to install the component package. Load the theme once and the component stylesheet shown in the adapter. Create an empty host in your view:

<div id="example"></div>

This reusable adapter follows the Button and TimePicker guide pattern. Its types come from the factory, so required options stay required. Attach the host first; mount once per view and retain the handle.

import { createColumns4 } from '@blukavantui/community/columns4'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/columns4.css'

type Options = NonNullable<Parameters<typeof createColumns4>[1]>

export function mount(host: HTMLElement, options: Options) {
  const instance = createColumns4(host, options)
  return { instance, update: (patch: Partial<Options>) => instance.update(patch), destroy: () => instance.destroy() }
}

Columns owns layout and stable content slots. Your application owns the children: keep their instance handles, update layout in place, and destroy nested components before destroying the layout. There are no component callbacks.

Use one outer card wrapper per column for equal-height content. A ratio or spacing update preserves child nodes and their state.

Use: columns, Ratio, Gap, update

Append existing DOM nodes or child component instances into the returned columns array. update changes layout properties without replacing these slots. Use supported ratios for the chosen column count.

Use: EqualHeight, Align, StackAt

Wrap a card’s content in one outer element per column. EqualHeight stretches that wrapper to the row height and overrides Align. At the selected viewport breakpoint, each stacked row keeps natural height.

Use: destroy

Keep handles for nested components and destroy them before destroying Columns. Removing a parent DOM node alone does not unregister a child component’s global listeners.

Save this as columns4.ts, import its mount function and pass your attached host. It includes application state, interactive controls and a destroy handler.

Download the editable TypeScript example ↓

import { createColumns4 } from '@blukavantui/community/columns4'
import { createTextInput } from '@blukavantui/community/text-input'
import '@blukavantui/community/text-input.css'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/columns4.css'

export function mount(host: HTMLElement) {
  const root = document.createElement('section')
  const toggle = document.createElement('button')
  toggle.type = 'button'; toggle.textContent = 'Use natural heights'
  const spacing = document.createElement('button')
  spacing.type = 'button'; spacing.textContent = 'Change layout spacing'
  const target = document.createElement('div')
  root.append(toggle, spacing, target); host.append(root)
  let equal = true, compact = false
  const instance = createColumns4(target, {
    Ratio: 'Equal', EqualHeight: equal, Gap: 24, StackAt: 'Medium',
  })
  const cards = instance.columns.map((column, index) => {
    const card = document.createElement('article')
    card.style.cssText = 'padding:20px;border:1px solid #94a3b8;border-radius:12px;box-sizing:border-box'
    const title = document.createElement('h4'); title.textContent = `Panel ${index + 1}`
    const text = document.createElement('p')
    text.textContent = index === 0 ? 'A short summary.' :
      'A longer panel with instructions, supporting context and follow-up details. It shares the row height when equal height is enabled.'
    card.append(title, text); column.append(card); return card
  })
  const input = createTextInput(cards[0], { Label: 'Notes retained during layout changes', Value: 'Keep this draft' })
  const listeners = new AbortController()
  toggle.addEventListener('click', () => {
    equal = !equal; instance.update({ EqualHeight: equal })
    toggle.textContent = equal ? 'Use natural heights' : 'Use equal heights'
  }, { signal: listeners.signal })
  spacing.addEventListener('click', () => {
    compact = !compact
    instance.update({ Gap: compact ? 8 : 24, Ratio: 'Equal' })
  }, { signal: listeners.signal })
  return { instance, input, destroy() {
    listeners.abort(); input.destroy(); instance.destroy(); root.remove()
  } }
}

• Columns preserve the source order of your content. Put interactive elements in that same logical order.
• Test both sides of the stacking breakpoint and confirm entered child values survive layout updates.
• Call the example handle’s destroy() when the view is removed. Abort your application listeners and requests; destroy children before their Columns instance.
• Mount again and confirm there is one instance and one callback per interaction.

In Manage Dependencies, select Columns4 from BluKavantUi_Community_Layout, together with the structures and public actions used by its API. Refresh existing references before publishing your consumer. Inherit the shared Community theme in your application's theme.

ExampleScreen — Screen (your application)
└─ ExistingLayout — referenced Layout Block instance (child of ExampleScreen)
   └─ Content — existing slot on ExistingLayout
      └─ ComponentRegion — Container (child of that slot)
         └─ MainComponent — BluKavantUi_Community_Layout.Columns4 Block instance (child of ComponentRegion)

Reuse your screen’s existing Layout and its content slot; do not add a second layout. If your Layout names that slot differently, use its actual content slot. ComponentRegion is a new Container; MainComponent is a referenced Block instance.

Populate these existing slots on MainComponent with your own widgets. Do not create new Placeholder widgets to stand in for a referenced Block's slots.

Create local variables on ExampleScreen for the values your application changes. Use the exact native types below; lists are typed OutSystems Lists, while inputs ending in Json are Text containing the documented JSON. Bind each MainComponent.Input to its matching StateInput local. Constants can instead use the default directly. Fill required data from your Aggregate or Data Action before enabling interaction.

For each event you use, create the named screen Client Action below. Add its listed input parameters with the exact types. Select that action on MainComponent's event property, then enter each mapping explicitly. Event arguments and screen locals are different scopes.

This Block has no events to wire. The consuming screen controls its values and child content.

Place each column’s content in its existing Column slot. Set EqualHeight = True to fill the row height. Put a card’s contents inside one Container per slot so that wrapper stretches with the column. No fixed content height is required; stacked rows retain natural height.

Align controls vertical placement when EqualHeight is False; EqualHeight overrides it with Stretch when True. For nested layouts, enable EqualHeight separately on each row that needs it.

Fixed proportion helper Blocks show their widths in Service Studio. Dynamic Ratio, Gap, Align, EqualHeight and StackAt input values resolve at runtime; the designer displays structural defaults. Compiled acceptance covers all eight presets and equal-height rows, with a narrow Safari stacking check.

MainComponent.EqualHeight = True
MainComponent.Gap = 24
MainComponent.StackAt = "Medium"

MainComponent.Column1 → CardOne Container → your widgets
MainComponent.Column2 → CardTwo Container → your widgets

Publish the consumer, supply representative data, trigger each connected event and inspect the mapped arguments. Check a failed request, a retry and leaving/reopening the screen. The table describes the native contract; the Web recipes can contain capabilities with different native names or availability. Use these native names and the API tab as the authority for Service Studio.