The Action API allows an action extension to modally present its corresponding modal target. #### Supporting targets - [pos.home.tile.render](/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render) - [pos.purchase.post.action.menu-item.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-action-menu-item-render) - [pos.purchase.post.block.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-block-render) - [pos.order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render) - [pos.order-details.block.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render) - [pos.product-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render) - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render) - [pos.customer-details.block.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render) - [pos.draft-order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render) - [pos.draft-order-details.action.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render)
Presents the `action-overlay.render` extension target on top of present view. For example: if we are calling presentModal() from pos.purchase.post.action.menu-item.render, it should present pos.purchase.post.action.render.
The Action API allows an action extension to modally present its corresponding modal target. #### Supporting targets - [pos.home.tile.render](/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render) - [pos.purchase.post.action.menu-item.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-action-menu-item-render) - [pos.purchase.post.block.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-block-render) - [pos.order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render) - [pos.order-details.block.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render) - [pos.product-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render) - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render) - [pos.customer-details.block.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render) - [pos.draft-order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render) - [pos.draft-order-details.action.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render)
import React from 'react';
import {
reactExtension,
useApi,
ActionItem,
} from '@shopify/ui-extensions-react/point-of-sale';
const PostPurchaseActionItem = () => {
const api = useApi<'pos.purchase.post.action.menu-item.render'>();
return (
<ActionItem
onPress={() => api.action.presentModal()}
enabled
/>
);
};
export default reactExtension(
'pos.purchase.post.action.menu-item.render',
() => <PostPurchaseActionItem />
);
import {ActionItem, extension} from '@shopify/ui-extensions/point-of-sale';
export default extension(
'pos.purchase.post.action.menu-item.render',
(root, api) => {
const actionItem = root.createComponent(ActionItem, {
onPress: () => api.action.presentModal(),
enabled: true,
});
root.append(actionItem);
},
);
import React from 'react';
import {
reactExtension,
useApi,
ActionItem,
} from '@shopify/ui-extensions-react/point-of-sale';
const PostPurchaseActionItem = () => {
const api = useApi<'pos.purchase.post.action.menu-item.render'>();
return (
<ActionItem
onPress={() => api.action.presentModal()}
enabled
/>
);
};
export default reactExtension(
'pos.purchase.post.action.menu-item.render',
() => <PostPurchaseActionItem />
);
import {ActionItem, extension} from '@shopify/ui-extensions/point-of-sale';
export default extension(
'pos.purchase.post.action.menu-item.render',
(root, api) => {
const actionItem = root.createComponent(ActionItem, {
onPress: () => api.action.presentModal(),
enabled: true,
});
root.append(actionItem);
},
);
import React from 'react';
import {
reactExtension,
useApi,
Tile,
} from '@shopify/ui-extensions-react/point-of-sale';
const SmartGridTile = () => {
const api = useApi<'pos.home.tile.render'>();
return (
<Tile
title='My App'
onPress={() => api.action.presentModal()}
enabled
/>
);
};
export default reactExtension(
'pos.home.tile.render',
() => <SmartGridTile />
);
import {Tile, extension} from '@shopify/ui-extensions/point-of-sale';
export default extension('pos.home.tile.render', (root, api) => {
const tile = root.createComponent(Tile, {
title: 'Action API',
onPress: () => api.action.presentModal(),
enabled: true,
});
root.append(tile);
});
import React from 'react';
import {
reactExtension,
useApi,
Tile,
} from '@shopify/ui-extensions-react/point-of-sale';
const SmartGridTile = () => {
const api = useApi<'pos.home.tile.render'>();
return (
<Tile
title='My App'
onPress={() => api.action.presentModal()}
enabled
/>
);
};
export default reactExtension(
'pos.home.tile.render',
() => <SmartGridTile />
);
import {Tile, extension} from '@shopify/ui-extensions/point-of-sale';
export default extension('pos.home.tile.render', (root, api) => {
const tile = root.createComponent(Tile, {
title: 'Action API',
onPress: () => api.action.presentModal(),
enabled: true,
});
root.append(tile);
});