Markup Component in CargoXplorer TMS

Introduction

The Markup Component is designed for rendering formatted text content in CargoXplorer TMS. Unlike the basic Text Component, the Markup Component is optimized for displaying large blocks of formatted content using markup syntax (such as Markdown) that is converted to native React Native components. This component is ideal for rendering formatted documentation, email templates, user-generated content, and other text scenarios where formatting (bold, italic, lists, etc.) needs to be displayed across both web and mobile platforms.

Important: The component does not render raw HTML. Instead, it uses markup syntax that is parsed and rendered as native components, ensuring compatibility with React Native.

YAML Structure

component: markup
props:
  content: "Your **formatted** text here with _emphasis_"
  options:
    className: "custom-markup-class"

Attribute Description

component: (string) Must be set to "markup" to use this component type.
props: (object) Contains the configuration properties for the markup component.
- content: (string or object) The markup content to be rendered. Supports:
  - Markdown syntax (bold, italic, lists, links, etc.)
  - Plain text with formatting markers
  - Localized markup content
  - Dynamic content with variables
- options: (object) Additional configuration options.
  - className: (string) CSS class names to apply to the markup container (web only).
  - wrapper: (string) Component element to wrap the markup content. Default: "View".

Markdown Syntax Support

The Markup Component supports standard Markdown syntax:

Bold: **text** or __text__
Italic: *text* or _text_
Bold + Italic: ***text***
Links: [link text](url)
Lists: Use -, *, or 1. for bullet and numbered lists
Headings: # H1, ## H2, ### H3, etc.
Line Breaks: Two spaces at end of line or blank line
Code: `inline code`
Blockquotes: > quoted text

Examples

Basic Formatted Text

component: markup
props:
  content: "This is **bold** text with _emphasis_."

Rich Text with Multiple Elements

component: markup
props:
  content: |
    ### Shipment Instructions

    Please ensure the following requirements are met:

    - Temperature controlled: -20°C to -25°C
    - Fragile handling required
    - Customs documentation attached

    **Note:** Contact operations before delivery.
  options:
    className: "shipment-instructions"

Localized Markup Content

component: markup
props:
  content:
    en-US: |
      #### Terms and Conditions

      All shipments are subject to our [standard terms](/terms).
    es-ES: |
      #### Términos y Condiciones

      Todos los envíos están sujetos a nuestros [términos estándar](/terms).
    fr-FR: |
      #### Termes et Conditions

      Toutes les expéditions sont soumises à nos [conditions standard](/terms).

Dynamic Content with Variables

component: markup
props:
  content: |
    **Shipment Update:** {{ shipment.reference }}

    Status: **{{ shipment.status }}**

    Last updated: {{ shipment.updatedAt }}
  options:
    className: "status-notification"

Advanced Usage

Email Template Rendering

component: markup
props:
  content: |
    ## Delivery Confirmation

    Dear {{ contact.name }},

    Your shipment **{{ shipment.reference }}** has been delivered successfully.

    **Delivery Date:** {{ delivery.date }}
    **Signed By:** {{ delivery.signedBy }}

    Thank you for choosing our services.
  options:
    className: "email-preview"
    wrapper: "View"

Formatted Lists and Instructions

component: markup
props:
  content: |
    ### Creating a New Shipment

    Follow these steps:

    1. Navigate to the Shipments module
    2. Click the "New Shipment" button
    3. Fill in the required fields:
       - Origin and destination
       - Commodity details
       - Customer reference
    4. Save the shipment

Conditional Content Rendering

component: markup
props:
  content: |
    {{ eval shipment.isPriority ? '**PRIORITY SHIPMENT**\n\n' : '' }}
    **Shipment:** {{ shipment.reference }}

    {{ eval shipment.hasSpecialInstructions ? shipment.specialInstructions : '' }}

Links and Contact Information

