Overview
Introduction¶
Form-Builder (aka afform) is a core extension currently in active development.
It is intended to become the main building tool for CiviCRM forms and layouts going forwards.
Afform Types¶
- form: A form which submits through the
Afform::submitapi, editable in the form-builder GUI. - block: A snippet meant to be incorporated into a larger form.
- system (default): Non-editable forms.
- search: An afform with an embedded SearchKit Display and optional search filter fields.
Afform markup¶
Althought angularjs offers extensive functionality it is recommended that, where possible, CiviCRM Angular forms are written using just html and CiviCRM afform markup. The reason being that there is demand to be able to render these forms using different front end libraries (eg. React) and funding is being sought to that end. If this does proceed then the first piece of work is likely to be rendering existing FormBuilder forms via React - something that would work seamlessly if no native angularjs markup is used.
The CiviCRM Afform markup includes
| Type | Example | Notes |
|---|---|---|
| form embedding markup | <contact-basic></contact-basic> |
Embed a FormBuilder form as defined in contactBasic.aff.html & contactBasic.aff.js |
| api 3 access markup | <div af-api3="af-api3="['Contact','getsingle', {id: options.contact_id}]" af-api3-ctrl="contact"> </div> |
Call api v3 & assign results to variable contact |
| api 4 access markup | <div af-api4="['Afform', 'get', {select: ['name','title','is_public','server_route', 'has_local', 'has_base'], orderBy: {name:'ASC'}}]" af-api4-ctrl="listCtrl"></div> |
Call api v4 & assign results to variable listCtrl |