Table of Contents
Note

This documentation describes the IdentifiedModal Vue component for native UI views, for Xml templates see modal with overlay-id attribute.

IdentifiedModal

A modal whose open/close state is controlled by overlay:toggle events emitted by the current ViewModel's event manager. No manual isOpen binding needed.

Import

import { IdentifiedModal } from '@neos/app'

Props

Prop Type Default Description
overlayId string — Required. ID used to match overlay:toggle events from the ViewModel

Slots

Slot Description
header Modal header content
body Modal body content
footer Modal footer content

Usage

The modal opens and closes automatically when the ViewModel dispatches an overlay:toggle event with the matching overlayId. This is typically triggered by ToggleOverlayButton or viewModel.toggleOverlay(id).

Usage Examples

Declaration

<!-- Somewhere in the view template -->
<IdentifiedModal overlay-id="edit-notes">
  <template #header>
    <Text weight="strong">Edit Notes</Text>
  </template>
  <template #body>
    <StringFormField property-name="notes" :multi-lines="true" />
  </template>
  <template #footer>
    <ButtonsLayout>
      <button label="Close" @click="viewModel.toggleOverlay('edit-notes')" />
    </ButtonsLayout>
  </template>
</IdentifiedModal>

Opening from a button

<ToggleOverlayButton overlay-id="edit-notes">
  <button label="Edit Notes" icon="edit" />
</ToggleOverlayButton>

Opening programmatically from a ViewModel action

// In a ViewModel action
viewModel.toggleOverlay('edit-notes', { state: 'show', event: clickEvent })