Hide admin UI extensions

This guide is the final part of a five-part tutorial series that describes how to build UI extensions that display as actions and blocks in Shopify admin. Before starting this guide, you'll need to build or copy the code for the issue tracker admin action and admin block from the tutorial for connecting UI extensions to your app's backend.

Alternatively, you can complete this section immediately after completing the build an admin action and build an admin block tutorials.

So far you've created UI extensions that add an action and block that allows merchants to create and track issues in their Shopify admin. In this tutorial, you'll learn how to hide a UI extension when it's not relevant to the target.

To demonstrate conditional logic, we'll check the variant count of a product to determine if the UI extension should be visible. If the product has more than one variant, then the UI extension will be visible. If the product has only one variant, then the UI extension will be hidden.

Anchor to What you'll learnWhat you'll learn

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

Minimize the block when it's not relevant to the target.
Hide the menu item that launches the action when it's not relevant to the target.

Requirements

Tutorials

You've completed or copied the code from the admin action tutorial and the admin block tutorial.

Project

Extension:

View on GitHub

Anchor to Collapse an admin blockCollapse an admin block

If an admin block isn't relevant on a page, then you can collapse it to minimize disruption for merchants, while still enabling them to see that they have pinned it to the page. To minimize an admin block, you can return null inside the AdminBlock component of your UI extension.

Anchor to Use the ,[object Object], function to determine if the admin block should be visible.Use the `getIssues` function to determine if the admin block should be visible.

Initialize a state variable called shouldRender and set it to false. You're already using the getIssues function to get metafield values. Using the same function, check if the product has more than one variant. If it does, then set the shouldRender state to true.

/extensions/issue-tracker-conditional-block/src/BlockExtension.jsx

import { useEffect, useMemo, useState } from "react";

import {

AdminBlock,

Box,

Button,

Divider,

Form,

Icon,

InlineStack,

ProgressIndicator,

Select,

Text,

reactExtension,

useApi,

} from "@shopify/ui-extensions-react/admin";

import { getIssues, updateIssues } from "./utils";

// The target used here must match the target used in the extension's .toml file at ./shopify.extension.toml

const TARGET = "admin.product-details.block.render";

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

const PAGE_SIZE = 3;

