> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Execution Types

## Article: Execution Types

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/actions/execution-types.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Execution Types
Every action (native or custom) can specify an `execution` object that tells the editor what happens when the user clicks the action. The `execution` object contains an `actionType` field that determines the behavior, and a corresponding payload.

## Execution properties

Each `execution` object accepts the following properties:

<PropertyList bordered>
  <Property
    name="actionType"
    type="string"
    required
    description="One of: 'data', 'panel', 'forward', 'event', 'cssProperty', 'cssCustomProperty', 'displayGroup'."
  />
  <Property
    name="data"
    type="DataAction"
    description="Payload for data actions."
  >
    <ExpandableSection name="DataAction properties">
      <PropertyList>
        <Property
          name="dataItemKey"
          type="string"
          description="Points to the data item in the component's data structure. 1 to 50 characters."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="panel"
    type="PanelAction"
    description="Payload for panel actions."
  >
    <ExpandableSection name="PanelAction properties">
      <PropertyList>
        <Property
          name="panelType"
          type="string"
          required
          description="The panel reference type. One of: 'panelId', 'inline'."
        />
        <Property
          name="panelId"
          type="string"
          description="The GUID of a panel registered in the app dashboard. Required when panelType is 'panelId'."
        />
        <Property
          name="inline"
          type="Panel"
          description="An inline panel definition. Required when panelType is 'inline'."
        >
          <ExpandableSection name="Panel properties">
            <PropertyList>
              <Property
                name="referenceId"
                type="string"
                description="External reference to the panel. Maximum 20 characters."
              />
              <Property
                name="displayName"
                type="string"
                description="The title displayed in the panel header. 1 to 200 characters. Translatable."
              />
              <Property
                name="contentType"
                type="string"
                required
                description="How the panel content is loaded. One of: 'url' (iframe), 'code' (React component from the app bundle)."
              />
              <Property
                name="url"
                type="string"
                description="The URL to load in the iframe. Required when contentType is 'url'."
              />
              <Property
                name="code"
                type="CodePanel"
                description="Configuration for rendering the panel from code. Required when contentType is 'code'."
              >
                <ExpandableSection name="CodePanel properties">
                  <PropertyList>
                    <Property
                      name="bundleUrl"
                      type="string"
                      description="The URL for the panel's JavaScript bundle."
                    />
                    <Property
                      name="cssUrl"
                      type="string"
                      description="The URL for the panel's CSS stylesheet."
                    />
                  </PropertyList>
                </ExpandableSection>
              </Property>
              <Property
                name="size"
                type="PanelSize"
                description="Size configuration for the panel."
              >
                <ExpandableSection name="PanelSize properties">
                  <PropertyList>
                    <Property
                      name="height"
                      type="number"
                      description="Height of the panel in pixels. Minimum 150."
                    />
                    <Property
                      name="width"
                      type="string"
                      description="Width of the panel. One of: 'SMALL', 'MEDIUM', 'LARGE'."
                    />
                  </PropertyList>
                </ExpandableSection>
              </Property>
              <Property
                name="panel_mode"
                type="string"
                description="The panel behavior mode. One of: 'overlay' (blocks interaction with the editor). If omitted, the panel is non-blocking."
              />
            </PropertyList>
          </ExpandableSection>
        </Property>
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="forward"
    type="ForwardAction"
    description="Payload for forward actions."
  >
    <ExpandableSection name="ForwardAction properties">
      <PropertyList>
        <Property
          name="elementPath"
          type="string"
          required
          description="Path to the target element. Must start with .root or .self. 1 to 500 characters."
        >
          <ExpandableSection name="Element path syntax">
            The `elementPath` must start with `.root` or `.self`. Each segment after the prefix corresponds to a key in the `elements` map of that level of the manifest.

            <PropertyList>
              <Property
                name=".root"
                description="The root element of the component. Example: .root.previewContainer"
              />
              <Property
                name=".self"
                description="The element that defines this action. Example: .self.icon"
              />
              <Property
                name=". (dot)"
                description="Separator between path segments, selecting child elements by their key in the elements map. Example: .self.navigationButtons.animatedIcon"
              />
            </PropertyList>
          </ExpandableSection>
        </Property>
        <Property
          name="actionName"
          type="ActionName"
          required
          description="Which action to execute on the target."
        >
          <ExpandableSection name="ActionName values">
            Set `actionName` to any native action name, or to `custom` for custom actions.

            <PropertyList>
              <Property name="settings" description="Manage the component settings." />
              <Property name="design" description="Manage the style information." />
              <Property name="media" description="Manage any media type data defined in the component." />
              <Property name="manageItems" description="Manage items in the component data." />
              <Property name="dashboard" description="Open the app's default dashboard page." />
              <Property name="custom" description="A custom action key defined in the target element's customActions." />
            </PropertyList>

            > **Note:** Less common action names include `manageMenu`, `help`, `plugins`, `presets`, `interactions`, and more.
          </ExpandableSection>
        </Property>
        <Property
          name="custom"
          type="string"
          description="The custom action key to execute on the target element. Required when actionName is custom. The target element must have a matching key in its own customActions. 1 to 50 characters."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="event"
    type="EventAction"
    description="Payload for event actions."
  >
    <ExpandableSection name="EventAction properties">
      <PropertyList>
        <Property
          name="event"
          type="string"
          description="Name of the event to be handled by the editor script. 1 to 50 characters."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="cssProperty"
    type="CssPropertyAction"
    description="Payload for cssProperty actions."
  >
    <ExpandableSection name="CssPropertyAction properties">
      <PropertyList>
        <Property
          name="cssPropertyKey"
          type="string"
          description="Points to the CSS property in the component's cssProperties map. 1 to 50 characters."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="cssCustomProperty"
    type="CssCustomPropertyAction"
    description="Payload for cssCustomProperty actions."
  >
    <ExpandableSection name="CssCustomPropertyAction properties">
      <PropertyList>
        <Property
          name="cssCustomPropertyKey"
          type="string"
          description="Points to the CSS custom property in the component's cssCustomProperties map. 1 to 50 characters."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="displayGroup"
    type="DisplayGroupAction"
    description="Payload for displayGroup actions."
  >
    <ExpandableSection name="DisplayGroupAction properties">
      <PropertyList>
        <Property
          name="displayGroupKey"
          type="string"
          description="The key in the component's displayGroups map. 1 to 50 characters."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

