Dropdown Options Integration

This document explains how dropdown options are integrated and synchronized between Application-Frontend and Creative-Engine.

Architecture Overview

The dropdown options integration involves two main components:

1. Application-Frontend: Contains the configuration UI for dropdown inputs in DropdownInputConfiguration.vue
2. Creative-Engine: Contains the form rendering and dropdown options management in CreativeFormBlock.vue and DropdownOptionsManager.vue

These components run in separate contexts:

• Application-Frontend runs in the main window with Vue/Vuex store
• Creative-Engine runs inside an iframe with its own DataStore

Communication Flow

From Application-Frontend to Creative-Engine

1. When dropdown options are updated in DropdownInputConfiguration.vue, the changes are saved to the Vuex store using the updateValue method from the configurationLogic mixin.

2. The updated configuration is loaded into the Creative-Engine iframe when:

   • The iframe is initially loaded via PreviewIframe.vue
   • The preview is refreshed

3. The Creative-Engine loads the configuration data from the JSON payload passed to it and stores it in the reactive DataStore.creativeSettings.

Within Creative-Engine

1. CreativeFormBlock.vue renders form inputs including dropdowns based on data from formStore.getFormProperties().

2. When in editor mode, dropdown options can be edited using the DropdownOptionsManager.vue component.

3. When dropdown options are updated in the DropdownOptionsManager.vue:

   • Changes are validated locally
   • If valid, changes are synced to the form store using the syncOptionsToInput method
   • The syncOptionsToInput method updates the options directly in the DataStore and forces a re-render

4. The updateDropdownOptions method in CreativeFormBlock.vue handles the update by:

   • Updating the options in the form properties
   • Ensuring the current value is still valid with the new options
   • Forcing a re-render by updating the field with its current value
   • Emitting an event that can be captured by parent components

Adding New Form Inputs

1. In editor mode, new form inputs can be added using the UI in CreativeFormBlock.vue.

2. The addNewInput method:

   • Generates a unique block name for the new input
   • Creates a new input with default properties based on the selected type
   • Adds the new input to the form properties
   • Updates the form store

Testing

To test dropdown options functionality:

1. A testDropdownOptions method has been added to CreativeFormBlock.vue that allows for programmatic testing of dropdown options updates.

2. This method can be called with an input index and new options array to verify that updates are processed correctly.

Known Limitations

1. Real-time updates between Application-Frontend and Creative-Engine require a refresh of the preview iframe.

2. The communication between the two contexts is one-way (Application-Frontend to Creative-Engine) during initial load or refresh.

Future Improvements

1. Implement two-way communication using postMessage API to allow real-time updates from Creative-Engine back to Application-Frontend.

2. Add more robust validation and error handling for dropdown options.

3. Improve the UI for managing dropdown options with features like drag-and-drop reordering.