showFlag

The showFlag bridge method enables UI Kit and custom UI apps to open flags in the product's flag group.

Function signature

1
2
function showFlag(flagOptions: FlagOptions): {
  close: () => Promise<boolean | void>;
};

interface FlagOptions {
  id: string;
  title?: string;
  description?: string;
  type?: "info" | "success" | "warning" | "error";
  appearance?: "info" | "success" | "warning" | "error";
  actions?: FlagAction[];
  isAutoDismiss?: boolean;
}

interface FlagAction {
  text: string;
  onClick: () => void;
}

Arguments

• flagOptions
  • id: A unique string identifier for the flag. This property is required.
  • title: The bold text shown at the top of the flag.
  • description: The secondary content shown below the flag's title.
  • type: The type of the flag. This will determine the flag's icon.
  • appearance: Makes the flag appearance bold if provided.
  • actions: The list of clickable actions to be shown at the bottom of the flag. You can incorporate the router object's navigate method within these actions to direct users to a different page in the same tab.
  • isAutoDismiss: Whether the flag is auto-dismissable or not. If set to true, the flag will automatically close after 8 seconds.

Returns

• A flag object that contains a close function.

Example

1
2
import React from "react";
import { showFlag } from "@forge/bridge";
import { Heading, Button, ButtonGroup } from "@forge/react";

const App = () => {
  const flag = (type) => {
    showFlag({
      id: "flag",
      title: "Flag",
      type,
      appearance: type,
      description: "Flag description",
      actions: [
        {
          text: "Flag action",
          onClick: () => {
            console.log("Flag action clicked");
          },
        },
      ],
      isAutoDismiss: true,
    });
  };

  return (
    <>
      <Heading>Show Flag Component</Heading>
      <ButtonGroup>
        <Button onClick={() => flag("info")}>Info Flag</Button>
        <Button onClick={() => flag("success")}>Success Flag</Button>
        <Button onClick={() => flag("warning")}>Warning Flag</Button>
        <Button onClick={() => flag("error")}>Error Flag</Button>
        <Button onClick={flag}>Default Flag</Button>
      </ButtonGroup>
    </>
  );
};

See Jira Project Stats App for showFlag used in an app.