Action APIAPIs
APIs
The Action API allows an action extension to modally present its corresponding modal target.
Supporting targets
Anchor to actionapiActionApi
- Anchor to presentModalpresentModal() => voidrequired
Presents the
action-overlay.renderextension 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.
ActionApiContent
- presentModal
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.
() => void
export interface ActionApiContent {
/** 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.
*/
presentModal(): void;
}Was this section helpful?
Anchor to examplesExamples
Examples of using the Action API.
Anchor to example-present-a-modal-from-post-purchase.Present a modal from post purchase.
Anchor to example-present-a-modal-from-smart-grid.Present a modal from smart grid.
Was this section helpful?
Present a modal from post purchase.
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 />
);
examples
Present a modal from post purchase.
React
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 /> );TS
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); }, );Present a modal from smart grid.
React
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 /> );TS
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); });