Page Builder events

The pattern for consuming Page Builder events in JavaScript, such as within the preview.js component, is to import Magento_PageBuilder/js/events and use the events.on() method to bind to the event you want to handle, as shown here:

define([
    'Magento_PageBuilder/js/events',
], function (events) {
    'use strict';

    events.on("event:name", function (args) {
        // do logic
    });
});
Copied to your clipboard
define([
    'Magento_PageBuilder/js/events',
], function (events) {
    'use strict';

    events.on("event:name", function (args) {
        // do logic
    });
});

Events list

The following table lists the Page Builder events you can bind to and handle within your content type.

Content Type Events	Stage Events
contentType:createAfter	stage:childFocusStart
contentType:dropAfter	stage:childFocusStop
contentType:duplicateAfter	stage:interactionStart
contentType:mountAfter	stage:interactionStop
contentType:moveAfter	stage:error
contentType:moveBefore	stage:{{preview.contentType.stageId}}:masterFormatRenderAfter
contentType:redrawAfter	stage:{{preview.contentType.stageId}}:readyAfter
contentType:removeAfter	stage:{{preview.contentType.stageId}}:renderAfter
contentType:renderAfter	stage:{{preview.contentType.stageId}}:fullScreenModeChangeAfter
contentType:renderAfter	stage:{{preview.contentType.stageId}}:viewportChangeAfter
contentType:renderAfter	stage:viewportChangeAfter
	stage:updateAfter

Column Events	Preview Events
column:dragStart	childContentType:sortstart
column:dragStop	childContentType:sortupdate
column:initializeAfter

Image Events	Other Events
image:{{preview.contentType.id}}:assignAfter	googleMaps:authFailure
image:mountAfter	state
image:uploadAfter	{{config.name}}:{{preview.contentType.id}}:updateAfter

Event details

`contentType:*` events

Events starting with contentType: are triggered for every content type on the stage. These events can also be called for specific content types by prefixing the content type's name before the event (name:event). For example:

text:createAfter
row:mountAfter
tab-item:mountAfter

`contentType:createAfter`

events.on("contentType:createAfter", function (params) {});
Copied to your clipboard
events.on("contentType:createAfter", function (params) {});

Params	Type
`id`	`string`
`contentType`	`ContentType` or `ContentTypeCollection`

`contentType:mountAfter`

ContentType

events.on("contentType:mountAfter", function (params) {});
Copied to your clipboard
events.on("contentType:mountAfter", function (params) {});

Params	Type
`id`	`string`
`contentType`	`ContentType`

ContentTypeCollection

events.on("contentType:mountAfter", function (params) {});
Copied to your clipboard
events.on("contentType:mountAfter", function (params) {});

Params	Type
`id`	`string`
`contentType`	`ContentTypeCollection`
`expectChildren`	`number`

`contentType:dropAfter`

events.on("contentType:dropAfter", function (params) {});
Copied to your clipboard
events.on("contentType:dropAfter", function (params) {});

Params	Type
`id`	`string`
`contentType`	`ContentType` or `ContentTypeCollection`

`contentType:renderAfter`

events.on("contentType:renderAfter", function (params) {});
Copied to your clipboard
events.on("contentType:renderAfter", function (params) {});

Params	Type
`id`	`string`
`element`	`HTMLElement`
`contentType`	`ContentType` or `ContentTypeCollection`

`contentType:removeAfter`

events.on("contentType:removeAfter", function (params) {});
Copied to your clipboard
events.on("contentType:removeAfter", function (params) {});

Params	Type
`contentType`	`ContentType` or `ContentTypeCollection`
`index`	`number`
`parentContentType`	`ContentType` or `ContentTypeCollection`
`stageId`	`string`

`contentType:duplicateAfter`

events.on("contentType:duplicateAfter", function (params) {});
Copied to your clipboard
events.on("contentType:duplicateAfter", function (params) {});

Params	Type
`originalContentType`	`ContentType` or `ContentTypeCollection`
`duplicateContentType`	`ContentType` or `ContentTypeCollection`
`index`	`number`
`direct`	`boolean`

`contentType:moveBefore`

events.on("contentType:moveBefore", function (params) {});
Copied to your clipboard
events.on("contentType:moveBefore", function (params) {});

Params	Type
`contentType`	`ContentType`
`sourceParent`	`ContentTypeCollection`
`targetParent`	`ContentTypeCollection`
`targetIndex`	`number`
`stageId`	`string`

`contentType:moveAfter`

events.on("contentType:moveAfter", function (params) {});
Copied to your clipboard
events.on("contentType:moveAfter", function (params) {});

Params	Type
`contentType`	`ContentType`
`sourceParent`	`ContentTypeCollection`
`targetParent`	`ContentTypeCollection`
`targetIndex`	`number`
`stageId`	`string`

