Forge's EAP offers experimental features to selected users for testing and feedback purposes. These features are unsupported and not recommended for use in production environments. They are also subject to change without notice. For more details, see Forge EAP, Preview, and GA.

To participate, you can sign up for the EAP here.

Note: You must also opt-in to the open beta of Dashboards in Atlassian Home. See the guide on how to opt-in.

Hook for accessing and updating widget configuration. You can call the hook anywhere in your code, as it subscribes to configuration updates. The configuration data loads asynchronously, so the output is undefined while loading.

For module configuration and setup instructions, see Dashboard widget.

Installation

Install Forge hooks using the @forge/hooks npm package. Import @forge/hooks using a bundler, such as Webpack.

Usage

To add the useWidgetConfig hook to your app:

1
2
import { useWidgetConfig } from "@forge/hooks/dashboards";

Here is an example of accessing and updating widget configuration:

1
2
import React from "react";
import { useWidgetConfig } from "@forge/hooks/dashboards";

function MyWidget() {
  const { config, updateConfig } = useWidgetConfig();

  const handleUpdate = async () => {
    await updateConfig({
      title: "New Title",
    });
  };

  return (
    <div>
      <h1>{config?.title}</h1>
      <button onClick={handleUpdate}>Update Title</button>
    </div>
  );
}

Returns

config (Record<string, unknown> | undefined): Current widget configuration object. Returns undefined while loading or if no configuration is set.
updateConfig (function): Function to update configuration. It will also trigger an update of the live editing view.