How do I use 'toast' in admin extension?

I want to display a confirmation to the merchant after they press a button in our admin extension react app (e.g. a ‘save’ action). I couldn’t find any way of using App Bridge api, like the toast for example? I am resorting to displaying an icon on request finishing.

I tried the global ‘shopify’ object and ‘useAppBridge’ but neither seem to work. A code snippet would be very useful.

Thanks.

Hi - just to confirm, you’re looking to use this: Toast

Yes, that’s the one. I couldn’t get it to work with “admin.product-details.block.render” nor “admin.product-variant-details.block.render”.

Can you share your code where you’re trying to add this, and remove any sensitive info?

Example “admin-block” code I used (generated from the CLI), also tried in an useEffect and that didn’t work:

BlockExtension.jsx

import {
  reactExtension,
  useApi,
  AdminBlock,
  BlockStack,
  Text,
  Button,
} from "@shopify/ui-extensions-react/admin";
import { useAppBridge } from "@shopify/app-bridge-react";

// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
const TARGET = "admin.product-details.block.render";

export default reactExtension(TARGET, () => <App />);

function App() {
  // The useApi hook provides access to several useful APIs like i18n and data.
  const { i18n, data } = useApi(TARGET);
  console.log({ data });

  const shopify = useAppBridge(); // comment out to use global shopify

  return (
    // The AdminBlock component provides an API for setting the title of the Block extension wrapper.
    <AdminBlock title="My Block Extension">
      <BlockStack>
        <Text fontWeight="bold">{i18n.translate("welcome", { TARGET })}</Text>
        <Button
          onClick={() => {
            console.log("test");
            shopify.toast.show("Hi");
          }}
        >
          Test
        </Button>
      </BlockStack>
    </AdminBlock>
  );
}

Thanks for sharing how you’re trying to implement this - have gotten in touch with the relevant team for their recommendation.

Hi again,

So this API is not intended to be used for block extensions. You’ll need to use the APIs which are listed here: https://shopify.dev/docs/api/admin-extensions/unstable/api/block-extension-api

Also, you can’t use @shopify/app-bridge-react in extensions - it’s only usable for your apps.