What Is Field Mapping in JCB?

In Joomla Component Builder (JCB), Drag & Drop Field Mapping refers to the visual GUI for assigning fields to your admin or site views — and arranging how they are grouped, ordered, and rendered on the page.

Instead of coding form layouts manually, JCB provides an intuitive drag-and-drop interface where you can:

• Group fields into tabs or sections
• Control the field order and alignment
• Dynamically assign rendering behaviors or display conditions
• Override layout settings without touching the compiler engine

This system allows developers and non-developers alike to build professional, clean, and structured interfaces without writing HTML or PHP.

Key Features

• 🖱️ Intuitive Drag & Drop GUI: Easily reorder, group, and reposition fields directly in the view layout interface.
• 🧩 Tab, Section & Column Layouts: Organize fields into tabs, fieldsets, sidebars, or multi-column rows — visually.
• ⚙️ Per-Field Display Configuration: Set display settings for list/edit views, read-only mode, placeholders, labels, widths, and tooltips.
• 🔍 Dynamic Visibility & Conditional Logic: Use GUI-driven rules to show/hide fields based on user input, values, or role.
• 🔄 Sync with Templates & Snippets: Mapped field structure is reflected inside layout templates and snippet blocks for total consistency.
• 🧠 Supports Shared & Local Fields: Drag in both reused shared fields or new fields defined just for the current view.
• 🧬 Supports Field Grouping: Nest fields under headings or logic groups for visual and structural clarity.
• 🧾 Live Preview Logic: Immediately visualize your field order and grouping as you arrange them.

Use Cases

• Organize a long form into clear tabs (e.g. “Basic Info,” “Details,” “SEO”)
• Place key fields at the top of a form for quicker editing
• Create sidebar or accordion-style interfaces for better UX
• Separate complex conditional sections into collapsible areas
• Build a multi-step wizard using grouped field layouts

How to Use in JCB

1. In any View, go to the Fields tab.
2. Click “Manage Layout” or “Form Mapping”.
3. Use drag & drop to:
   • Add new fields from the right panel
   • Group fields into sections or tabs
   • Reorder fields vertically
   • Nest fields into subgroups
4. Set field-specific display options (width, label position, readonly, etc.)
5. Save and compile. JCB will render your layout exactly as arranged.

🧠 Pro Tip: Use Field Groups or repeatable Layout Templates to replicate entire field sections across multiple views.

Conclusion

JCB’s Drag & Drop Field Mapping turns form building into a visual task — no code required. Whether you're building a simple input form or a complex multi-tab interface, this system ensures clarity, speed, and maintainability for developers and site builders alike.