## Examples

### Data action

The following example opens the data-editing UI for the `slides` data item:

```json
{
  "actionType": "data",
  "data": {
    "dataItemKey": "slides"
  }
}
```

### Panel action with panelId

The following example opens a panel registered in the app dashboard:

```json
{
  "actionType": "panel",
  "panel": {
    "panelType": "panelId",
    "panelId": "c0b164d9-cd88-41d3-a45e-51b14c54c3ea"
  }
}
```

### Inline panel from URL

The following example opens an inline panel that loads content from a URL:

```json
{
  "actionType": "panel",
  "panel": {
    "panelType": "inline",
    "inline": {
      "displayName": "Color Settings",
      "contentType": "url",
      "url": "https://example.com/my-panel.html",
      "size": {
        "height": 300,
        "width": "MEDIUM"
      }
    }
  }
}
```

### Inline panel from code

The following example opens an inline panel rendered from a React component:

```json
{
  "actionType": "panel",
  "panel": {
    "panelType": "inline",
    "inline": {
      "displayName": "Advanced Settings",
      "contentType": "code",
      "code": {
        "bundleUrl": "https://example.com/panel-bundle.js",
        "cssUrl": "https://example.com/panel-styles.css"
      },
      "panel_mode": "overlay"
    }
  }
}
```

### Forward action

The following example forwards a custom action to a child element. The target element (`previewContainer`) must define a `customActions.togglePreview` entry in its own manifest for this to work.

```json
{
  "actionType": "forward",
  "forward": {
    "elementPath": ".root.previewContainer",
    "actionName": "custom",
    "custom": "togglePreview"
  }
}
```

The following example forwards the `manageMenu` native action to a child navbar element:

```json
{
  "actionType": "forward",
  "forward": {
    "elementPath": ".self.navbar",
    "actionName": "manageMenu"
  }
}
```

### Event action

The following example dispatches an `onExportData` event:

```json
{
  "actionType": "event",
  "event": {
    "event": "onExportData"
  }
}
```

### CSS property action

The following example opens the styling control for `backgroundColor`:

```json
{
  "actionType": "cssProperty",
  "cssProperty": {
    "cssPropertyKey": "backgroundColor"
  }
}
```

### CSS custom property action

The following example opens the styling control for a CSS custom property:

```json
{
  "actionType": "cssCustomProperty",
  "cssCustomProperty": {
    "cssCustomPropertyKey": "shadowStyle"
  }
}
```

### Display group action

The following example opens the panel for a display group:

```json
{
  "actionType": "displayGroup",
  "displayGroup": {
    "displayGroupKey": "animations"
  }
}
```