close

Filter

loading table of contents...

Studio Developer Manual / Version 2301

Table Of Contents

9.11 Managed Actions

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.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.