Export Interface Overhaul


Wikimedia Foundation

The new Export Interface is now part of CiviCRM as of version 5.23 (and later). Thank you to all backers, testers and developers!


We’re chipping away at areas of inflexibility in CiviCRM and have a vision where users can build interfaces on the fly thanks to Form Builder. One area that has plagued users for some time is the export screen. Sure, it works great… you can grab a huge number of fields pretty quickly.

But, have you ever built an export only to miss a field? Then wanted to add it and rearrange the order?  You have to remove fields, add in the field you want, then re-add the fields you removed. Yeah, not so flexible. This MIH is all about rebuilding the interface to allow users to reorder fields on the fly.

By overhauling the export interface, we’re embedding flexible angular forms inside quickform and we’re developing re-usable components for tablular, re-orderable layout. This work is consistent with the contact layout editor undertaken last year, and is seed funded again by the Wikimedia Foundation (WMF).

WMF has a strong interest in a better user interface and with replacing the existing Quickform/smarty architecture. Redoing the export interface is one small step for Form Builder, but one giant leap for useability! Seriously though, it solves an obvious pain point while advancing the bigger picture project of moving to a more usable UI (using the angularJS framework along with better api integration).

The goal of Form Builder is not only to replace the screens within CiviCRM with more responsive, modern, usable screens but to address various underlying technical issues. These technical steps address specific issues relating to flexible form builder with angularJS and bootstrap but also ensuring the workings of CiviCRM are appropriately exposed (via apiv4) to 'any' front end framework - be it angularjs, another js framework or something else.


  • Wikimedia Foundation
  • British Humanist Association