Modal Drawer

Installation

1. Download this component’s ZIP. In your development project, choose Designer → File → Import and select it. Preserve the view and style-class paths and review replacement conflicts.
2. The native resource styles are included in the package.
3. Add an Embedded View, set its path to Overlays/ModalDrawer, and configure its parameters.

Perspective 8.3 · 2 resource files. ZIP structure and source consistency are checked. Manual Designer import acceptance is pending.

Usage

Use the component inside an Embedded View. Replace the sample values with your own data; output and inout parameters expose state back to the host.

{
  "path": "Overlays/ModalDrawer",
  "params": {
    "title": "Edit profile",
    "description": "Make changes to your profile here. Click save when you are done.",
    "variant": "modal",
    "side": "right",
    "primaryLabel": "Save changes",
    "secondaryLabel": "Cancel",
    "popupId": "vc2-profile",
    "instanceId": "",
    "onPrimaryMessage": "viewcraft.modaldrawer.primary",
    "onCloseMessage": "viewcraft.modaldrawer.close",
    "name": "Pedro Duarte",
    "username": "@peduarte"
  },
  "useDefaultViewWidth": false,
  "useDefaultViewHeight": false
}

Parameters

Taken directly from the native view. Types describe the saved defaults; they are not a complete validation schema.

"Edit profile"

"Make changes to your profile here. Click save when you are done."

"modal"

"right"

"Save changes"

"Cancel"

"vc2-profile"

""

"viewcraft.modaldrawer.primary"

"viewcraft.modaldrawer.close"

"Pedro Duarte"

"@peduarte"

For agents

Copy this page for the contract, installation steps and complete source. With the Rungsmith MCP, call get_catalog_component with id modal-drawer.