Action type

The actionType property specifies how an action is executed by an app and can be utilized by supported action modules. An action is a task that executed by an app when a user selects the app menu item. When declaring actionType, there are two options:

• modal (default)`, which displays the app's content within a modal.

• dynamic, which allows for programmatic decision-making at runtime to determine how the action is executed and rendered. With this flexibility, you can perform asynchronous actions, such as exporting data, and have control over the UI components utilized in the application, such as maintaining multiple React portal UI components throughout the application lifecycle.

Modal

modal displays the app's content within a modal, with the size determined by the viewportSize property in the manifest file. As modal is the default behavior for action modules, if actionType is not defined, modal will be used. This behavior is consistent with existing modules, including jira:issueAction and confluence:contentAction, where the app is always rendered within a modal.

Use cases for modal include:

• If additional input is required by the user, such as a confirmation button.
• If the user experience for all required functionalities can be implemented within a single fixed-size modal, such as simple configurations or information displays.

Dynamic

dynamic allows for programmatic decision-making at runtime regarding the execution or rendering of the application.

Use cases for dynamic include:

• Asynchronous workloads that don’t require additional user input, such as exporting data.

• Tasks that require more flexibility or control over the UI components utilized in the application. This could include:

  • Using a UI Kit Modal instead of the default modal so that you can specify the modal properties directly at runtime.

  • Maintaining multiple UI components throughout the application lifecycle. For example, configuring a report setup in a smaller modal and subsequently displaying the report in a full-screen modal after configuration.

Examples

1
2
import React from 'react';
import ForgeReconciler, { Text } from '@forge/react';
import { view } from '@forge/bridge';

const App = () => {
  return <Text>App Content</Text>;
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

1
2
import React from 'react';
import ForgeReconciler, { Modal, ModalTransition, Button, Text } from '@forge/react';
import { view, showFlag } from '@forge/bridge';

const App = () => {
  const displayFlag = () => {
    showFlag({
      id: 'hello-world',
      title: 'Hello World',
      type: 'info',
      description: 'hi',
    });
  };

  return (
    <ModalTransition>
      <Modal onClose={() => view.close()}>
        <Text>App Content</Text>
        <Button onClick={displayFlag}>Display Flag</Button>
      </Modal>
    </ModalTransition>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Supported modules

actionType can be utilized by the following modules:

Example app