Modal

Provide a real <div id="example"></div> in your view. Use the Code tab example's options and data as a starting point, then call this adapter with that host. Import the shared theme once per application and the component stylesheet with the component. Keep the returned instance for updates; call destroy() from your router/framework cleanup before removing the host.

import { createModal } from '@blukavantui/community/modal'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/modal.css'

type Options = NonNullable<Parameters<typeof createModal>[1]>
type Events = NonNullable<Parameters<typeof createModal>[2]>

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

• Use representative real data, including empty, loading and failed requests.
• Test keyboard interaction, Light and Dark appearance, and a narrow screen with your longest labels.
• Navigate away and back; confirm cleanup, expected state restoration and no duplicated callbacks.

In Manage Dependencies, select Modal from BluKavantUi_Community_Feedback, 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_Feedback.Modal 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.

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.