diff --git a/app/assets/javascripts/controllers/dialog_editor/dialog_editor_controller.js b/app/assets/javascripts/controllers/dialog_editor/dialog_editor_controller.js
index 1ab6128b4d11..e4fd01f834a5 100644
--- a/app/assets/javascripts/controllers/dialog_editor/dialog_editor_controller.js
+++ b/app/assets/javascripts/controllers/dialog_editor/dialog_editor_controller.js
@@ -33,6 +33,21 @@ ManageIQ.angular.app.controller('dialogEditorController', ['$window', 'API', 'mi
 
   vm.saveDialogDetails = saveDialogDetails;
   vm.dismissChanges = dismissChanges;
+  vm.setupModalOptions = setupModalOptions;
+
+  function setupModalOptions(type, tab, box, field) {
+    var templates = {
+      tab: '<dialog-editor-modal-tab></dialog-editor-modal-tab>',
+      box: '<dialog-editor-modal-box></dialog-editor-modal-box>',
+      field: '<dialog-editor-modal-field></dialog-editor-modal-field>',
+    }
+    vm.modalOptions = {
+      template: templates[type],
+      size: 'lg',
+    };
+    vm.elementData = { type: type, tabId: tab, boxId: box, fieldId: field, }
+    vm.visible = true
+  }
 
   var beingCloned = null; // hack that solves recursion problem for cloneDeep
   function customizer(value) {
diff --git a/app/views/miq_ae_customization/editor.html.haml b/app/views/miq_ae_customization/editor.html.haml
index 1ef3c9ecd36f..0d358dbdded9 100644
--- a/app/views/miq_ae_customization/editor.html.haml
+++ b/app/views/miq_ae_customization/editor.html.haml
@@ -16,6 +16,10 @@
               :title => _("Dialog's description")}
               {{ vm.dialog.content[0].description }}
     .dialog-designer-container
+      %dialog-editor-modal{"modal-options" => "vm.modalOptions",
+                           "dialog-data" => "vm.dialogData",
+                           :visible => "vm.modalVisible",
+                           "ng-change" => "vm.showModal"}
       .toolbox-container
         #toolbox.static-field-container
           .draggable