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:

1
2
3
4
5
6
7
8
9
10
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  
   
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

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

Back to top

contentType:mountAfter

ContentType

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

ContentTypeCollection

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

Back to top

contentType:dropAfter

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

Back to top

contentType:renderAfter

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

Back to top

contentType:removeAfter

1
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

1
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

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

Back to top

contentType:moveAfter

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

Back to top

contentType:redrawAfter

1
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

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

Back to top

column:dragStop

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

Back to top

column:initializeAfter

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

Back to top

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

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

Back to top

image:mountAfter

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

Back to top

image:uploadAfter

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

Back to top

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

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

Back to top

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

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

Back to top

stage:interactionStart

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

Back to top

stage:interactionStop

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

Back to top

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

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

Back to top

childContentType:sortStart

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

Back to top

childContentType:sortUpdate

1
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

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

Back to top

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

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

Back to top

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

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

Back to top

stage:updateAfter

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

Back to top

stage:childFocusStart

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

Back to top

stage:childFocusStop

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

Back to top

state

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

Back to top

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

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

Back to top

googleMaps:authFailure

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

Back to top

Updated