Edit Import Wizard

Name

Also known as (comma separated)

Brief definition Guided data import.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "step", "type": "select", "label": "Wizard step", "default": "upload", "options": [ "upload", "map", "confirm" ] }, { "id": "fileName", "type": "text", "label": "File name", "default": "contacts.csv" }, { "id": "rowCount", "type": "number", "label": "Rows detected", "default": 240, "min": 1, "max": 9999, "step": 10 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"wiz wiz--{{step}}\">\n <div class=\"wiz__steps\">\n <span class=\"wiz__step wiz__step--upload\" style=\"--a:{{accent}};\">1 Upload</span>\n <span class=\"wiz__step wiz__step--map\" style=\"--a:{{accent}};\">2 Map fields</span>\n <span class=\"wiz__step wiz__step--confirm\" style=\"--a:{{accent}};\">3 Confirm</span>\n </div>\n <div class=\"wiz__panel wiz__panel--upload\">Selected file: <strong>{{fileName}}</strong></div>\n <div class=\"wiz__panel wiz__panel--map\">Map columns from {{fileName}} to fields ({{rowCount}} rows)</div>\n <div class=\"wiz__panel wiz__panel--confirm\">Ready to import {{rowCount}} rows from {{fileName}}</div>\n</div>\n<style>\n.wiz { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.wiz__steps { display: flex; gap: 6px; margin-bottom: 14px; }\n.wiz__step { flex: 1; text-align: center; padding: 7px 4px; border-radius: 6px; background: #24143010; font-size: 10px; font-weight: 600; }\n.wiz__panel { display: none; padding: 14px; border-radius: 8px; background: #ffffff; border: 1.5px solid #24143018; text-align: center; }\n.wiz--upload .wiz__step--upload, .wiz--map .wiz__step--map, .wiz--confirm .wiz__step--confirm { background: var(--a); }\n.wiz--upload .wiz__panel--upload, .wiz--map .wiz__panel--map, .wiz--confirm .wiz__panel--confirm { display: block; }\n</style>", "tailwind": "<div class=\"wiztw wiztw--{{step}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\">\n <div class=\"flex gap-1.5 mb-3.5\">\n <span class=\"wiztw__step wiztw__step--upload flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[10px] font-semibold\" style=\"--a:{{accent}};\">1 Upload</span>\n <span class=\"wiztw__step wiztw__step--map flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[10px] font-semibold\" style=\"--a:{{accent}};\">2 Map fields</span>\n <span class=\"wiztw__step wiztw__step--confirm flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[10px] font-semibold\" style=\"--a:{{accent}};\">3 Confirm</span>\n </div>\n <div class=\"wiztw__panel wiztw__panel--upload hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-center\">Selected file: <strong>{{fileName}}</strong></div>\n <div class=\"wiztw__panel wiztw__panel--map hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-center\">Map columns from {{fileName}} to fields ({{rowCount}} rows)</div>\n <div class=\"wiztw__panel wiztw__panel--confirm hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-center\">Ready to import {{rowCount}} rows from {{fileName}}</div>\n</div>\n<style>\n.wiztw--upload .wiztw__step--upload, .wiztw--map .wiztw__step--map, .wiztw--confirm .wiztw__step--confirm { background: var(--a); }\n.wiztw--upload .wiztw__panel--upload, .wiztw--map .wiztw__panel--map, .wiztw--confirm .wiztw__panel--confirm { display: block; }\n</style>", "react": "export function ImportWizard({\n step = \"{{step}}\",\n fileName = \"{{fileName}}\",\n rowCount = {{rowCount}},\n accent = \"{{accent}}\",\n}) {\n const steps = [[\"upload\", \"1 Upload\"], [\"map\", \"2 Map fields\"], [\"confirm\", \"3 Confirm\"]];\n const panels = {\n upload: <>Selected file: <strong>{fileName}</strong></>,\n map: <>Map columns from {fileName} to fields ({rowCount} rows)</>,\n confirm: <>Ready to import {rowCount} rows from {fileName}</>,\n };\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <div style={{ display: \"flex\", gap: 6, marginBottom: 14 }}>\n {steps.map(([id, label]) => (\n <span key={id} style={{ flex: 1, textAlign: \"center\", padding: \"7px 4px\", borderRadius: 6, fontSize: 10, fontWeight: 600, background: id === step ? accent : \"#24143010\" }}>{label}</span>\n ))}\n </div>\n <div style={{ padding: 14, borderRadius: 8, background: \"#ffffff\", border: \"1.5px solid #24143018\", textAlign: \"center\" }}>{panels[step]}</div>\n </div>\n );\n}" }