Data Import Review Patterns

Import Mapping Preview

A static mapping preview shows Email mapped to Email address, Plan mapped to Subscription plan, and Notes unmapped.

Program

Mapping previews help people see where incoming columns will land without running a real parser, database import, or mapping service.

import_mapping_preview.html
Visuals: captured from real browser rendering
<section class="mapping-preview" aria-labelledby="mapping-title">
  <h2 id="mapping-title">Field mapping preview</h2>
  <ul aria-label="Import field mappings">
    <li><strong>Source Email</strong> maps to <span>Email address</span></li>
    <li><strong>Source Plan</strong> maps to <span>Subscription plan</span></li>
    <li><strong>Source Notes</strong> is <span class="unmapped">Unmapped</span></li>
  </ul>
  <button type="button">Review mappings</button>
  <p class="note">Static mapping preview only; the button does not route, save, send, upload, import, parse, or call a database service.</p>
</section>
<style>
  .mapping-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .mapping-preview ul { display: grid; gap: 8px; margin: 0; padding-left: 1.25rem; }
  .mapping-preview li { padding: 6px 8px; border: 1px solid #cbd5e1; }
  .mapping-preview span { border-radius: 999px; background: #dcfce7; padding: 2px 8px; }
  .mapping-preview .unmapped { background: #fef3c7; }
  .mapping-preview button { justify-self: start; padding: 8px 12px; }
  .note { margin: 0; color: #475569; }
</style>

  1. Label the mapping preview.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show the first source field.

    The first source field is exact pinned data.
    The first source field is exact pinned data.

  3. Show the first destination field.

    The destination label is exact pinned data.
    The destination label is exact pinned data.

  4. Show the second mapped row.

    The second mapping is exact pinned data.
    The second mapping is exact pinned data.

  5. Show the unmapped row.

    The unmapped source is visible instead of silently dropped.
    The unmapped source is visible instead of silently dropped.

  6. Check mapping preview honesty.

    Mapped rows, unmapped row, button, and no data service.
    Mapped rows, unmapped row, button, and no data service.
labelled preview The section heading names the field mapping preview surface.
mapped rows Two source fields are mapped to exact pinned destination labels.
unmapped row Source Notes stays visibly unmapped without running a mapping engine.