Catalog item component on mobile device

  • Release version: Australia
  • Updated March 12, 2026
  • 1 minute to read

    • Order catalog items and services from your mobile devices with forms optimized for smaller screens and touch interaction.

    Mobile responsive for Catalog item component

    The Catalog item component automatically adapts its layout when displayed on mobile devices. This mobile-responsive design provides an optimized ordering experience with touch-friendly options, reorganized form fields, and easy access to reference numbers.

    When you access catalog items through Web Embeddables on your mobile device, the component detects your screen size and adjusts the form layout to fit mobile screen dimensions. While the form loads, you see a visual placeholder that shows where content will appear. Form fields, drop-down menus, and buttons reorganize to provide better usability on your mobile devices. After you submit your form, the system generates a reference number that you can copy with a single tap. When you select the copy (Copy icon) icon, the reference number is copied to the clipboard, and the icon changes to a tick (Tick icon) icon. Selecting the tick (Tick icon) icon displays a Copied to clipboard message, which disappears after 3 seconds and the tick (Tick icon) icon reverts to the copy (Copy icon) icon.
    Figure 1. Catalog item component mobile view
    Catalog item component mobile view displaying case form to order any catalog item or services.

    Key capabilities

    The following are the key capabilities:
    • Adaptive form layout: Form fields automatically reorganize and wrap to fit mobile screen widths. The component adjusts field columns based on your device to maintain readability and ease of input.
    • Touch-optimized selectors: Drop-down menus open as bottom sheets slide-up panels that provide easy touch-based selection on mobile devices. This makes it easier to choose options without struggling with small drop-down controls.
    • Copy functionality: After submitting your form, you can copy the reference number with a single tap. The copy button displays a checkmark when the number is successfully copied to your clipboard.
    • Visual feedback: The mobile interface shows a visual placeholder while the form loads and provides clear confirmation when you complete actions like copying reference numbers.