4.1 Adding & Configuring Buttons (Page Builder)
Buttons are one of the most essential and versatile elements in BetterForms. They serve as the primary way users interact with your application by triggering actions like saving data, navigating pages, or running FileMaker scripts.
What Makes BetterForms Buttons Powerful?
Unlike simple HTML buttons, BetterForms buttons can:
Run namedActions actions Kike FileMaker script steps
Trigger FileMaker scripts via hooks
Navigate between pages with data
Show alerts and modals for user feedback
Execute JavaScript for advanced interactions
Where to Add Buttons in the BetterForms IDE
Using the Page Builder
Open your page in the BetterForms IDE
Navigate to the Page Builder tab
Locate the Snippets section (usually on the left side)
Search for "button" in the snippets library
Copy and paste the button JSON into your page schema's
fields
array
Basic Button Structure
Every button in BetterForms follows this JSON structure:
{
"type": "button",
"text": "Button Text",
"buttonClasses": "btn btn-primary",
"styleClasses": "col-md-6",
"actions": [
// Actions go here (namedAction by default)
]
}
Key Properties:
type
: Always "button"text
: The label displayed on the buttonbuttonClasses
: Bootstrap CSS classes for button stylingstyleClasses
: Layout classes (column width, spacing, etc.)actions
: Array of actions to execute when clicked
Common Button Types and Examples
1. Save Button (Triggers FileMaker Script)
This is the most common button type for FileMaker developers:
{
"type": "button",
"text": "Save Record",
"buttonClasses": "btn btn-success",
"styleClasses": "col-md-4",
"icon": "fa fa-save",
"actions": [{
"action": "runUtilityHook",
"options": {
"type": "save"
}
}]
}
How it works:
Triggers your FileMaker
onUtilityHook
scriptPasses
type: "save"
as a parameterYour FileMaker script receives the current page data model
2. Navigation Button (Go to Another Page)
{
"type": "button",
"text": "Go to Dashboard",
"buttonClasses": "btn btn-info",
"styleClasses": "col-md-4",
"actions": [{
"action": "path",
"options": {
"path": "/dashboard"
}
}]
}
IDE Context: The path corresponds to navigation slugs you set in App Settings → Navigation.
3. Alert Button (Show User Feedback)
{
"type": "button",
"text": "Show Message",
"buttonClasses": "btn btn-warning",
"styleClasses": "col-md-4",
"actions": [{
"action": "showAlert",
"options": {
"title": "Success!",
"text": "Your data has been saved successfully.",
"type": "success"
}
}]
}
Alert Types: success
, error
, warning
, info
4. Modal Button (Show Detailed Information)
{
"type": "button",
"text": "Show Details",
"buttonClasses": "btn btn-primary",
"styleClasses": "col-md-4",
"actions": [{
"action": "showModal",
"options": {
"title": "Record Details",
"body": "This modal shows detailed information about the selected record.",
"icon": "info"
}
}]
}
5. External Link Button
{
"type": "button",
"text": "View Documentation",
"buttonClasses": "btn btn-secondary",
"styleClasses": "col-md-4",
"actions": [{
"action": "path",
"options": {
"url": "https://docs.fmbetterforms.com/"
}
}]
}
Advanced Button Configurations
Multiple Actions in Sequence
Buttons can execute multiple actions one after another:
{
"type": "button",
"text": "Save and Close",
"buttonClasses": "btn btn-success",
"styleClasses": "col-md-4",
"actions": [
{
"action": "runUtilityHook",
"options": {
"type": "save"
}
},
{
"action": "showAlert",
"options": {
"title": "Saved!",
"text": "Record saved successfully.",
"type": "success"
}
},
{
"action": "path",
"options": {
"path": "/dashboard"
}
}
]
}
Dropdown Buttons
Create dropdown menus with multiple options:
{
"type": "button",
"text": "Actions",
"buttonClasses": "btn btn-info",
"styleClasses": "col-md-4",
"icon": "fa fa-cog",
"subs": [
{
"text": "Edit Record",
"actions": [{
"action": "path",
"options": {
"path": "/edit"
}
}]
},
{
"divider": true
},
{
"text": "Delete Record",
"actions": [{
"action": "runUtilityHook",
"options": {
"type": "delete"
}
}]
}
]
}
Button Groups
Group related buttons together:
{
"type": "button",
"styleClasses": "col-md-8",
"groupClasses": "btn-group",
"group": [
{
"type": "button",
"text": "Save",
"buttonClasses": "btn btn-success",
"actions": [{
"action": "runUtilityHook",
"options": {
"type": "save"
}
}]
},
{
"type": "button",
"text": "Cancel",
"buttonClasses": "btn btn-secondary",
"actions": [{
"action": "path",
"options": {
"path": "/cancel"
}
}]
}
]
}
Button Styling and Layout
Bootstrap Button Classes
Use these buttonClasses
for different button styles:
btn btn-primary
Blue primary button
btn btn-success
Green success button
btn btn-danger
Red danger button
btn btn-warning
Yellow warning button
btn btn-info
Light blue info button
btn btn-secondary
Gray secondary button
Size and Layout Classes
Button Sizes:
btn-lg
- Large buttonbtn-sm
- Small buttonbtn-block
- Full-width button
Layout Classes (styleClasses):
col-md-6
- Half widthcol-md-4
- One-third widthcol-md-12
- Full width
Adding Icons
Icons enhance button usability:
{
"type": "button",
"text": "Save",
"icon": "fa fa-save",
"buttonClasses": "btn btn-success",
"styleClasses": "col-md-4"
}
Common Font Awesome Icons:
fa fa-save
- Save iconfa fa-edit
- Edit iconfa fa-trash
- Delete iconfa fa-plus
- Add iconfa fa-home
- Home icon
Integration with FileMaker
Passing Data to FileMaker Scripts
When using runUtilityHook
, the current page data model is automatically sent to your FileMaker script:
BetterForms Button:
{
"actions": [{
"action": "runUtilityHook",
"options": {
"type": "createContact",
"priority": "high"
}
}]
}
FileMaker Script Access:
// In your FileMaker onUtilityHook script:
$type = JSONGetElement($$BF_Payload, "type") // "createContact"
$priority = JSONGetElement($$BF_Payload, "priority") // "high"
$modelData = JSONGetElement($$BF_Payload, "model") // Complete page data
Conditional Buttons
Show buttons based on data conditions:
{
"type": "button",
"text": "Edit",
"buttonClasses": "btn btn-primary",
"styleClasses": "col-md-4",
"visible_calc": "model.user.role === 'admin'",
"actions": [{
"action": "path",
"options": {
"path": "/edit"
}
}]
}
Best Practices for Button Implementation
1. Use Descriptive Text
✅ "Save Contact" instead of "Save"
✅ "Delete Record" instead of "Delete"
2. Provide Visual Feedback
Use appropriate button colors (success for save, danger for delete)
Include relevant icons
Show loading states for long operations
3. Consider User Experience
Group related actions together
Use confirmation dialogs for destructive actions
Provide clear navigation paths
4. Test Button Actions
Use the Actions tab in the page editor to test button actions before deploying.
Troubleshooting Common Issues
Button Not Responding
Check that the
actions
array is properly formattedVerify hook names match your FileMaker scripts
Test actions individually in the Actions tab
FileMaker Script Not Triggering
Ensure
onUtilityHook
is enabled in the Integration tabCheck that your FileMaker script exists and is properly named
Verify server connectivity in App Settings
Styling Not Applied
Check Bootstrap class names for typos
Ensure proper JSON syntax with quotes
Test with basic classes first
Next Steps
Now that you understand buttons, you can:
Combine buttons with navigation - See 4.2 Page Navigation
Add buttons to data tables - See 4.3 Displaying Data in Tables
Style your buttons - See 4.4 Basic App Styling
Last updated