## 🔌 Alpha Plugin Series – Part [3]: Dynamic Configuration with `DATA_MAPPING` Attributes

[Simphiwe]

Welcome back to the Alpha Plugin Series!

In this post, we explore how to configure data-driven plugins using @AlphaAttribute with UI_TYPE.DATA_MAPPING. This UI type allows Alpha Studio users to map incoming data (like rows and columns) into your plugin — ideal for building dynamic components like tables.

---

Attribute Setup: Mapping Data Sources

interface AlphaTableOptions {
    columns: Array<{ value: string; display: string }>;
    actionColumn: boolean;
}

@AlphaAttribute({
    uiType: UI_TYPE.DATA_MAPPING,
    defaultValue: '',
    type: ATTRIBUTE_TYPE.PROPERTY,
    label: 'type',
    placeholder: 'Select',
    category: 'Data Source',
    onRemoveAction: {
        prompt: 'Are you sure you want to delete this action?',
        note: '* If you delete this action, the configured triggers are also deleted!',
    },
    fieldMappings: {
        response: 'value',
        columns: 'options.columns',
        actionColumn: 'options.actionColumn',
    },
    options: [
        { displayText: 'CO', value: 'co' },
        { displayText: 'API', value: 'api' },
        { displayText: 'Reels', value: 'reels' },
        { displayText: 'DMS', value: 'dms' },
        { displayText: 'Local', value: 'local' },
    ],
})

@property({ type: Object })
options: AlphaTableOptions

@property({ type: Array })
@AlphaAttributeType({ type: [[{}]] })
 value: Array<{ [key: string]: any }>;

---

What This Does

This creates a data source selector and mapper in Alpha Studio. When a user selects a type like Local, CO, API, or DMS, the UI expands to let them map external or local data into your plugin.

---

Example Studio Output

This produces:

• A dropdown for selecting data source type
• A Data Source Mapping panel
• A Columns configuration section
• Toggles for Actions and Pagination

---

The Power of UI_TYPE.DATA_MAPPING

Unlike a standard dropdown, this UI type allows users to bind data from an CO, Local, API, DMS etc directly into your plugin. For instance, in a table plugin, this UI type allows:

• Mapping the rows of data (via value)
• Configuring which columns to show (columns)
• Specifying an action column for buttons or interactivity

This UI type maps the actual data that needs to be rendered or used in your plugin — such as rows and columns in a table.

This makes your plugin truly dynamic and reusable.

---

Using Mapped Data in the Plugin

Inside your plugin’s code, you can read these mappings from this.options:

const columns = this.options?.columns || [];
const actionColumn = this.options?.actionColumn;

Rows data which will be passed from Alpha will be on value:

const tableData = this.value

You can now pass this data to your internal table renderer or custom logic.

---

Why It Matters

• Empowers non-developers to bind real data visually
• Great for components like tables,
• Centralizes schema and data mapping logic in Studio
• Decouples the plugin from hardcoded data structures

---

Up Next

In the next post, we’ll dive depeer on how to configure other UI_TYPES on your plug-in.

---

Got questions or use cases? Share your plugin ideas in the Neutrinos Community — or ask how to best use mapping in your project!

Previous post( ## Building Alpha Plugin Series – Part 2 : Handling EVENT Type Attributes in Alpha Plugins - Community - Neutrinos)

#AlphaPlugins #AlphaStudio #NeutrinosLowCode #Neutrinos #PluginDevelopment