component: markup
props:
  content: |
    For questions about this shipment, please contact:

    - **Email:** [[email protected]](mailto:[email protected])
    - **Phone:** +1 (555) 123-4567
    - **Portal:** [Track Shipment](https://portal.example.com/track/{{ shipment.id }})

Best Practices

Use for Formatted Content: Reserve the Markup Component for content that requires formatting. Use the Text Component for simple, unformatted text.
Keep Markdown Simple: Stick to basic Markdown syntax that renders well across both web and mobile platforms.
Maintain Consistent Styling: Apply CSS classes through the className option for web styling, but remember these won't affect React Native rendering.
Leverage Localization: Provide localized markup for multi-language support, ensuring formatting is appropriate for each language.
Test Across Platforms: Ensure rendered markup displays correctly on both web and mobile (React Native) platforms.
Avoid Complex Formatting: Complex nested structures may not render consistently across platforms. Keep formatting straightforward.
Use Semantic Headings: Use proper heading hierarchy (#, ##, ###) to structure content logically.
Performance Considerations: For very large markup content, consider breaking it into smaller sections or using pagination.
Line Breaks: Use blank lines between paragraphs for consistent spacing across platforms.
Variable Integration: When using variables, ensure the output will be valid Markdown after variable substitution.

Platform Compatibility

Web (React)

Markdown is parsed and rendered as HTML elements
CSS classes apply normally
All standard Markdown features supported

Mobile (React Native)

Markdown is parsed and rendered as React Native components (Text, View, etc.)
CSS classes are ignored
Native styling is applied through the component's theme
Some advanced Markdown features may have limited support

Accessibility Considerations

Use proper heading hierarchy (# through ######) for screen readers.
Ensure links have descriptive text rather than "click here" or "read more".
Provide sufficient color contrast for text (handled by theme).
Keep content structure logical and scannable.
Use lists for related items to improve navigation.
Test with screen readers on both platforms.

Use Cases

Documentation and Help Content

component: markup
props:
  content: |
    ## Creating a New Shipment

    Follow these steps to create a shipment:

    1. Navigate to the **Shipments** module
    2. Click the **New Shipment** button
    3. Fill in the required fields:
       - Origin and destination
       - Commodity details
       - Customer reference
    4. Click **Save**

    _For more details, see our [complete guide](/help/shipments)._
  options:
    className: "documentation-content"

System Notifications

component: markup
props:
  content: |
    ### ⚠️ Customs Delay Alert

    Shipment **{{ shipment.reference }}** is experiencing customs delays at {{ location.name }}.

    **Expected clearance:** _{{ customs.expectedDate }}_

    [View Details](/shipments/{{ shipment.id }}/customs)

Delivery Instructions

component: markup
props:
  content: |
    ### Delivery Instructions

    **Recipient:** {{ contact.name }}
    **Address:** {{ address.full }}

    #### Special Requirements:
    - Temperature controlled storage
    - Signature required
    - Call before delivery: {{ contact.phone }}

    **Notes:** {{ delivery.specialInstructions }}

Status Updates

component: markup
props:
  content: |
    ## Shipment Status Update

    **Reference:** {{ shipment.reference }}
    **Current Status:** {{ shipment.status }}
    **Location:** {{ shipment.currentLocation }}

    ### Timeline:
    - **Picked up:** {{ timeline.pickup }}
    - **In transit:** {{ timeline.transit }}
    - **Expected delivery:** {{ timeline.expectedDelivery }}

Differences from Text Component

Feature	Text Component	Markup Component
Purpose	Simple, unformatted text	Formatted text with styling
Syntax	Plain text	Markdown syntax
Use Case	Labels, headings, short text	Documentation, instructions, rich content
Size	Small to medium text	Medium to large text blocks
Formatting	None (use HTML element type)	Bold, italic, lists, links, etc.
Platform	Web & React Native	Web & React Native

Text Component - For simple text rendering
Components Overview - Overall component structure
Workflow Variables - Using dynamic content in components
Localization - Multi-language support strategies

Introduction​

YAML Structure​

Attribute Description​

Markdown Syntax Support​

Examples​

Basic Formatted Text​

Rich Text with Multiple Elements​

Localized Markup Content​

Dynamic Content with Variables​

Advanced Usage​

Email Template Rendering​

Formatted Lists and Instructions​

Conditional Content Rendering​

Links and Contact Information​

Best Practices​

Platform Compatibility​

Web (React)​

Mobile (React Native)​

Accessibility Considerations​

Use Cases​

Documentation and Help Content​

System Notifications​

Delivery Instructions​

Status Updates​

Differences from Text Component​

Related Topics​