---
title: pos.draft-order-details.action.render
description: |-
  Renders a full-screen modal interface launched from draft order details menu items. Use this target for complex draft 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 draft order data through the Draft 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-draft-order-details-action-render
  md: https://shopify.dev/docs/api/pos-ui-extensions/2025-04/targets/pos-draft-order-details-action-render.md
---

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

Renders a full-screen modal interface launched from draft order details menu items. Use this target for complex draft 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 draft order data through the Draft 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)
* [Draft Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-04/target-apis/contextual-apis/draft-order-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)
* [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 a draft order details action modal

  ##### Description

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

  ##### React

  ```tsx
  import React from 'react';

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

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

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

  ##### TS

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

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

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