diff --git a/docs/en_US/images/import_export_columns.png b/docs/en_US/images/import_export_columns.png
index e2130fb6c40f42709fb750ca4a5bf456d73f7bcb..3ce0be3e833d0ea2fd66b3c8d08a0ff2ac2a260f 100644
GIT binary patch
diff --git a/docs/en_US/images/import_export_complete.png b/docs/en_US/images/import_export_complete.png
index 0ad943603730a517d5a063214e181a6a674dc4c5..32e76f30ae1107700e775eb3bc63579f2dc45089 100644
GIT binary patch
diff --git a/docs/en_US/images/import_export_miscellaneous.png b/docs/en_US/images/import_export_miscellaneous.png
index 8ab62d905845ed9e6af3e65c1980b4e050709def..283320b4eba19c1c610fdd950fc75c59a0479f0d 100644
GIT binary patch
diff --git a/docs/en_US/images/import_export_options.png b/docs/en_US/images/import_export_options.png
index 89825d9355bc59c3cff9b5d34187ebeab2644241..a34ebc3433219b7976554d745b446e11951dca4c 100644
GIT binary patch
diff --git a/docs/en_US/images/import_export_pw.png b/docs/en_US/images/import_export_pw.png
index 55b307bf1dde329ce220806c7094011f6bc7d532..c2eba3452d9d8d263b5397dbcb5305d938ab4ce4 100644
GIT binary patch
diff --git a/web/pgadmin/tools/import_export/static/js/import_export.js b/web/pgadmin/tools/import_export/static/js/import_export.js
index 72d5f43c2..2f9509077 100644
--- a/web/pgadmin/tools/import_export/static/js/import_export.js
+++ b/web/pgadmin/tools/import_export/static/js/import_export.js
@@ -8,390 +8,27 @@
 //////////////////////////////////////////////////////////////
 
 import Notify from 'static/js/helpers/Notifier';
