diff --git a/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx b/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx
index 33bd0275c92f7..06676a6c9d4be 100644
--- a/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx
+++ b/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx
@@ -40,6 +40,7 @@ import { ControlGroupApi, ControlGroupRuntimeState, ControlGroupSerializedState
 import { ControlGroup } from './components/control_group';
 import { initSelectionsManager } from './selections_manager';
 import { initializeControlGroupUnsavedChanges } from './control_group_unsaved_changes_api';
+import { openDataControlEditor } from '../controls/data_controls/open_data_control_editor';
 
 export const getControlGroupEmbeddableFactory = (services: {
   core: CoreStart;
@@ -162,25 +163,27 @@ export const getControlGroupEmbeddableFactory = (services: {
           i18n.translate('controls.controlGroup.displayName', {
             defaultMessage: 'Controls',
           }),
-        openAddDataControlFlyout: () => {
-          /* openDataControlEditor({
+        openAddDataControlFlyout: (settings) => {
+          const { controlInputTransform } = settings ?? {
+            controlInputTransform: (state) => state,
+          };
+          openDataControlEditor({
             initialState: {
-              grow: DEFAULT_CONTROL_GROW,
-              width: DEFAULT_CONTROL_WIDTH,
-              dataViewId: parentApi.lastUsedDataViewId.getValue(),
+              grow: api.grow.getValue(),
+              width: api.width.getValue(),
             },
             onSave: ({ type: controlType, state: initialState }) => {
-              controlsManager.api.addNewPanel({
+              api.addNewPanel({
                 panelType: controlType,
-                initialState,
+                initialState: controlInputTransform!(
+                  initialState as Partial<ControlGroupSerializedState>,
+                  controlType
+                ),
               });
             },
-            controlGroupApi,
-            services: {
-              core,
-              dataViews: dataViewsService,
-            },
-          });*/
+            controlGroupApi: api,
+            services,
+          });
         },
         serializeState: () => {
           const { panelsJSON, references } = controlsManager.serializeControls();
diff --git a/src/plugins/controls/public/react_controls/control_group/types.ts b/src/plugins/controls/public/react_controls/control_group/types.ts
index f5d97846ea28d..d58a487b86a79 100644
--- a/src/plugins/controls/public/react_controls/control_group/types.ts
+++ b/src/plugins/controls/public/react_controls/control_group/types.ts
@@ -6,6 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { Observable } from 'rxjs';
+
 import { DefaultEmbeddableApi } from '@kbn/embeddable-plugin/public';
 import { Filter } from '@kbn/es-query';
 import {
@@ -24,10 +26,11 @@ import {
   PublishingSubject,
 } from '@kbn/presentation-publishing';
 import { PublishesDataViews } from '@kbn/presentation-publishing/interfaces/publishes_data_views';
-import { Observable } from 'rxjs';
-import { ControlStyle, ControlWidth } from '../../types';
+
 import { ParentIgnoreSettings } from '../..';
+import { ControlInputTransform } from '../../../common';
 import { ControlGroupChainingSystem } from '../../../common/control_group/types';
+import { ControlStyle, ControlWidth } from '../../types';
 import { DefaultControlState, PublishesControlDisplaySettings } from '../controls/types';
 import { ControlFetchContext } from './control_fetch/control_fetch';
 
@@ -66,7 +69,9 @@ export type ControlGroupApi = PresentationContainer &
     ignoreParentSettings$: PublishingSubject<ParentIgnoreSettings | undefined>;
     allowExpensiveQueries$: PublishingSubject<boolean>;
     untilInitialized: () => Promise<void>;
-    openAddDataControlFlyout: () => void;
+    openAddDataControlFlyout: (settings?: {
+      controlInputTransform?: ControlInputTransform;
+    }) => void;
   };
 
 export interface ControlGroupRuntimeState {
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/open_data_control_editor.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/open_data_control_editor.tsx
index 424f41bada78e..fbddf0e7af831 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/open_data_control_editor.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/open_data_control_editor.tsx
@@ -20,7 +20,7 @@ import { ControlGroupApi } from '../../control_group/types';
 import { DataControlEditor } from './data_control_editor';
 import { DefaultDataControlState } from './types';
 
-export type DataControlEditorState = Omit<DefaultDataControlState, 'fieldName'> & {
+export type DataControlEditorState = Partial<DefaultDataControlState> & {
   fieldName?: string;
   controlType?: string;
   controlId?: string;