Reusable-Component

Reusable components let you write sensitive or reusable logic (like API calls or JS functions) once and use them anywhere JS code is allowed — such as inside optionGenerator, fieldGenerator, or API Config code areas.
They help keep your plugin code cleaner, safer, and easier to maintain.

⚠️ Note: Components only work in fields where custom JS is allowed — not in static or boolean-only fields.

Why Use Reusable Components?

• Hide sensitive logic like tokens, headers, or secure calculations

• Reuse common logic across multiple fields (e.g., dropdowns, API config)

• Reduce duplicate code and simplify maintenance.

Use Cases

How It Works

Step-by-step:

1. Go to the API Config, Option Generator, or Field Generator
   You can create or use components from any place where you write JS logic:

2. Scroll to the bottom

3. Click the ➕ plus icon. This opens the Add Component modal.
   

   

Fill out the form:

• Component Name → must be unique (cannot be changed later)

• Parameters → Add inputs your logic needs (e.g., id, token, search)

• Sample Data → Add mock values to test your code

• Code Area → Write your JS/API logic

• Click Test to check, then Save

Use the component inside action fields

• Wherever you're using dynamic JS (e.g., in optionGenerator), attach the component

• Return the final value using the return keyword

• This keeps your logic hidden and reusable
  

  

• Import the Component to Use It

  • You need to explicitly import the component in that action version (once per usage)

  • After importing, you can use it in any supported JS field of that action version.

  • One-time import, reusable in optionGenerator, fieldGenerator, visible, etc.

• Remove Import if Not Needed

  • You can remove the import any time

  • Once removed, the component will no longer be available in that action version.

Features

• Works in API Config, Fields, Triggers, etc.

• Keeps sensitive logic hidden

• AI-powered safety checks

• Fully testable with live mock data

• Tracks where each component is used.

Best Practices

• Always return the final value in your component

• Don’t write raw code in multiple places — use a component instead

• Use clear param names and sample data for easier testing

• Use components for auth, formatting, dropdowns, calculations, validations