Learn how to create self-contained, reusable custom components that integrate third-party JavaScript libraries like FullCalendar, Leaflet maps, Chart.js, and more.
Overview
BetterForms custom components can integrate any JavaScript library using lifecycle hooks. This guide shows you how to:
[onBeforeMount] ← Component waits here
↓
Component Renders to DOM
↓
[onMount] ← DOM elements are now available
↓
Component is Interactive
↓ (when data changes)
[onUpdated]
↓ (when removing)
[onBeforeDestroy]
↓
Component Removed
↓
[onDestroyed]
// ❌ WRONG - this.$refs is NOT available in namedAction functions
const element = this.$refs.myElement;
// ❌ WRONG - schema is NOT directly accessible
const config = schema.calendarConfig;
// ❌ WRONG - component instance properties
const value = this.myProperty;
// ✅ Standard DOM queries
const element = document.getElementById('myElement');
const element = document.querySelector('#myElement');
// ✅ Model data
const events = model.calendarEvents;
const config = model.chartConfig;
// ✅ App state
const user = app.currentUser;
// ✅ Global storage
window._myLibraryInstance = instance;
// ✅ BetterForms utilities
await BF.libraryLoadOnce('...');
<!-- ✅ Good -->
<div id="chartContainer"></div>
<div id="mapRoot"></div>
<div id="editorElement"></div>
<!-- ❌ Avoid - ref won't work in namedActions -->
<div ref="myElement"></div>
