loading table of contents...

Studio Developer Manual / Version 2310

Table Of Contents

9.10.3 Adding a Button with a Custom Action

Sometimes it is necessary to develop a custom action, for example to open a special window or to start a wizard. In Section 5.1.3, “Actions” you will find a more detailed explanation of actions, but the recipe shown here should be enough in many cases.

All actions inherit from Action. For example, an action MyCustomAction might look like this:

import Config from "@jangaroo/runtime/Config";
import Action from "@jangaroo/ext-ts/Action";

interface MyCustomActionConfig extends Config<Action> {
  amount?: number;

class MyCustomAction extends Action {
  declare Config: MyCustomActionConfig;

  constructor(config:Config<MyCustomAction>) {
    this.setHandler(this.#handleAction, this);

  #handleAction():void {
    // do something, using `this.initialConfig.amount`

export default MyCustomAction;

Example 9.37. Creating a custom action

The action can then be used inside a menu item or a button:

import Config from "@jangaroo/runtime/Config";
import Button from "@jangaroo/ext-ts/button/Button";
import MyCustomAction from "./MyCustomAction";

Config(Button, {
  baseAction: new MyCustomAction({
    text: "do something",

Example 9.38. Using a custom action

For example, such a button with a base action might by added to the Header toolbar or the Actions toolbar as shown in the previous sections.

Note that you can use all parameters inherited from Action, like text in the example above.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

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