---
title: pos.order-details.action.render
description: |-
  Renders a full-screen modal interface launched from order details menu items. Use this target for complex order workflows that require forms, multi-step processes, or detailed information displays beyond what a simple button can provide.

  Extensions at this target have access to order data through the Order API and support workflows with multiple screens, navigation, and interactive components.
api_version: 2025-04
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/2025-04/targets/pos-order-details-action-render
  md: https://shopify.dev/docs/api/pos-ui-extensions/2025-04/targets/pos-order-details-action-render.md
---

# pos.​order-details.​action.​render

Renders a full-screen modal interface launched from order details menu items. Use this target for complex order workflows that require forms, multi-step processes, or detailed information displays beyond what a simple button can provide.

Extensions at this target have access to order data through the Order API and support workflows with multiple screens, navigation, and interactive components.

Support

Components (33)

APIs (11)

### Supported components

* [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/actions/button)
* [Camera​Scanner](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/navigation-and-content/camerascanner)
* [Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/datefield)
* [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/datepicker)
* [Dialog](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/feedback-and-status-indicators/dialog)
* [Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/emailfield)
* [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/media-and-visuals/image)
* [List](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/layout-and-structure/list)
* [Navigator](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/navigation-and-content/navigator)
* [Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/numberfield)
* [POSBlock](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/layout-and-structure/posblock)
* [POSBlock​Row](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/layout-and-structure/posblockrow)
* [Pin​Pad](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/pinpad)
* [Print​Preview](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/navigation-and-content/printpreview)
* [Radio​Button​List](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/radiobuttonlist)
* [Screen](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/layout-and-structure/screen)
* [Scroll​View](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/layout-and-structure/scrollview)
* [Search​Bar](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/navigation-and-content/searchbar)
* [Section](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/layout-and-structure/section)
* [Section​Header](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/layout-and-structure/sectionheader)
* [Segmented​Control](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/navigation-and-content/segmentedcontrol)
* [Selectable](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/actions/selectable)
* [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/layout-and-structure/stack)
* [Stepper](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/stepper)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/layout-and-structure/text)
* [Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/textarea)
* [Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/textfield)
* [Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/timefield)
* [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/ui-components/forms/timepicker)

### Available APIs

* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/contextual-apis/cart-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/standard-apis/locale-api)
* [Navigation API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/platform-apis/navigation-api)
* [Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/contextual-apis/order-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/platform-apis/print-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/standard-apis/product-search-api)
* [Scanner API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/platform-apis/scanner-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/standard-apis/session-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/standard-apis/toast-api)

Examples

### Examples

* #### Create an order details action modal

  ##### Description

  Build a full-screen modal launched from order details menu items for complex order workflows. This example demonstrates creating modals with multiple screens and interactive components, enabling forms, multi-step processes, or detailed information displays with full order data access.

  ##### React

  ```tsx
  import React from 'react';

  import {
    Text,
    Screen,
    ScrollView,
    useApi,
    Navigator,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const Modal = () => {
    const api = useApi<'pos.order-details.action.render'>();
    return (
      <Navigator>
        <Screen name="OrderDetailsAction" title="Order Details Action">
          <ScrollView>
            <Text>{`Order ID: ${api.order.id}`}</Text>
          </ScrollView>
        </Screen>
      </Navigator>
    );
  };

  export default reactExtension('pos.order-details.action.render', () => (
    <Modal />
  ));
  ```

  ##### TS

  ```ts
  import {
    Navigator,
    Screen,
    ScrollView,
    Text,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.order-details.action.render', (root, api) => {
    const navigator = root.createComponent(Navigator);
    const screen = root.createComponent(Screen, {
      name: 'OrderDetailsAction',
      title: 'Order Details Action',
    });
    const scrollView = root.createComponent(ScrollView);
    const text = root.createComponent(Text);

    text.append(`ID for current order screen: ${api.order.id}`);
    scrollView.append(text);
    screen.append(scrollView);
    navigator.append(screen);
    root.append(navigator);
  });
  ```