`contentType:redrawAfter`

events.on("contentType:redrawAfter", function (params) {});
Copied to your clipboard
events.on("contentType:redrawAfter", function (params) {});

Backend

Params	Type
`id`	`string`
`contentType`	`ContentType` or `ContentTypeCollection`

Frontend

Params	Type
`element`	`HTMLElement`

`column:dragStart`

events.on("column:dragStart", function (params) {});
Copied to your clipboard
events.on("column:dragStart", function (params) {});

Params	Type
`column`	`ContentTypeCollection`
`stageId`	`string`

`column:dragStop`

events.on("column:dragStop", function (params) {});
Copied to your clipboard
events.on("column:dragStop", function (params) {});

Params	Type
`column`	`ContentTypeCollection`
`stageId`	`string`

`column:initializeAfter`

events.on("column:initializeAfter", function (params) {});
Copied to your clipboard
events.on("column:initializeAfter", function (params) {});

Params	Type
`column`	`Column`
`element`	`Element`
`columnGroup`	`ColumnGroup`

`image:{{preview.contentType.id}}:assignAfter`

events.on(`image:${this.contentType.id}:assignAfter`, function (params) {});
Copied to your clipboard
events.on(`image:${this.contentType.id}:assignAfter`, function (params) {});

Params	Type
`imageObject`	`File`

`image:mountAfter`

events.on("image:mountAfter", function (params) {});
Copied to your clipboard
events.on("image:mountAfter", function (params) {});

Params	Type
`id`	`string`
`contentType`	`ContentType`
`expectChildren`	`number`

`image:uploadAfter`

events.on("image:uploadAfter", function (params) {});
Copied to your clipboard
events.on("image:uploadAfter", function (params) {});

Params	Type
`file`	`File`

`stage:{{preview.contentType.stageId}}:readyAfter`

events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});
Copied to your clipboard
events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});

Params	Type
`stage`	`Stage`

`stage:{{preview.contentType.stageId}}:renderAfter`

events.on(`stage:${this.contentType.stageId}:renderAfter`, function (params) {});
Copied to your clipboard
events.on(`stage:${this.contentType.stageId}:renderAfter`, function (params) {});

Params	Type
`stage`	`Stage`

`stage:interactionStart`

events.on("stage:interactionStart", function (params) {});
Copied to your clipboard
events.on("stage:interactionStart", function (params) {});

Params	Type
`stageId`	`string`

`stage:interactionStop`

events.on("stage:interactionStop", function (params) {});
Copied to your clipboard
events.on("stage:interactionStop", function (params) {});

Params	Type
`stageId`	`string`

`stage:{{preview.contentType.stageId}}:fullScreenModeChangeAfter`

events.on(`stage:${this.contentType.stageId}:fullScreenModeChangeAfter`, function (params) {});
Copied to your clipboard
events.on(`stage:${this.contentType.stageId}:fullScreenModeChangeAfter`, function (params) {});

Params	Type
`fullScreen`	`boolean`

`childContentType:sortStart`

events.on("childContentType:sortStart", function (params) {});
Copied to your clipboard
events.on("childContentType:sortStart", function (params) {});

Params	Type
`instance`	`ContentTypeCollection`
`originalPosition`	`number`
`ui`	`JQueryUI.SortableUIParams`

`childContentType:sortUpdate`

events.on("childContentType:sortUpdate", function (params) {});
Copied to your clipboard
events.on("childContentType:sortUpdate", function (params) {});

Params	Type
`instance`	`ContentTypeCollection`
`newPosition`	`number`
`originalPosition`	`number`
`ui`	`JQueryUI.SortableUIParams`
`event`	`jQuery.Event`

`stage:error`

events.on("stage:error", function (params) {});
Copied to your clipboard
events.on("stage:error", function (params) {});

Params	Type
`error`	`Error`

`stage:{{preview.contentType.stageId}}:readyAfter`

events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});
Copied to your clipboard
events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});

Params	Type
`stage`	`Stage`

`stage:{{preview.contentType.stageId}}:masterFormatRenderAfter`

events.on(`stage:${this.contentType.stageId}:masterFormatRenderAfter`, function (params) {});
Copied to your clipboard
events.on(`stage:${this.contentType.stageId}:masterFormatRenderAfter`, function (params) {});

Params	Type
`renderedOutput`	`string`

`stage:updateAfter`

events.on("stage:updateAfter", function (params) {});
Copied to your clipboard
events.on("stage:updateAfter", function (params) {});

Params	Type
`stageId`	`string`

`stage:childFocusStart`

events.on("stage:childFocusStart", function () {});
Copied to your clipboard
events.on("stage:childFocusStart", function () {});

