Getting started with connecting admin blocks and actions
This guide is the third part in a three-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 and block extension guides.
At this point in the tutorial series, you can create new issues using an admin action and you can view and delete the created issues using an admin block. Now, you'll modify the block and the action to create an editing flow so that users can select an issue from the block and edit it using the same action that they used to create it.
What you'll learnAnchor link to section titled "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 that it should edit 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
RequirementsAnchor link to section titled "Requirements"
Step 1: Modify the block to launch actions with intents for editingAnchor link to section titled "Step 1: 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 navigate API that you used in the previous part of this tutorial series. This time, when you call navigate for the Edit button, you'll also add a URL parameter that specifies the ID of issue as
To add the Edit button, modify
BlockExtension.jsx to match the following code:
Step 2: Modify action extension to edit an issue when launched with an intentAnchor link to section titled "Step 2: 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. 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 issues's existing data, and then use it to populate the form. When the user saves the issue, you'll edit the existing issue instead of creating a new one.
To add this functionality, modify
ActionExtension.jsx from your admin action to match the following code:
Step 3: Test the extensionsAnchor link to section titled "Step 3: Test the extensions"
Test the extensions with the following steps:
Navigate to your app directory.
To build and preview your app, either start or restart your server with the following command:
pto open the developer console.
In the developer console page, click on the preview link for the issue tracker block extension.
The product details page opens. If you don't have a product in your store, then you need to create one.
To find your block, scroll to the bottom of the page. It should display the issues that you've created so far.
On one of the issues, click Edit button. This should open up an action extension that's pre-populated with the issue extension.
Edit the issue and save it. The updated issue should be reflected in the block at the bottom of the page.