---
gid: 3a02d26a-786e-42e5-abc7-c522b42d878b
title: Connect admin extensions
description: Learn how to use admin blocks and actions together to create cohesive features in the Shopify admin.
---

<Repo extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react" />

<Picker name="extension">
  <PickerOption name="react" />
</Picker>

<Overview>
  This guide is the third part in a five-part tutorial series on how to build a feature using admin action and block extensions. Before starting this guide, you'll need to build or copy code from the [admin](/docs/apps/build/admin/actions-blocks/build-admin-action) and [block](/docs/apps/build/admin/actions-blocks/build-admin-block) extension guides.

  ![A buyer clicking the edit button on an issue from the block extension, editing it in the action and saving it. The edited data appears on the block.](/assets/admin/admin-actions-and-block/connect-action-and-block/block-action-connected.gif)

  At this point in the tutorial series, you can create new issues using an [admin action](/docs/apps/build/admin/actions-blocks/build-admin-action) and you can view and delete the created issues using an [admin block](/docs/apps/build/admin/actions-blocks/build-admin-block). While this is functional, the merchant experience would be better if all of the features could be used in the same location.

  Now, you'll modify the block and the action so that merchants can create and edit issues directly from the block.

  ## What you'll learn

  In this tutorial, you'll learn how to do the following tasks:

  - Update your admin block extension to launch action extensions with an intent, to indicate whether it should edit or create a resource

  - Update your admin action extension, so that it can listen for the intent and edit the appropriate resource

  - Run the extensions locally and test them on a development store
</Overview>

<Requirements>
  <Requirement href="/docs/apps/admin/admin-actions-and-blocks" label="Tutorials">
    You've completed or copied the code from [Getting started with admin actions](/docs/apps/build/admin/actions-blocks/build-admin-action) and [Getting started with admin blocks](/docs/apps/build/admin/actions-blocks/build-admin-block).
  </Requirement>

</Requirements>

<StepSection>
  <Step>
    ## Add a button to open your action extension form

    Add a button that lets users create new issues directly from the block extension so that they don't have to navigate to **More actions** at the top of the page.

    This button launches the same action extension that you've already written, so you don't have to duplicate your code.

    <Substep>
      <CodeRef
        extension="react"
        tag="connect-block-action.nav-api"
        href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-block/src/BlockExtension-connect.jsx"
        tabTitle="BlockExtension.jsx"
      />

      Access the [navigation](/docs/api/admin-extensions/api/block-extension-api) method from the API.
    </Substep>

    <Substep>
      <CodeRef
        extension="react"
        tag="connect-block-action.create-issue"
        href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-block/src/BlockExtension-connect.jsx"
        tabTitle="BlockExtension.jsx"
      />

      Add a button to call `navigation.navigate`, passing your extension handle to the method as `extension:{extension-handle}`. The extension handle is defined in your extensions `shopify.extension.toml` file.

      <Notice type="note" title="Note">
        Currently, only navigation from an admin block to an admin action extension on the same resource page is supported. For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`).
      </Notice>
    </Substep>

    <Substep>
      <CodeRef
        extension="react"
        tag="connect-block-action.no-issues"
        href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-block/src/BlockExtension-connect.jsx"
        tabTitle="BlockExtension.jsx"
      />

      Add a button to display when there are no issues to show.
    </Substep>
  </Step>

  <Step>
    ## Modify the block to launch actions with intents for editing

    Add an **Edit** button to each issue on the block extension. When clicked, this button launches the action extension using the same [navigation API](/docs/api/admin-extensions/api/block-extension-api) that you used in the previous part of this tutorial.

    <Substep>
      <CodeRef
        extension="react"
        tag="connect-block-action.edit-button"
        href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-block/src/BlockExtension-connect.jsx"
        tabTitle="BlockExtension.jsx"
      />

      Add a button for each issue. This time, when you call navigate for the **Edit** button, you'll also add a URL parameter that specifies the ID of issue as `extension:admin-issue-tracker-action?issueId={id}`.
    </Substep>
  </Step>

  <Step>
    ## Modify action extension to edit an issue when launched with an intent

    Edit the action to check for the presence of the parameter that you passed.

    <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-action/src/ActionExtension-connect.jsx" tabTitle="ActionExtension.jsx" tag="connect-action-block.intent-one"/>

      You'll use the `intents` API, which gives your extension access to information about how it's been launched. When the action extension detects an `issueId` parameter in the launch URL from the API, it edits the issue with the ID that that's been passed. To enable editing, you'll first fetch the issue's existing data, and then use it to populate the form.
    </Substep>

    <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-action/src/ActionExtension-connect.jsx" tabTitle="ActionExtension.jsx" tag="connect-action-block.intent-two"/>

      When the user saves the issue, you'll edit the existing issue instead of creating a new one.
    </Substep>
  </Step>

  <Step>
    ## Test the extensions

    1. Navigate to your app directory.

    1. To build and preview your app, either start or restart your server with the following command:

        <Codeblock terminal>
          ```bash
          shopify app dev
          ```
        </Codeblock>

    1.  Press `p` to open the developer console.

    1.  In the developer console page, click on the preview link for the issue tracker block extension.

    1. The product details page opens. If you don't have a product in your store, then you need to create one.

    1. To find your block, scroll to the bottom of the page. It should display the issues that you've created so far.

    1. On one of the issues, click **Edit** button. This should open up an action extension that's pre-populated with the issue extension.

    1. Edit the issue and save it. The updated issue should be reflected in the block at the bottom of the page.

    ![A gif showing a user clicking the edit button on an issue from the block extension, editing it in the action and saving it. The edited data appears on the block.](/assets/admin/admin-actions-and-block/connect-action-and-block/block-action-connected.gif)

    {/* <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-action/src/ActionExtension-connect.jsx" />
    </Substep> */}
  </Step>
</StepSection>

<NextSteps>
  ### Next steps

  <CardGrid>
    <LinkCard href="/docs/apps/admin/admin-actions-and-blocks/connect-extension-and-backend">
      #### Connect your app's backend

      Complete the next guide in this tutorial series by connecting to your app's backend.
    </LinkCard>

    <LinkCard href="/docs/api/admin-extensions">
      #### Admin UI extension APIs

      Learn about the admin UI extensions, components, and APIs.
    </LinkCard>

    <LinkCard href="/docs/apps/deployment/app-versions">
      #### Deployment

      Learn how to deploy your extension to merchants.
    </LinkCard>

    <LinkCard href="https://github.com/Shopify/ui-extensions">
      #### Issues

      File any issues or feature requests on the UI Extensions GitHub repository.
    </LinkCard>
  </CardGrid>
</NextSteps>