-
Notifications
You must be signed in to change notification settings - Fork 22
Add admin tools data template #358
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
b350f97
bd14fb9
37b6e7a
6bb3ac1
e284d13
767e10a
34f1430
f128e5b
148bb26
27bab0a
29bd4ef
74436c2
0289e95
158ea11
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| # Admin App Tools Extension | ||
|
|
||
| Admin app tools extensions enable app developers to provide data and search functionality to Sidekick in the Shopify Admin. These extensions allow Sidekick to query your app's external data sources and surface results to merchants. | ||
|
|
||
| Learn more about Admin app tools extensions in Shopify's [developer documentation](https://shopify.dev/docs/apps/build/sidekick/build-app-data). | ||
|
|
||
| --- | ||
|
|
||
| ## Get started with this extension | ||
|
|
||
| This extension demonstrates adding search functionality for Sidekick. After deployment, Sidekick will be able to run the search tool to query for the app's data. | ||
|
|
||
| ### Key files | ||
|
|
||
| - `src/index.js` - Main extension code that defines the search tool execution logic | ||
| - `tools.json` - Schema definition for the search tool's inputs and outputs | ||
|
|
||
| ### How it works | ||
|
|
||
| 1. The extension registers a `search` tool using `shopify.tools.register()` | ||
| 2. When Sidekick is asked to search for a resource, your search function is called with the query | ||
| 3. Your function returns results matching the schema defined in `tools.json` | ||
|
|
||
| ### Customizing the search | ||
|
|
||
| Edit `src/index.js` to implement your search logic: | ||
|
|
||
| 1. Fetch data from your app's backend or API | ||
| 2. Filter/search the data based on the `query` input | ||
| 3. Return results in the expected format with pagination info | ||
|
|
||
| ### Testing locally | ||
|
|
||
| Run `shopify app dev` and click on the "admin.app.tools.data" preview link in the Dev Console to test your extension in development mode |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| ## When to Use This App's Tools | ||
|
|
||
| Use these tools when the merchant asks about: | ||
|
|
||
| - Data or records from apps | ||
|
|
||
| ## Important Guidelines | ||
|
|
||
| - Use the `query` parameter to pass the merchant's search terms | ||
| - Results are paginated - use `first` and `after` parameters for large result sets | ||
|
|
||
| ## Common Workflows | ||
|
|
||
| ### Searching for Data | ||
|
|
||
| 1. Understand what the merchant is looking for | ||
| 2. Use the search tool with their query | ||
| 3. Present the results with relevant details (title, type, URL if available) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "name": "{{ name }}", | ||
| "description": "Search extension for your app" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "name": "{{ name }}", | ||
| "description": "Extension de recherche pour votre application" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "name": "{{ handle }}", | ||
| "private": true, | ||
| "version": "1.0.0", | ||
| "license": "UNLICENSED", | ||
| "dependencies": { | ||
| "@shopify/ui-extensions": "~2025.10.12" | ||
|
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This change is required for |
||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| api_version = "2025-10" | ||
|
|
||
| [[extensions]] | ||
| # Change the merchant-facing name of the extension in locales/en.default.json | ||
| name = "t:name" | ||
| handle = "{{ handle }}" | ||
| type = "ui_extension" | ||
| {% if uid %}uid = "{{ uid }}"{% endif %} | ||
| description = "t:description" | ||
|
|
||
| [[extensions.targeting]] | ||
| module = "./src/index.{{ srcFileExtension }}" | ||
| target = "admin.app.tools.data" | ||
| tools = "./tools.json" | ||
| instructions = "./instructions.md" |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| export default async function extension() { | ||
| shopify.tools.register('search', (input) => { | ||
| const {query = '', first = 10, after} = input; | ||
|
|
||
| // TODO: Implement your search logic here | ||
|
|
||
| return { | ||
| results: [], | ||
| pageInfo: { | ||
| hasNextPage: false, | ||
| hasPreviousPage: false, | ||
| startCursor: null, | ||
| endCursor: null, | ||
| }, | ||
| }; | ||
| }); | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| [ | ||
| { | ||
| "name": "search", | ||
| "description": "Search for data from this app's external data source", | ||
| "inputSchema": { | ||
| "type": "object", | ||
| "properties": { | ||
| "query": { | ||
| "type": "string", | ||
| "description": "Search query string" | ||
| }, | ||
| "after": { | ||
| "type": "string", | ||
| "description": "Cursor for pagination - returns elements after this cursor" | ||
| }, | ||
| "first": { | ||
| "type": "integer", | ||
| "description": "Number of results to return (default: 10)" | ||
| } | ||
| }, | ||
| "required": [] | ||
| }, | ||
| "outputSchema": { | ||
| "type": "object", | ||
| "properties": { | ||
| "results": { | ||
| "type": "array", | ||
| "items": { | ||
| "type": "object", | ||
| "properties": { | ||
| "id": { | ||
| "type": "string", | ||
| "description": "Unique identifier for the result" | ||
| }, | ||
| "type": { | ||
| "type": "string", | ||
| "description": "The type/category of the result" | ||
| }, | ||
| "url": { | ||
| "type": "string", | ||
| "description": "URL to view or edit the resource" | ||
| }, | ||
| "title": { | ||
| "type": "string", | ||
| "description": "Display title for the result" | ||
| } | ||
| }, | ||
| "required": ["id", "type"] | ||
| } | ||
| }, | ||
| "pageInfo": { | ||
| "type": "object", | ||
| "properties": { | ||
| "hasNextPage": { | ||
| "type": "boolean", | ||
| "description": "Whether there are more results available" | ||
| }, | ||
| "hasPreviousPage": { | ||
| "type": "boolean", | ||
| "description": "Whether there are previous results available" | ||
| }, | ||
| "startCursor": { | ||
| "type": "string", | ||
| "nullable": true, | ||
| "description": "Cursor for the first item in results" | ||
| }, | ||
| "endCursor": { | ||
| "type": "string", | ||
| "nullable": true, | ||
| "description": "Cursor for the last item in results" | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "ES2020", | ||
| "checkJs": true, | ||
| "allowJs": true, | ||
| "moduleResolution": "node", | ||
| "esModuleInterop": true, | ||
| "noEmit": true | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -399,6 +399,25 @@ | |
| ], | ||
| "minimumCliVersion": "3.85.3" | ||
| }, | ||
| { | ||
| "identifier": "app_tools", | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you make a PR to update the dev docs to match. The convention is to use
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. PR created here: https://github.com/Shopify/shopify-dev/pull/67157 |
||
| "name": "Admin app tools", | ||
| "defaultName": "app-tools", | ||
| "group": "UI extensions", | ||
| "supportLinks": [], | ||
| "url": "https://github.com/Shopify/extensions-templates", | ||
| "type": "ui_extension", | ||
| "extensionPoints": [], | ||
| "supportedFlavors": [ | ||
| { | ||
| "name": "JavaScript", | ||
| "value": "vanilla-js", | ||
| "path": "admin-tools" | ||
| } | ||
| ], | ||
| "organizationExpFlags": ["d7c1b4ad"], | ||
| "minimumCliVersion": "3.90.0" | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This |
||
| }, | ||
| { | ||
| "identifier": "admin_print_legacy", | ||
| "name": "Admin print action", | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.