function App() {

const { data, i18n } = useApi(TARGET);

const [issues, setIssues] = useState([]);

const productId = data.selected[0].id;

const issuesCount = issues.length;

const totalPages = issuesCount / PAGE_SIZE;

const [loading, setLoading] = useState(true);

const [initialValues, setInitialValues] = useState([]);

const [currentPage, setCurrentPage] = useState(1);

const [shouldRender, setShouldRender] = useState(false);

Anchor to Conditionally return JSX content based on the result of the getProductVariants function.Conditionally return JSX content based on the result of the getProductVariants function.

If shouldRender is true, then render the block's content. If it's false, then return null to collapse the block.

Use the collapsedSummary to provide meaningful information to the merchant about why the block is collapsed.

/extensions/issue-tracker-conditional-block/src/BlockExtension.jsx

import { useEffect, useMemo, useState } from "react";

import {

AdminBlock,

Box,

Button,

Divider,

Form,

Icon,

InlineStack,

ProgressIndicator,

Select,

Text,

reactExtension,

useApi,

} from "@shopify/ui-extensions-react/admin";

import { getIssues, updateIssues } from "./utils";

// The target used here must match the target used in the extension's .toml file at ./shopify.extension.toml

const TARGET = "admin.product-details.block.render";

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

const PAGE_SIZE = 3;

function App() {

const { data, i18n } = useApi(TARGET);

const [issues, setIssues] = useState([]);

const productId = data.selected[0].id;

const issuesCount = issues.length;

const totalPages = issuesCount / PAGE_SIZE;

const [loading, setLoading] = useState(true);

const [initialValues, setInitialValues] = useState([]);

const [currentPage, setCurrentPage] = useState(1);

const [shouldRender, setShouldRender] = useState(false);

Anchor to Test hiding the admin blockTest hiding the admin block

After you've updated the UI extension, test that the admin block collapses with the following steps:

Navigate to your app directory:

Terminal
cd <directory>
To build and preview your app, either start or restart your server with the following command:

Terminal
shopify app dev
Press p to open the developer console.
In the Dev Console page, click on the preview link for the issue tracker UI extension.
If there are any product variants, delete them and confirm that the admin block is collapsed.
Add a product variant with two options and confirm that the admin block expands.

Anchor to Hide an admin actionHide an admin action

Hiding a UI extension's admin action uses a second script to control the visibility of the action in the More actions menu. This script only runs after the page is loaded and doesn't maintain state.

Add a field to your TOML file to specify the path to the shouldRender script.

Create a condition/shouldRender.js file in the same src directory as the extension that you want to control.

Use the should-render target of the extension that you want to control.

So, for an extensions with the target admin.product-details.action.render, the should-render target would be admin.product-details.action.should-render.

Create a function called getProductVariants to fetch variants of the product in your utils.js file.

/extensions/issue-tracker-conditional-action/src/utils.js

export async function updateIssues(id, newIssues) {

// This example uses metafields to store the data. For more information, refer to https://shopify.dev/docs/apps/custom-data/metafields.

return await makeGraphQLQuery(

`mutation SetMetafield($namespace: String!, $ownerId: ID!, $key: String!, $type: String!, $value: String!) {

metafieldDefinitionCreate(

definition: {namespace: $namespace, key: $key, name: "Tracked Issues", ownerType: PRODUCT, type: $type, access: {admin: MERCHANT_READ_WRITE}}

) {

createdDefinition {

}

metafieldsSet(metafields: [{ownerId:$ownerId, namespace:$namespace, key:$key, type:$type, value:$value}]) {

userErrors {

field

message

code

}

{

ownerId: id,

namespace: "$app:issues",

key: "issues",

type: "json",

value: JSON.stringify(newIssues),

}

);

}

export async function getIssues(productId) {

// This example uses metafields to store the data. For more information, refer to https://shopify.dev/docs/apps/custom-data/metafields.

const res = await makeGraphQLQuery(

`query Product($id: ID!) {

product(id: $id) {

metafield(namespace: "$app:issues", key:"issues") {

value

}

{ id: productId }

);

if (res?.data?.product?.metafield?.value) {

return JSON.parse(res.data.product.metafield.value);

}

async function makeGraphQLQuery(query, variables) {

const graphQLQuery = {

query,

variables,

};

const res = await fetch("shopify:admin/api/graphql.json", {

method: "POST",

body: JSON.stringify(graphQLQuery),

});

if (!res.ok) {

console.error("Network error");

}

return await res.json();

}

export async function getProductVariants(data) {

const getProductQuery = {

query: `query Product($id: ID!) {

product(id: $id) {

title

variants(first: 2) {

edges {

node {

}

}`,

variables: {id: data.selected[0].id},

};

const res = await fetch("shopify:admin/api/graphql.json", {

method: "POST",

body: JSON.stringify(getProductQuery),

});

if (!res.ok) {

console.error('Network error');

}

const productData = await res.json();

return productData.data.product.variants.edges;

};

Use the getProductVariants function to determine the number of variants on the product. Return an object with a key of display and a Boolean value to control whether the action extension menu item is visible.

Anchor to Test hiding the admin actionTest hiding the admin action

After you've updated the UI extensions that provide your admin action and block, test them with the following steps:

Navigate to your app directory:

Terminal
cd <directory>
To build and preview your app, either start or restart your server with the following command:

Terminal
shopify app dev
Press p to open the developer console.
Delete any variants that were added in the previous section.
If there are any product variants, delete them and confirm that the admin action is not visible in the More actions menu.
Add a product variant with two options and confirm that the admin action is visible in the More actions menu.

/extensions/issue-tracker-conditional-block/src/BlockExtension.jsx

import { useEffect, useMemo, useState } from "react";

import {

AdminBlock,

Box,

Button,

Divider,

Form,

Icon,

InlineStack,

ProgressIndicator,

Select,

Text,

reactExtension,

useApi,

} from "@shopify/ui-extensions-react/admin";

import { getIssues, updateIssues } from "./utils";

// The target used here must match the target used in the extension's .toml file at ./shopify.extension.toml

const TARGET = "admin.product-details.block.render";

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

const PAGE_SIZE = 3;

function App() {

const { data, i18n } = useApi(TARGET);

const [issues, setIssues] = useState([]);

const productId = data.selected[0].id;

const issuesCount = issues.length;

const totalPages = issuesCount / PAGE_SIZE;

const [loading, setLoading] = useState(true);

const [initialValues, setInitialValues] = useState([]);

const [currentPage, setCurrentPage] = useState(1);

const [shouldRender, setShouldRender] = useState(false);

Anchor to Tutorial complete!Tutorial complete!

Congratulations! You learned how to hide your UI extension's admin blocks and actions when they are not relevant to a given target. Keep the momentum going with these related resources.

Admin UI extension APIs

Learn about the admin UI extension APIs.

Participate

File any issues or feature requests on the UI Extensions GitHub repository.

Deploy

Learn how to deploy your UI extensions to merchants.

Was this page helpful?

Hide admin UI extensions

Anchor to What you'll learnWhat you'll learn

Requirements

Project

Anchor to Collapse an admin blockCollapse an admin block

Anchor to Use the ,[object Object], function to determine if the admin block should be visible.Use the `getIssues` function to determine if the admin block should be visible.

/extensions/issue-tracker-conditional-block/src/BlockExtension.jsx

Anchor to Conditionally return JSX content based on the result of the getProductVariants function.Conditionally return JSX content based on the result of the getProductVariants function.

/extensions/issue-tracker-conditional-block/src/BlockExtension.jsx

Anchor to Test hiding the admin blockTest hiding the admin block

Terminal

Terminal

Anchor to Hide an admin actionHide an admin action

/extensions/issue-tracker-conditional-action/shopify.extension.toml

/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js

/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js

/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js

/extensions/issue-tracker-conditional-action/src/utils.js

/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js

Anchor to Test hiding the admin actionTest hiding the admin action

Terminal

Terminal

/extensions/issue-tracker-conditional-block/src/BlockExtension.jsx

Anchor to Tutorial complete!Tutorial complete!

Hide admin UI extensions

Anchor to What you'll learnWhat you'll learn

Requirements

Project

Anchor to Collapse an admin blockCollapse an admin block

Anchor to Use the ,[object Object], function to determine if the admin block should be visible.Use the getIssues function to determine if the admin block should be visible.

Anchor to Conditionally return JSX content based on the result of the getProductVariants function.Conditionally return JSX content based on the result of the getProductVariants function.

Anchor to Test hiding the admin blockTest hiding the admin block

Anchor to Hide an admin actionHide an admin action

Anchor to Test hiding the admin actionTest hiding the admin action

Anchor to Tutorial complete!Tutorial complete!

Anchor to Use the ,[object Object], function to determine if the admin block should be visible.Use the `getIssues` function to determine if the admin block should be visible.