Managed actions are used to reuse the same action instance for different components, for example a button and a menu item, and even for a keyboard shortcut. This not only saves action instances, but can be crucial for keeping action state consistent.

Unlike previous examples, a managed action is not added to a button or menu item directly. Instead, a managed action is registered by giving it an actionId and adding it to the actionList property of a to a container. To add a managed action to an existing container, use a Studio plugin rule and the AddArrayItemsPlugin with arrayProperty="actionList". Afterwards buttons that are located somewhere below this container may access the action using an ActionRef or execute them via a keyboard shortcut. The following example explains the implementation in detail.

import Config from "@jangaroo/runtime/Config";
import ConfigUtils from "@jangaroo/runtime/ConfigUtils";
import AddArrayItemsPlugin from "@coremedia/studio-client.ext.ui-components/plugins/AddArrayItemsPlugin";
import StudioPlugin from "@coremedia/studio-client.main.editor-components/configuration/StudioPlugin";
import EditorMainView from "@coremedia/studio-client.main.editor-components/sdk/desktop/EditorMainView";
import MyGlobalAction from "./MyGlobalAction";

class CustomStudioPlugin extends StudioPlugin {
  static MY_GLOBAL_ACTION_ID:string = "myGlobalAction";

  constructor(config:Config<CustomStudioPlugin> = null){
    super(ConfigUtils.apply(Config(CustomStudioPlugin, {

      rules: [
        Config(EditorMainView, {
          plugins: [
            Config(AddArrayItemsPlugin, {
              arrayProperty: "actionList",
              items: [
                new MyGlobalAction({
                  actionId: CustomStudioPlugin.MY_GLOBAL_ACTION_ID,
                }),
              ],
            }),
          ],
        }),
      ],
    }), config));
  }
}

export default CustomStudioPlugin;

The example shows how MyGlobalAction is added to the action list of the EditorMainView under a unique actionId. The action is now available for all child components of this main view container.

In the following, it is shown how a reference to this action is used for a button that is plugged into the RepositoryToolbar of the Studio's CollectionView (library).

import Config from "@jangaroo/runtime/Config";
import ConfigUtils from "@jangaroo/runtime/ConfigUtils";
import StudioPlugin from "@coremedia/studio-client.main.editor-components/configuration/StudioPlugin";
import CollectionView from "@coremedia/studio-client.main.editor-components/sdk/collectionview/CollectionView";

class CustomStudioPlugin extends StudioPlugin {
  static MY_GLOBAL_ACTION_ID:string = "myGlobalAction";

  constructor(config:Config<CustomStudioPlugin> = null){
    super(ConfigUtils.apply(Config(CustomStudioPlugin, {
      rules: [
        Config(CollectionView, {
          plugins: [
            Config(CollectionViewStudioPlugin),
          ],
        }),
      ],
    }), config));
  }
}

export default CustomStudioPlugin;

//--------------------

import { as } from "@jangaroo/runtime";
import ActionRef from "@jangaroo/ext-ts/ActionRef";
import AddItemsPlugin from "@coremedia/studio-client.ext.ui-components/plugins/AddItemsPlugin";
import NestedRulesPlugin from "@coremedia/studio-client.ext.ui-components/plugins/NestedRulesPlugin";
import IconButton from "@coremedia/studio-client.ext.ui-components/components/IconButton";
import ICollectionView from "@coremedia/studio-client.main.editor-components/sdk/collectionview/ICollectionView";
import RepositoryToolbar from "@coremedia/studio-client.main.editor-components/sdk/collectionview/RepositoryToolbar";

interface CollectionViewStudioPluginConfig extends Config<NestedRulesPlugin> {
}

class CollectionViewStudioPlugin extends NestedRulesPlugin {
  declare Config: CollectionViewStudioPluginConfig;

  #myCollectionView:ICollectionView = null;

  constructor(config:Config<CollectionViewStudioPlugin> = null){
    super((()=>{
      this.#myCollectionView = as(config.cmp, ICollectionView);
      return ConfigUtils.apply(Config(CollectionViewStudioPlugin, {

        rules: [
          Config(RepositoryToolbar, {
            plugins: [
              Config(AddItemsPlugin, {
                items: [
                  Config(IconButton, {
                    baseAction: Config(ActionRef, {actionId: CustomStudioPlugin.MY_GLOBAL_ACTION_ID}),
                  }),
                ],
              }),
            ],
          }),
        ],
      }), config);
    })());
  }
}

export default CollectionViewStudioPlugin;

For any action with an actionId, a keyboard shortcut can be defined, which is described in the next section.