Params	Type
`None`

`stage:childFocusStop`

events.on("stage:childFocusStop", function () {});
Copied to your clipboard
events.on("stage:childFocusStop", function () {});

Params	Type
`None`

`stage:viewportChangeAfter`

Triggered on viewport changes in the Admin stage. Handle this event to control in your content type's widget (widget.js) for cases in which your content type is rendered on the Admin stage from within a Block or Dynamic Block. In these cases, Page Builder loads your widget, not the preview component, to the Admin stage. This means that your widget as to make changes to your content type when users change the viewports on the stage.

events.on(`stage:viewportChangeAfter`, function (args) {});
Copied to your clipboard
events.on(`stage:viewportChangeAfter`, function (args) {});

Args	Type
`viewport`	`string`
`previousViewport`	`string`

`stage:{{preview.contentType.stageId}}:viewportChangeAfter`

Triggered on viewport changes in the Admin stage. Handle this event to control responsive changes to your content type from within your preview component.

events.on(`stage:${this.contentType.stageId}:viewportChangeAfter`, function (args) {});
Copied to your clipboard
events.on(`stage:${this.contentType.stageId}:viewportChangeAfter`, function (args) {});

Args	Type
`viewport`	`string`
`previousViewport`	`string`

`state`

events.on("state", function (params) {});
Copied to your clipboard
events.on("state", function (params) {});

Params	Type
`state`	`DataStore`

`{{config.name}}:{{preview.contentType.id}}:updateAfter`

events.on(`${this.config.name}:${this.contentType.id}:updateAfter`, function (params) {});
Copied to your clipboard
events.on(`${this.config.name}:${this.contentType.id}:updateAfter`, function (params) {});

Params	Type
`contentType`	`ContentType`

`googleMaps:authFailure`

events.on("googleMaps:authFailure", function () {});
Copied to your clipboard
events.on("googleMaps:authFailure", function () {});

Params	Type
`None`

Datastore

Knockout bindings

Last updated 9/11/2023

Was this helpful?

Yes

Page Builder events

Events list.css-83mclq{margin-left:var(--spectrum-global-dimension-size-100);}

Event details

contentType:* events

contentType:createAfter.css-jmmyhj{margin-left:var(--spectrum-global-dimension-size-50);}

contentType:mountAfter

ContentType

ContentTypeCollection

contentType:dropAfter

contentType:renderAfter

contentType:removeAfter

contentType:duplicateAfter

contentType:moveBefore

contentType:moveAfter

contentType:redrawAfter

Backend

Frontend

column:dragStart

column:dragStop

column:initializeAfter

image:{{preview.contentType.id}}:assignAfter

image:mountAfter

image:uploadAfter

stage:{{preview.contentType.stageId}}:readyAfter

stage:{{preview.contentType.stageId}}:renderAfter

stage:interactionStart

stage:interactionStop

stage:{{preview.contentType.stageId}}:fullScreenModeChangeAfter

childContentType:sortStart

childContentType:sortUpdate

stage:error

stage:{{preview.contentType.stageId}}:readyAfter

stage:{{preview.contentType.stageId}}:masterFormatRenderAfter

stage:updateAfter

stage:childFocusStart

stage:childFocusStop

stage:viewportChangeAfter

stage:{{preview.contentType.stageId}}:viewportChangeAfter

state

{{config.name}}:{{preview.contentType.id}}:updateAfter

googleMaps:authFailure

Events list

`contentType:*` events

`contentType:createAfter`

`contentType:mountAfter`

`contentType:dropAfter`

`contentType:renderAfter`

`contentType:removeAfter`

`contentType:duplicateAfter`

`contentType:moveBefore`

`contentType:moveAfter`

`contentType:redrawAfter`

`column:dragStart`

`column:dragStop`

`column:initializeAfter`

`image:{{preview.contentType.id}}:assignAfter`

`image:mountAfter`

`image:uploadAfter`

`stage:{{preview.contentType.stageId}}:readyAfter`

`stage:{{preview.contentType.stageId}}:renderAfter`

`stage:interactionStart`

`stage:interactionStop`

`stage:{{preview.contentType.stageId}}:fullScreenModeChangeAfter`

`childContentType:sortStart`

`childContentType:sortUpdate`

`stage:error`

`stage:{{preview.contentType.stageId}}:readyAfter`

`stage:{{preview.contentType.stageId}}:masterFormatRenderAfter`

`stage:updateAfter`

`stage:childFocusStart`

`stage:childFocusStop`

`stage:viewportChangeAfter`

`stage:{{preview.contentType.stageId}}:viewportChangeAfter`

`state`

`{{config.name}}:{{preview.contentType.id}}:updateAfter`

`googleMaps:authFailure`