Enable and Disable the Breakout Editor Apply Button

You can emit an sfcc:valid event from the breakout editor to indicate whether the value that the user selected in the breakout editor is valid. If the value is valid, Page Designer enables the Apply button in the breakout modal window footer. If the value is invalid, Page Designer disables the Apply button and optionally displays an error message.

In this example, if the value is valid, an sfcc:valid event with payload true is emitted, and the Apply button is enabled. If the value is invalid, an sfcc:valid event is issued with a polymorphic payload that includes a valid key set to false and a message set to This value is invalid. The Apply button is disabled, and an error icon is displayed showing the error message This value is invalid in a tooltip.

// Code in the client-side JavaScript file for the breakout editor
(() => {
  // ...

  if (isValid) {
    emit({
      type: 'sfcc:valid',
      payload: {
        valid: false,
        message: 'This value is invalid.'
      }
    });
  } else {
    emit({
      type: 'sfcc:valid',
      payload: true
    });
  }

  // ...
})();