Button Fields App for Twenty CRM

This Twenty CRM app allows users to add configurable button fields to any custom object. Buttons can be configured with custom labels, actions (links or JavaScript functions), and various styling options.

Features

• Configurable Actions: Buttons can either open links or execute JavaScript code
• Flexible Styling: Choose from primary, secondary, or tertiary variants and small/medium sizes
• Link Options: Links can open in the same tab or a new tab
• JavaScript Sandboxing: JavaScript actions run in a controlled environment with limited scope
• Admin Interface: Easy-to-use interface for managing button fields on objects
• Record Context: JavaScript actions have access to the current record ID

Installation

1. Install the app in your Twenty workspace:

   npx twenty app install /path/to/button-fields-app.tgz

2. The app will be available in your workspace under Settings > Apps

Usage

Adding Button Fields

1. Open the Button Fields Manager from the command menu (search for "Button Fields")
2. Enter the Object ID of the object you want to add button fields to
3. Click "Load Button Fields" to see existing buttons
4. Use the "Add New Button Field" form to create a new button

Button Configuration Options

• Button Label: The text displayed on the button
• Action Type:
  • Link: Opens a URL when clicked
  • JavaScript: Executes custom JavaScript code
• Action Value:
  • For links: URL (use {recordId} placeholder for current record ID)
  • For JavaScript: Function code that receives (recordId, console) parameters
• Button Variant: Primary, Secondary, or Tertiary styling
• Button Size: Small or Medium
• Open in New Tab: Only available for link actions

JavaScript Actions

JavaScript actions run in a sandboxed environment with access to:

• recordId: The ID of the current record
• console: Limited console methods (log, warn, error)

Example JavaScript action:

function(recordId, console) {
  console.log("Button clicked for record:", recordId);
  // Your custom logic here
}

Viewing Buttons

Once added, button fields appear in:

• Table views (list of records)
• Record detail pages
• Any view that displays the object's fields

API Endpoints

The app provides the following HTTP endpoints:

• POST /s/button-fields/add-button-field - Add a new button field
• GET /s/button-fields/get-button-fields/:objectId - Get button fields for an object
• PUT /s/button-fields/update-button-field - Update an existing button field
• DELETE /s/button-fields/delete-button-field - Delete a button field

Security Considerations

• JavaScript actions are sandboxed and cannot access the full DOM or execute dangerous operations
• Link actions are validated as URLs to prevent malicious redirects
• All API endpoints require authentication
• Button actions are executed with the app's permission scope

Development

Building

npm run build

Testing

npm test

Local Development

npm run dev

Contributing

This app follows Twenty's development guidelines and coding standards. Please ensure:

• All code is TypeScript with proper typing
• Components follow React best practices
• Tests are included for new functionality
• Security considerations are addressed

License

This app is part of the Twenty CRM open-source project.