Please note that the Page Builder docs are still in beta. Only partners have access to the pre-release code.

Page Builder events

Event consumption

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
    });
});

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
  stage:updateAfter
   
Column Events Preview Events
column:dragStart childContentType:sortstart
column:dragStop childContentType:sortupdate
column:initializeAfter previewData:updateAfter
   
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) {});
Params Type
id string
contentType ContentType or ContentTypeCollection

Back to top

contentType:mountAfter

ContentType

events.on("contentType:mountAfter", function (params) {});
Params Type
id string
contentType ContentType

ContentTypeCollection

events.on("contentType:mountAfter", function (params) {});
Params Type
id string
contentType ContentTypeCollection
expectChildren number

Back to top

contentType:dropAfter

events.on("contentType:dropAfter", function (params) {});
Params Type
id string
contentType ContentType or ContentTypeCollection

Back to top

contentType:renderAfter

events.on("contentType:renderAfter", function (params) {});
Params Type
id string
element HTMLElement
contentType ContentType or ContentTypeCollection

Back to top

contentType:removeAfter

events.on("contentType:removeAfter", function (params) {});
Params Type
contentType ContentType or ContentTypeCollection
index number
parentContentType ContentType or ContentTypeCollection
stageId string

Back to top

contentType:duplicateAfter

events.on("contentType:duplicateAfter", function (params) {});
Params Type
originalContentType ContentType or ContentTypeCollection
duplicateContentType ContentType or ContentTypeCollection
index number
direct boolean

Back to top

contentType:moveBefore

events.on("contentType:moveBefore", function (params) {});
Params Type
contentType ContentType
sourceParent ContentTypeCollection
targetParent ContentTypeCollection
targetIndex number
stageId string

Back to top

contentType:moveAfter

events.on("contentType:moveAfter", function (params) {});
Params Type
contentType ContentType
sourceParent ContentTypeCollection
targetParent ContentTypeCollection
targetIndex number
stageId string

Back to top

contentType:redrawAfter

events.on("contentType:redrawAfter", function (params) {});

Backend

Params Type
id string
contentType ContentType or ContentTypeCollection

Frontend

Params Type
element HTMLElement

Back to top

column:dragStart

events.on("column:dragStart", function (params) {});
Params Type
column ContentTypeCollection
stageId string

Back to top

column:dragStop

events.on("column:dragStop", function (params) {});
Params Type
column ContentTypeCollection
stageId string

Back to top

column:initializeAfter

events.on("column:initializeAfter", function (params) {});
Params Type
column Column
element Element
columnGroup ColumnGroup

Back to top

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

events.on(`image:${this.contentType.id}:assignAfter`, function (params) {});
Params Type
imageObject File

Back to top

image:mountAfter

events.on("image:mountAfter", function (params) {});
Params Type
id string
contentType ContentType
expectChildren number

Back to top

image:uploadAfter

events.on("image:uploadAfter", function (params) {});
Params Type
file File

Back to top

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

events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});
Params Type
stage Stage

Back to top

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

events.on(`stage:${this.contentType.stageId}:renderAfter`, function (params) {});
Params Type
stage Stage

Back to top

stage:interactionStart

events.on("stage:interactionStart", function (params) {});
Params Type
stageId string

Back to top

stage:interactionStop

events.on("stage:interactionStop", function (params) {});
Params Type
stageId string

Back to top

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

events.on(`stage:${this.contentType.stageId}:fullScreenModeChangeAfter`, function (params) {});
Params Type
fullScreen boolean

Back to top

previewData:updateAfter

events.on("previewData:updateAfter", function (params) {});
Params Type
preview Preview

Back to top

childContentType:sortStart

events.on("childContentType:sortStart", function (params) {});
Params Type
instance ContentTypeCollection
originalPosition number
ui JQueryUI.SortableUIParams

Back to top

childContentType:sortUpdate

events.on("childContentType:sortUpdate", function (params) {});
Params Type
instance ContentTypeCollection
newPosition number
originalPosition number
ui JQueryUI.SortableUIParams
event jQuery.Event

Back to top

stage:error

events.on("stage:error", function (params) {});
Params Type
error Error

Back to top

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

events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});
Params Type
stage Stage

Back to top

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

events.on(`stage:${this.contentType.stageId}:masterFormatRenderAfter`, function (params) {});
Params Type
renderedOutput string

Back to top

stage:updateAfter

events.on("stage:updateAfter", function (params) {});
Params Type
stageId string

Back to top

stage:childFocusStart

events.on("stage:childFocusStart", function () {});
Params Type
None  

Back to top

stage:childFocusStop

events.on("stage:childFocusStop", function () {});
Params Type
None  

Back to top

state

events.on("state", function (params) {});
Params Type
state DataStore

Back to top

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

events.on(`${this.config.name}:${this.contentType.id}:updateAfter`, function (params) {});
Params Type
contentType ContentType

Back to top

googleMaps:authFailure

events.on("googleMaps:authFailure", function () {});
Params Type
None  

Back to top