Feature: #89061 - Introduce Notification Actions¶

Description¶

Notifications rendered by the TYPO3/CMS/Backend/Notification module are now able to render action buttons. Each notification method (info(), success() etc) accepts an array of actions, each action is described by a label and a pre-defined action type, containing a callback.

However, notifications flagged with a duration will still disappear, unless an action is taken.

Important

Such tasks must never be mandatory to be executed. This API is meant to suggest certain actions without enforcing them. If a user is supposed to take immediate actions consider using modals instead.

Example:

require([
  'TYPO3/CMS/Backend/ActionButton/ImmediateAction',
  'TYPO3/CMS/Backend/ActionButton/DeferredAction',
  'TYPO3/CMS/Backend/Notification'
], function(ImmediateAction, DeferredAction, Notification) {
  const immediateActionCallback = new ImmediateAction(function () { /* your action code */ });
  Notification.info(
    'Great! We are almost done here...',
    'Common default settings have been applied based on your previous input.',
    0,
    [
      {label: 'Show settings', action: immediateActionCallback}
    ]
  );
});

ImmediateAction¶

An action of type ImmediateAction (TYPO3/CMS/Backend/ActionButtons/ImmediateAction) is executed directly on click and closes the notification. This action type is suitable for e.g. linking to a backend module.

The class accepts a callback method executing very simple logic.

Example:

const immediateActionCallback = new ImmediateAction(function () {
  require(['TYPO3/CMS/Backend/ModuleMenu'], function (ModuleMenu) {
    ModuleMenu.showModule('web_layout');
  });
});

DeferredAction¶

An action of type DeferredAction (TYPO3/CMS/Backend/ActionButtons/DeferredAction) is recommended when a long-lasting task is executed, e.g. an AJAX request.

This class accepts a callback method which must return either a resolved or rejected promise.

The DeferredAction replaces the action button with a spinner icon to indicate a task will take some time. It's still possible to dismiss a notification, which will not stop the execution.

Example:

const deferredActionCallback = new DeferredAction(function () {
  const myAction = async function() {
    return await 'something';
  }

  return myAction();
});

const anotherDeferredActionCallback = new DeferredAction(function () {
  // do some old-fashioned jQuery stuff
  return Promise.resolve($.ajax(/* AJAX configuration */));
});