+import {getUtilityView} from '../../../../browser/static/js/utility_view';
+import getApiInstance from 'sources/api_instance';
+import ImportExportSchema, {getFileInfoSchema, getMiscellaneousSchema} from './import_export.ui';
+import { getNodeListByName, getNodeAjaxOptions } from '../../../../browser/static/js/node_ajax';
 
 define([
-  'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'pgadmin.alertifyjs',
-  'sources/pgadmin', 'pgadmin.browser', 'backbone', 'backgrid', 'backform',
-  'sources/utils',
+  'sources/gettext', 'sources/url_for',
+  'sources/pgadmin', 'pgadmin.browser',
   'sources/nodes/supported_database_node',
-  'pgadmin.backform', 'pgadmin.backgrid', 'pgadmin.browser.node.ui',
 ], function(
-  gettext, url_for, $, _, Alertify, pgAdmin, pgBrowser, Backbone, Backgrid,
-  Backform, commonUtils, supportedNodes
-) {
+  gettext, url_for, pgAdmin, pgBrowser, supportedNodes) {
 
   pgAdmin = pgAdmin || window.pgAdmin || {};
 
   var pgTools = pgAdmin.Tools = pgAdmin.Tools || {};
+  const api = getApiInstance();
 
   // Return back, this has been called more than once
   if (pgAdmin.Tools.import_utility)
     return pgAdmin.Tools.import_utility;
 
-  // Main model for Import/Export functionality
-  var ImportExportModel = Backbone.Model.extend({
-    defaults: {
-      is_import: false,
-      /* false for Export */
-      filename: undefined,
-      format: 'csv',
-      encoding: undefined,
-      oid: undefined,
-      header: undefined,
-      delimiter: '',
-      quote: '\"',
-      escape: '\'',
-      null_string: undefined,
-      columns: null,
-      icolumns: [],
-      database: undefined,
-      schema: undefined,
-      table: undefined,
-    },
-    schema: [{
-      id: 'is_import',
-      label: gettext('Import/Export'),
-      cell: 'switch',
-      type: 'switch',
-      group: gettext('Options'),
-      options: {
-        'onText': gettext('Import'),
-        'offText': gettext('Export'),
-        width: '65',
-      },
-    }, {
-      type: 'nested',
-      control: 'fieldset',
-      label: gettext('File Info'),
-      group: gettext('Options'),
-      schema: [{ /* select file control for import */
-        id: 'filename',
-        label: gettext('Filename'),
-        deps: ['is_import'],
-        type: 'text',
-        control: Backform.FileControl,
-        group: gettext('File Info'),
-        dialog_type: 'select_file',
-        supp_types: ['csv', 'txt', '*'],
-        visible: 'importing',
-      }, { /* create file control for export */
-        id: 'filename',
-        label: gettext('Filename'),
-        deps: ['is_import'],
-        type: 'text',
-        control: Backform.FileControl,
-        group: gettext('File Info'),
-        dialog_type: 'create_file',
-        supp_types: ['csv', 'txt', '*'],
-        visible: 'exporting',
-      }, {
-        id: 'format',
-        label: gettext('Format'),
-        cell: 'string',
-        control: 'select2',
-        group: gettext('File Info'),
-        options: [{
-          'label': 'binary',
-          'value': 'binary',
-        }, {
-          'label': 'csv',
-          'value': 'csv',
-        }, {
-          'label': 'text',
-          'value': 'text',
-        } ],
-        disabled: 'isDisabled',
-        select2: {
-          allowClear: false,
-          width: '100%',
-        },
-      }, {
-        id: 'encoding',
-        label: gettext('Encoding'),
-        cell: 'string',
-        control: 'node-ajax-options',
-        node: 'database',
-        url: 'get_encodings',
-        first_empty: true,
-        group: gettext('File Info'),
-      }],
-    }, {
-      id: 'columns',
-      label: gettext('Columns to import'),
-      cell: 'string',
-      deps: ['is_import'],
-      type: 'array',
-      first_empty: false,
-      control: Backform.NodeListByNameControl.extend({
-        // By default, all the import columns should be selected
-        initialize: function() {
-          Backform.NodeListByNameControl.prototype.initialize.apply(this, arguments);
-          var self = this,
-            options = self.field.get('options'),
-            op_vals = [];
-
-          if (_.isFunction(options)) {
-            try {
-              var all_cols = options.apply(self);
-              for (var idx in all_cols) {
-                op_vals.push((all_cols[idx])['value']);
-              }
-            } catch (e) {
-              // Do nothing
-              console.warn(e.stack || e);
-            }
-          } else {
-            for (idx in options) {
-              op_vals.push((options[idx])['value']);
-            }
-          }
-
-          self.model.set('columns', op_vals);
-        },
-      }),
-      transform: function(rows) {
-        var self = this,
-          node = self.field.get('schema_node'),
-          res = [];
-
-        _.each(rows, function(r) {
-          // System columns with id less than 0 should not be added.
-          if ('_id' in r && r._id > 0) {
-            var l = (_.isFunction(node['node_label']) ?
-                (node['node_label']).apply(node, [r, self.model, self]) :
-                r.label),
-              image = (_.isFunction(node['node_image']) ?
-                (node['node_image']).apply(
-                  node, [r, self.model, self]
-                ) :
-                (node['node_image'] || ('icon-' + node.type)));
-            res.push({
-              'value': r.label,
-              'image': image,
-              'label': l,
-            });
-          }
-        });
-
-        return res;
-      },
-      node: 'column',
-      url: 'nodes',
-      group: gettext('Columns'),
-      select2: {
-        multiple: true,
-        allowClear: false,
-        placeholder: gettext('Columns for importing...'),
-        first_empty: false,
-        preserveSelectionOrder: true,
-      },
-      visible: 'importing',
-      helpMessage: gettext('An optional list of columns to be copied. If no column list is specified, all columns of the table will be copied.'),
-    }, {
-      id: 'columns',
-      label: gettext('Columns to export'),
-      cell: 'string',
-      deps: ['is_import'],
-      type: 'array',
-      control: 'node-list-by-name',
-      first_empty: false,
-      node: 'column',
-      url: 'nodes',
-      group: gettext('Columns'),
-      select2: {
-        multiple: true,
-        allowClear: true,
-        first_empty: false,
-        placeholder: gettext('Columns for exporting...'),
-        preserveSelectionOrder: true,
-      },
-      visible: 'exporting',
-      transform: function(rows) {
-        var self = this,
-          node = self.field.get('schema_node'),
-          res = [];
-
-        _.each(rows, function(r) {
-          var l = (_.isFunction(node['node_label']) ?
-              (node['node_label']).apply(node, [r, self.model, self]) :
-              r.label),
-            image = (_.isFunction(node['node_image']) ?
-              (node['node_image']).apply(
-                node, [r, self.model, self]
-              ) :
-              (node['node_image'] || ('icon-' + node.type)));
-          res.push({
-            'value': r.label,
-            'image': image,
-            'label': l,
-          });
-        });
-
-        return res;
-      },
-      helpMessage: gettext('An optional list of columns to be copied. If no column list is specified, all columns of the table will be copied.'),
-    }, {
-      id: 'null_string',
-      label: gettext('NULL Strings'),
-      cell: 'string',
-      type: 'text',
-      group: gettext('Columns'),
-      disabled: 'isDisabled',
-      deps: ['format'],
-      helpMessage: gettext('Specifies the string that represents a null value. The default is \\N (backslash-N) in text format, and an unquoted empty string in CSV format. You might prefer an empty string even in text format for cases where you don\'t want to distinguish nulls from empty strings. This option is not allowed when using binary format.'),
-    }, {
-      id: 'icolumns',
-      label: gettext('Not null columns'),
-      cell: 'string',
-      control: 'node-list-by-name',
-      node: 'column',
-      group: gettext('Columns'),
-      deps: ['format', 'is_import'],
-      disabled: 'isDisabled',
-      type: 'array',
-      first_empty: false,
-      select2: {
-        multiple: true,
-        allowClear: true,
-        first_empty: false,
-        placeholder: gettext('Not null columns...'),
-      },
-      helpMessage: gettext('Do not match the specified column values against the null string. In the default case where the null string is empty, this means that empty values will be read as zero-length strings rather than nulls, even when they are not quoted. This option is allowed only in import, and only when using CSV format.'),
-    }, {
-      type: 'nested',
-      control: 'fieldset',
-      label: gettext('Miscellaneous'),
-      group: gettext('Options'),
-      schema: [{
-        id: 'oid',
-        label: gettext('OID'),
-        cell: 'string',
-        type: 'switch',
-        group: gettext('Miscellaneous'),
-      }, {
-        id: 'header',
-        label: gettext('Header'),
-        cell: 'string',
-        type: 'switch',
-        group: gettext('Miscellaneous'),
-        deps: ['format'],
-        disabled: 'isDisabled',
-      }, {
-        id: 'delimiter',
-        label: gettext('Delimiter'),
-        cell: 'string',
-        first_empty: true,
-        type: 'text',
-        control: 'node-ajax-options',
-        group: gettext('Miscellaneous'),
-        disabled: 'isDisabled',
-        deps: ['format'],
-        options: [{
-          'label': ';',
-          'value': ';',
-        },
-        {
-          'label': ',',
-          'value': ',',
-        },
-        {
-          'label': '|',
-          'value': '|',
-        },
-        {
-          'label': '[tab]',
-          'value': '[tab]',
-        },
-        ],
-        select2: {
-          tags: true,
-          allowClear: false,
-          width: '100%',
-          placeholder: gettext('Select from list...'),
-        },
-        helpMessage: gettext('Specifies the character that separates columns within each row (line) of the file. The default is a tab character in text format, a comma in CSV format. This must be a single one-byte character. This option is not allowed when using binary format.'),
-      },
-      {
-        id: 'quote',
-        label: gettext('Quote'),
-        cell: 'string',
-        first_empty: true,
-        deps: ['format'],
-        type: 'text',
-        control: 'node-ajax-options',
-        group: gettext('Miscellaneous'),
-        disabled: 'isDisabled',
-        options: [{
-          'label': '\"',
-          'value': '\"',
-        },
-        {
-          'label': '\'',
-          'value': '\'',
-        },
-        ],
-        select2: {
-          tags: true,
-          allowClear: false,
-          width: '100%',
-          placeholder: gettext('Select from list...'),
-        },
-        helpMessage: gettext('Specifies the quoting character to be used when a data value is quoted. The default is double-quote. This must be a single one-byte character. This option is allowed only when using CSV format.'),
-      },
-      {
-        id: 'escape',
-        label: gettext('Escape'),
-        cell: 'string',
-        first_empty: true,
-        deps: ['format'],
-        type: 'text',
-        control: 'node-ajax-options',
-        group: gettext('Miscellaneous'),
-        disabled: 'isDisabled',
-        options: [{
-          'label': '\"',
-          'value': '\"',
-        },
-        {
-          'label': '\'',
-          'value': '\'',
-        },
-        ],
-        select2: {
-          tags: true,
-          allowClear: false,
-          width: '100%',
-          placeholder: gettext('Select from list...'),
-        },
-        helpMessage: gettext('Specifies the character that should appear before a data character that matches the QUOTE value. The default is the same as the QUOTE value (so that the quoting character is doubled if it appears in the data). This must be a single one-byte character. This option is allowed only when using CSV format.'),
-      },
-      ],
-    } ],
-
-    // Enable/Disable the items based on the user file format selection
-    isDisabled: function(m) {
-      switch (this.name) {
-      case 'quote':
-      case 'escape':
-      case 'header':
-        return (m.get('format') != 'csv');
-      case 'icolumns':
-        return (m.get('format') != 'csv' || !m.get('is_import'));
-      case 'null_string':
-      case 'delimiter':
-        return (m.get('format') == 'binary');
-      default:
-        return false;
-      }
-    },
-    importing: function(m) {
-      return m.get('is_import');
-    },
-    exporting: function(m) {
-      return !(m.importing.apply(this, arguments));
-    },
-  });
-
   pgTools.import_utility = {
     init: function() {
       // We do not want to initialize the module multiple times.
@@ -419,6 +56,45 @@ define([
         },
       }]);
     },
+    getUISchema: function(treeItem) {
+      let treeNodeInfo = pgBrowser.tree.getTreeNodeHierarchy(treeItem);
+      const selectedNode = pgBrowser.tree.selected();
+      let itemNodeData = pgBrowser.tree.findNodeByDomElement(selectedNode).getData();
+
+      return new ImportExportSchema(
+        ()=>getFileInfoSchema(
+          {encoding: ()=>getNodeAjaxOptions('get_encodings', pgBrowser.Nodes['database'], treeNodeInfo, itemNodeData, {cacheNode: 'database',cacheLevel: 'server'})}
+        ),
+        ()=>getMiscellaneousSchema(),
+        {columns: ()=>getNodeListByName('column', treeNodeInfo, itemNodeData, { cacheLevel: 'column'}, ()=>true, (res)=>{
+          res.forEach(d => {
+            res.push({label: d.label, value: d.value, image:'icon-column', selected: true});
+          });
+          return res;
+        })}
+      );
+    },
+
+    importExportCallBack: function(data, dialog) {
+      if(data.errormsg) {
+        Notify.alert(
+          gettext('Utility not found'),
+          gettext(data.errormsg)
+        );
+      } else {
+        Notify.success(gettext('Import/Export job created.'));
+        pgBrowser.Events.trigger('pgadmin-bgprocess:created', dialog);
+      }
+    },
+
+    setExtraParameters(treeInfo) {
+      var extraData = {};
+      extraData['database'] = treeInfo.database._label;
+      extraData['schema'] = treeInfo.schema._label;
+      extraData['table'] = treeInfo.table._label;
+      extraData['save_btn_icon'] = 'done';
+      return extraData;
+    },
 
     /*
       Open the dialog for the import functionality
@@ -446,270 +122,59 @@ define([
         return;
       }
 
-      if (!commonUtils.hasBinariesConfiguration(pgBrowser, server_data, Alertify)) {
-        return;
-      }
-
       var t = pgBrowser.tree;
       i = item || t.selected();
-      var d = i  ? t.itemData(i) : undefined,
-        node = d && pgBrowser.Nodes[d._type];
+      var d = i  ? t.itemData(i) : undefined;
 
       if (!d)
         return;
 
       var treeInfo = t && t.getTreeNodeHierarchy(i);
 
-      if (!Alertify.ImportDialog) {
-        Alertify.dialog('ImportDialog', function factory() {
-
-          return {
-            main: function(title, pg_node, pg_item, data) {
-              this.set('title', title);
-              this.setting('pg_node', pg_node);
-              this.setting('pg_item', pg_item);
-              this.setting('pg_item_data', data);
-            },
-
-            build: function() {
-              Alertify.pgDialogBuild.apply(this);
-            },
-
-            setup: function() {
-              return {
-                buttons: [{
-                  text: gettext('Cancel'),
-                  key: 27,
-                  'data-btn-name': 'cancel',
-                  className: 'btn btn-secondary fa fa-lg fa-times pg-alertify-button',
-                }, {
-                  text: gettext('OK'),
-                  key: 13,
-                  disable: true,
-                  'data-btn-name': 'ok',
-                  className: 'btn btn-primary fa fa-lg fa-check pg-alertify-button',
-                }],
-                options: {
-                  modal: true,
-                  padding: !1,
-                  overflow: !1,
-                },
-              };
-            },
-
-            settings: {
-              pg_node: null,
-              pg_item: null,
-              pg_item_data: null,
-            },
-
-            // Callback functions when click on the buttons of the Alertify dialogs
-            callback: function(e) {
-              if (e.button['data-btn-name'] === 'ok') {
-
-                var itemArr = this.settings['pg_item'],
-                  treeData = pgBrowser.tree.getTreeNodeHierarchy(itemArr);
-
-                this.view.model.set({
-                  'database': treeData.database._label,
-                  'schema': treeData.schema._label,
-                  'table': treeData.table._label,
-                });
-                var self = this;
-
-                $.ajax({
-                  url: url_for(
-                    'import_export.create_job', {
-                      'sid': treeData.server._id,
-                    }
-                  ),
-                  method: 'POST',
-                  data: {
-                    'data': JSON.stringify(this.view.model.toJSON()),
-                  },
-                })
-                  .done(function(res) {
-                    if (res.success) {
-                      Notify.success(gettext('Import/Export job created.'), 5000);
-                      pgBrowser.Events.trigger('pgadmin-bgprocess:created', self);
-                    } else {
-                      Notify.alert(
-                        gettext('Import/Export job creation failed.'),
-                        res.errormsg
-                      );
-                    }
-                  })
-                  .fail(function(xhr) {
-                    try {
-                      var err = JSON.parse(xhr.responseText);
-                      Notify.alert(
-                        gettext('Import/Export job failed.'),
-                        err.errormsg
-                      );
-                    } catch (error) {
-                      console.warn(error.stack || error);
-                    }
-                  });
-              }
-            },
-
-            hooks: {
-              onclose: function() {
-                if (this.view) {
-                  this.view.remove({
-                    data: true,
-                    internal: true,
-                    silent: true,
-                  });
-                }
-              },
-
-              // triggered when a dialog option gets update.
-              onupdate: function(option, oldValue, newValue) {
-                if(option === 'resizable') {
-                  if (newValue) {
-                    this.elements.content.removeAttribute('style');
-                  } else {
-                    this.elements.content.style.minHeight = 'inherit';
-                  }
-                }
-              },
-
-              onshow: function() {
-                var container = $(this.elements.body).find('.tab-content:first > .tab-pane.active:first');
-                $('.select2-search__field').attr('aria-label', 'select2');
-                commonUtils.findAndSetFocus(container);
-              },
-            },
-
-            prepare: function() {
-              // Main import module container
-              var self = this;
-
-              // Disable OK button until user provides valid Filename
-              this.__internal.buttons[1].element.disabled = true;
-
-              var $container = $('<div class=\'import_dlg\'></div>'),
-                itemArr = this.settings.pg_item,
-                treeData = pgBrowser.tree.getTreeNodeHierarchy(itemArr),
-                newModel = new ImportExportModel({}, {
-                  node_info: treeData,
-                }),
-                fields = Backform.generateViewSchema(
-                  treeData, newModel, 'create', node, treeData.server, true
-                ),
-                view = this.view = new Backform.Dialog({
-                  el: $container,
-                  model: newModel,
-                  schema: fields,
-                });
-
-              $(this.elements.body.childNodes[0]).addClass(
-                'alertify_tools_dialog_properties obj_properties'
-              );
-              view.render();
-
-              const statusBar = $(
-                '<div class=\'pg-prop-status-bar pg-prop-status-bar-absolute pg-el-xs-12 d-none\'>' +
-              '  <div class="error-in-footer"> ' +
-              '    <div class="d-flex px-2 py-1"> ' +
-              '      <div class="pr-2"> ' +
-              '        <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i> ' +
-              '      </div> ' +
-              '      <div class="alert-text" role="alert"></div> ' +
-              '       <div class="ml-auto close-error-bar"> ' +
-              '          <a aria-label="' + gettext('Close error bar') + '" class="close-error fa fa-times text-danger"></a> ' +
-              '        </div> ' +
-              '    </div> ' +
-              '  </div> ' +
-              '</div>').appendTo($container);
-              this.elements.content.appendChild($container.get(0));
-
-              // Listen to model & if filename is provided then enable OK button
-              // For the 'Quote', 'escape' and 'delimiter' only one character is allowed to enter
-              this.view.model.on('change', function() {
-                const ctx = this;
-                var errmsg;
-                const showError = function(errorField, errormsg) {
-                  ctx.errorModel.set(errorField, errormsg);
-                  statusBar.removeClass('d-none');
-                  statusBar.find('.alert-text').html(errormsg);
-                  self.elements.dialog.querySelector('.close-error').addEventListener('click', ()=>{
-                    statusBar.addClass('d-none');
-                    ctx.errorModel.set(errorField, errormsg);
-                  });
-                };
-                if (!_.isUndefined(this.get('filename')) && this.get('filename') !== '') {
-                  this.errorModel.clear();
-                  statusBar.addClass('d-none');
-                  if (!_.isUndefined(this.get('delimiter')) && !_.isNull(this.get('delimiter'))) {
-                    this.errorModel.clear();
-                    statusBar.addClass('d-none');
-                    if (!_.isUndefined(this.get('quote')) && this.get('quote') !== '' &&
-                      this.get('quote').length == 1) {
-                      this.errorModel.clear();
-                      statusBar.addClass('d-none');
-                      if (!_.isUndefined(this.get('escape')) && this.get('escape') !== '' &&
-                        this.get('escape').length == 1) {
-                        this.errorModel.clear();
-                        statusBar.addClass('d-none');
-                        self.__internal.buttons[1].element.disabled = false;
-                      } else {
-                        self.__internal.buttons[1].element.disabled = true;
-                        errmsg = gettext('Escape should contain only one character');
-                        showError('escape', errmsg);
-                      }
-                    } else {
-                      self.__internal.buttons[1].element.disabled = true;
-                      errmsg = gettext('Quote should contain only one character');
-                      showError('quote', errmsg);
-                    }
-                  } else {
-                    self.__internal.buttons[1].element.disabled = true;
-                    errmsg = gettext('Delimiter should contain only one character');
-                    showError('delimiter', errmsg);
-                  }
-                } else {
-                  self.__internal.buttons[1].element.disabled = true;
-                  errmsg = gettext('Please provide filename');
-                  showError('filename', errmsg);
-                }
-              });
-
-              view.$el.attr('tabindex', -1);
-              setTimeout(function() {
-                pgBrowser.keyboardNavigation.getDialogTabNavigator($(self.elements.dialog));
-              }, 200);
-            },
-          };
-        });
-      }
-
-      const baseUrl = url_for('import_export.utility_exists', {
+      const baseUrlUtilitCheck = url_for('import_export.utility_exists', {
         'sid': server_data._id,
       });
 
       // Check psql utility exists or not.
-      $.ajax({
-        url: baseUrl,
+      let that = this;
+      api({
+        url: baseUrlUtilitCheck,
         type:'GET',
       })
-        .done(function(res) {
-          if (!res.success) {
+        .then(function(res) {
+          if (!res.data.success) {
             Notify.alert(
               gettext('Utility not found'),
-              res.errormsg
+              res.data.errormsg
             );
             return;
-          }
+          }else{
+            // Open the Alertify dialog for the import/export module
+            pgBrowser.Node.registerUtilityPanel();
+            var panel = pgBrowser.Node.addUtilityPanel(pgBrowser.stdW.md, pgBrowser.stdH.lg),
+              j = panel.$container.find('.obj_properties').first();
+
+            var schema = that.getUISchema(item);
+            panel.title(gettext('Import/Export data - table \'%s\'', treeInfo.table.label));
+            panel.focus();
+
+            let urlShortcut = 'import_export.create_job',
+              baseUrl =  url_for(urlShortcut, {
+                'sid': treeInfo.server._id,
+              });
+
+            let extraData = that.setExtraParameters(treeInfo);
 
-          // Open the Alertify dialog for the import/export module
-          Alertify.ImportDialog(
-            gettext('Import/Export data - table \'%s\'', treeInfo.table.label),
-            node, i, d
-          ).set('resizable', true).resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.lg);
+            let sqlHelpUrl = 'sql-copy.html',
+              helpUrl = url_for('help.static', {
+                'filename': 'import_export_data.html',
+              });
+
+            getUtilityView(schema, treeInfo, 'select', 'dialog', j[0], panel, that.importExportCallBack, extraData, 'OK', baseUrl, sqlHelpUrl, helpUrl);
+
+          }
         })
-        .fail(function() {
+        .catch(function() {
           Notify.alert(
             gettext('Utility not found'),
             gettext('Failed to fetch Utility information')
diff --git a/web/pgadmin/tools/import_export/static/js/import_export.ui.js b/web/pgadmin/tools/import_export/static/js/import_export.ui.js
new file mode 100644
index 000000000..644ed2135
--- /dev/null
+++ b/web/pgadmin/tools/import_export/static/js/import_export.ui.js
@@ -0,0 +1,277 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2022, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import BaseUISchema from 'sources/SchemaView/base_schema.ui';
+import gettext from 'sources/gettext';
+import { isEmptyString } from 'sources/validators';
+
+export class FileInfoSchema extends BaseUISchema{
+  constructor(fieldOptions={}) {
+    super();
+
+    this.fieldOptions = {
+      encoding: null,
+      ...fieldOptions,
+    };
+  }
+
+  get baseFields() {
+    var obj = this;
+    return [{
+      id: 'filename',
+      label: gettext('Filename'),
+      type: (state) => {
+        return {
+          type: 'file',
+          controlProps: {
+            dialogType: state.is_import ? 'select_file' : 'create_file',
+            supportedTypes: ['csv', 'text','bin', '*'],
+            dialogTitle: 'Select file',
+          }
+        };
+      },
+      deps: ['is_import', 'format'],
+      disabled: false,
+    }, {
+      id: 'format',
+      label: gettext('Format'),
+      type: 'select',
+      controlProps: { allowClear: false, noEmpty: true },
+      options: [
+        {
+          label: gettext('binary'),
+          value: 'binary',
+        },
+        {
+          label: gettext('csv'),
+          value: 'csv',
+        },
+        {
+          label: gettext('text'),
+          value: 'text',
+        },
+      ]
+    }, {
+      id: 'encoding',
+      label: gettext('Encoding'),
+      type: 'select',
+      options: obj.fieldOptions.encoding,
+    }
+    ];
+  }
+}
+
+export function getFileInfoSchema(fieldOptions) {
+  return new FileInfoSchema(fieldOptions);
+}
+
+export class MiscellaneousSchema extends BaseUISchema {
+  constructor() {
+    super();
+  }
+
+  isDisabled(state) {
+    return (state?.format != 'csv');
+  }
+
+  get baseFields() {
+    let obj = this;
+    return [{
+      id: 'oid',
+      label: gettext('OID'),
+      type: 'switch',
+      group: gettext('Miscellaneous')
+    }, {
+      id: 'header',
+      label: gettext('Header'),
+      type: 'switch',
+      group: gettext('Miscellaneous'),
+      disabled: obj.isDisabled
+    },{
+      id: 'delimiter',
+      label: gettext('Delimiter'),
+      group: gettext('Miscellaneous'),
+      type: 'select',
+      controlProps: { allowClear: false},
+      deps: ['format'],
+      options: [{
+        'label': ';',
+        'value': ';',
+      },
+      {
+        'label': ',',
+        'value': ',',
+      },
+      {
+        'label': '|',
+        'value': '|',
+      },
+      {
+        'label': '[tab]',
+        'value': '[tab]',
+      },
+      ],
+      disabled: function(state) {
+        return (state?.format == 'binary');
+      },
+      helpMessage: gettext('Specifies the character that separates columns within each row (line) of the file. The default is a tab character in text format, a comma in CSV format. This must be a single one-byte character. This option is not allowed when using binary format.')
+    }, {
+      id: 'quote',
+      label: gettext('Quote'),
+      group: gettext('Miscellaneous'),
+      type: 'select',
+      options: [{
+        'label': '\"',
+        'value': '\"',
+      },
+      {
+        'label': '\'',
+        'value': '\'',
+      },
+      ],
+      disabled: obj.isDisabled,
+      helpMessage: gettext('Specifies the quoting character to be used when a data value is quoted. The default is double-quote. This must be a single one-byte character. This option is allowed only when using CSV format.'),
+    }, {
+      id: 'escape',
+      label: gettext('Escape'),
+      group: gettext('Miscellaneous'),
+      type: 'select',
+      options: [{
+        'label': '\"',
+        'value': '\"',
+      },
+      {
+        'label': '\'',
+        'value': '\'',
+      },
+      ],
+      disabled: obj.isDisabled,
+      helpMessage: gettext('Specifies the character that should appear before a data character that matches the QUOTE value. The default is the same as the QUOTE value (so that the quoting character is doubled if it appears in the data). This must be a single one-byte character. This option is allowed only when using CSV format.'),
+    }
+    ];
+  }
+}
+
+export function getMiscellaneousSchema() {
+  return new MiscellaneousSchema();
+}
+
+export default class ImportExportSchema extends BaseUISchema {
+  constructor(_getFileInfoSchema, _getMiscellaneousSchema, fieldOptions = {}) {
+    super({
+      null_string: undefined,
+      is_import: false,
+      icolumns: [],
+      oid: undefined,
+      header: undefined,
+      delimiter: '',
+      quote: '\"',
+      escape: '\'',
+      file: undefined,
+      format: 'csv'
+    });
+
+    this.fieldOptions = {
+      columns:[],
+      ...fieldOptions,
+    };
+
+    this.getFileInfoSchema = _getFileInfoSchema;
+    this.getMiscellaneousSchema = _getMiscellaneousSchema;
+    // e=export, i=import
+    this.colums_selection_label = {e:'Columns to export', i:'Columns to import'};
+    this._type = 'e';
+    this.notNullColOptions = [];
+  }
+
+
+
+  get baseFields() {
+    var obj = this;
+    return [{
+      id: 'is_import',
+      label: gettext('Import/Export'),
+      group: gettext('Options'),
+      type: 'toggle',
+      options: [
+        { 'label': gettext('Import'), 'value': true },
+        { 'label': gettext('Export'), 'value': false },
+      ],
+    }, {
+      type: 'nested-fieldset',
+      label: gettext('File Info'),
+      group: gettext('Options'),
+      schema: obj.getFileInfoSchema(),
+    }, {
+      type: 'nested-fieldset',
+      label: gettext('Miscellaneous'),
+      group: gettext('Options'),
+      schema: obj.getMiscellaneousSchema(),
+    }, {
+      id: 'columns',
+      label: gettext(this.colums_selection_label[this._type]),
+      group: gettext('Columns'),
+      type: 'select',
+      options: obj.fieldOptions.columns,
+      optionsLoaded: (options) => {
+        obj.notNullColOptions = options.map((o) => {
+          return { ...o, selected: false };
+        });
+      },
+      controlProps:{multiple: true, allowClear: false,
+        placeholder: this._type === 'i' ? gettext('Columns for importing...') : gettext('Columns for exporting...'),
+      },
+      deps:['is_import'],
+      depChange:(state)=>{
+        this._type = state.is_import? 'i' : 'e';
+      },
+      helpMessage: gettext('An optional list of columns to be copied. If no column list is specified, all columns of the table will be copied.')
+    }, {
+      id: 'null_string',
+      label: gettext('NULL Strings'),
+      group: gettext('Columns'),
+      type: 'text',
+      deps: ['format'],
+      disabled: function(state) {
+        return (state?.format == 'binary');
+      },
+      helpMessage: gettext('Specifies the string that represents a null value. The default is \\N (backslash-N) in text format, and an unquoted empty string in CSV format. You might prefer an empty string even in text format for cases where you don\'t want to distinguish nulls from empty strings. This option is not allowed when using binary format.'),
+    }, {
+      id: 'icolumns',
+      label: gettext('Not null columns'),
+      group: gettext('Columns'),
+      type: 'select',
+      deps: ['format', 'is_import'],
+      options: obj.notNullColOptions,
+      optionsReloadBasis: obj.notNullColOptions.length,
+      controlProps: {
+        multiple: true, allowClear: true, placeholder: gettext('Not null columns...'),
+      },
+      disabled:function(state){
+        return (state?.format != 'csv' || !state?.is_import);
+      },
+      helpMessage: gettext('Do not match the specified column values against the null string. In the default case where the null string is empty, this means that empty values will be read as zero-length strings rather than nulls, even when they are not quoted. This option is allowed only in import, and only when using CSV format.'),
+    }
+    ];
+  }
+
+  validate(state, setError) {
+    if (isEmptyString(state.service)) {
+      let errmsg = null;
+      /* events validation*/
+      if (!state.filename) {
+        errmsg = gettext('Please provide a filename.');
+        setError('filename', errmsg);
+        return true;
+      } else {
+        setError('filename', null);
+      }
+    }
+  }
+}
diff --git a/web/regression/javascript/schema_ui_files/import_export.ui.spec.js b/web/regression/javascript/schema_ui_files/import_export.ui.spec.js
new file mode 100644
index 000000000..457e27ce1
--- /dev/null
+++ b/web/regression/javascript/schema_ui_files/import_export.ui.spec.js
@@ -0,0 +1,50 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2022, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import React from 'react';
+import '../helper/enzyme.helper';
+import { createMount } from '@material-ui/core/test-utils';
+import SchemaView from '../../../pgadmin/static/js/SchemaView';
+import ImportExportSchema, {getFileInfoSchema, getMiscellaneousSchema} from '../../../pgadmin/tools/import_export/static/js/import_export.ui';
+
+describe('ImportExportSchema', ()=>{
+  let mount;
+  beforeAll(()=>{
+    mount = createMount();
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  let importExportSchemaObj = new ImportExportSchema(
+    ()=>getFileInfoSchema(),
+    ()=>getMiscellaneousSchema(),
+    {columns: ()=>[]}
+  );
+
+  it('start import export', ()=>{
+    mount(<SchemaView
+      formType='dialog'
+      schema={importExportSchemaObj}
+      viewHelperProps={{
+        mode: 'create',
+      }}
+      onSave={()=>{/*This is intentional (SonarQube)*/}}
+      onClose={()=>{/*This is intentional (SonarQube)*/}}
+      onHelp={()=>{/*This is intentional (SonarQube)*/}}
+      onDataChange={()=>{/*This is intentional (SonarQube)*/}}
+      confirmOnCloseReset={false}
+      hasSQL={false}
+      disableSqlHelp={false}
+      disableDialogHelp={false}
+    />);
+  });
+
+});
