diff --git a/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue b/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
index 683b6e38b9..7f194144af 100644
--- a/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
+++ b/resources/js/admin/settings/components/AdditionalDriverConnectionProperties.vue
@@ -13,6 +13,8 @@ import ExcelConnectionProperties from "./cdata/ExcelConnectionProperties.vue";
 import GithubConnectionProperties from "./cdata/GithubConnectionProperties.vue";
 import DocusignConnectionProperties from "./cdata/DocusignConnectionProperties.vue";
 import GmailConnectionProperties from "./cdata/GmailConnectionProperties.vue";
+import BamboohrConnectionProperties from "./cdata/BamboohrConnectionProperties.vue";
+import SapHanaConnectionProperties from "./cdata/SapHanaConnectionProperties.vue";
 
 export default {
   components: {
@@ -20,6 +22,8 @@ export default {
     GithubConnectionProperties,
     DocusignConnectionProperties,
     GmailConnectionProperties,
+    BamboohrConnectionProperties,
+    SapHanaConnectionProperties,
   },
   props: {
     formData: {
@@ -38,6 +42,8 @@ export default {
         "cdata.github": "github-connection-properties",
         "cdata.docusign": "docusign-connection-properties",
         "cdata.gmail": "gmail-connection-properties",
+        "cdata.BambooHR": "bamboohr-connection-properties",
+        "cdata.saphana": "sap-hana-connection-properties",
       },
     };
   },
diff --git a/resources/js/admin/settings/components/SettingDriverAuthorization.vue b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
index a5772dddcf..494ac24c6b 100644
--- a/resources/js/admin/settings/components/SettingDriverAuthorization.vue
+++ b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
@@ -1,17 +1,20 @@
 <template>
   <div>
+    <!-- Authorize badge -->
     <div v-if="hasAuthorizedBadge">
       <b-badge
         pill
         :variant="isAuthorized ? 'success' : 'warning'"
       >
-        <span v-if="isAuthorized">{{ $t('Authorized') }}</span>
-        <span v-else>{{ $t('Not Authorized') }}</span>
+        <span v-if="isAuthorized">{{ $t("Authorized") }}</span>
+        <span v-else>{{ $t("Not Authorized") }}</span>
       </b-badge>
     </div>
     <div v-else>
-      Empty
+      {{ $t("Empty") }}
     </div>
+
+    <!-- Connection properties modal -->
     <b-modal
       v-model="showModal"
       class="setting-object-modal"
@@ -24,110 +27,30 @@
         class="d-block"
       >
         <div>
-          <h5
-            v-if="setting.name"
-            class="mb-0"
-          >
-            {{ $t(setting.name) }}
-          </h5>
-          <h5
-            v-else
-            class="mb-0"
-          >
-            {{ setting.key }}
+          <h5 class="mb-0">
+            <span v-if="setting.name">{{ $t(setting.name) }}</span>
+            <span v-else>{{ $t(setting.key) }}</span>
           </h5>
-          <small class="form-text text-muted">{{ $t('Configure the driver connection properties.') }}</small>
+          <small class="form-text text-muted">
+            {{ $t("Configure the driver connection properties.") }}
+          </small>
         </div>
         <button
           type="button"
-          :aria-label="$t('Close')"
           class="close"
+          :aria-label="$t('Close')"
           @click="onCancel"
         >
-          ×
+          &times;
         </button>
       </template>
       <div>
-        <b-form-group
-          required
-          :label="$t('Client ID')"
-          :description="formDescription('The client ID assigned when you register your application.', 'client_id', errors)"
-          :invalid-feedback="errorMessage('client_id', errors)"
-          :state="errorState('client_id', errors)"
-        >
-          <b-form-input
-            v-model="formData.client_id"
-            required
-            autofocus
-            autocomplete="off"
-            :state="errorState('client_id', errors)"
-            name="client_id"
-            data-cy="client_id"
-          />
-        </b-form-group>
-
-        <b-form-group
-          required
-          :label="$t('Client Secret')"
-          :description="formDescription('The client secret assigned when you register your application.', 'client_secret', errors)"
-          :invalid-feedback="errorMessage('client_secret', errors)"
-          :state="errorState('client_secret', errors)"
-        >
-          <b-input-group>
-            <b-form-input
-              v-model="formData.client_secret"
-              required
-              autofocus
-              autocomplete="off"
-              trim
-              :type="type"
-              :state="errorState('client_secret', errors)"
-              name="client_secret"
-              data-cy="client_secret"
-            />
-            <b-input-group-append>
-              <b-button
-                :aria-label="$t('Toggle Show Password')"
-                variant="secondary"
-                @click="togglePassword"
-              >
-                <i
-                  class="fas"
-                  :class="icon"
-                />
-              </b-button>
-            </b-input-group-append>
-          </b-input-group>
-        </b-form-group>
-
-        <b-form-group
-          required
-          :label="$t('Redirect URL')"
-          :description="formDescription('This value must match the callback URL you specify in your app settings.', 'callback_url', errors)"
-          :invalid-feedback="errorMessage('callback_url', errors)"
-          :state="errorState('callback_url', errors)"
-        >
-          <b-input-group>
-            <b-form-input
-              v-model="formData.callback_url"
-              autofocus
-              readonly
-              autocomplete="off"
-              :state="errorState('callback_url', errors)"
-              name="callback_url"
-              data-cy="callback_url"
-            />
-            <b-input-group-append>
-              <b-button
-                :aria-label="$t('Copy')"
-                variant="secondary"
-                @click="onCopy"
-              >
-                <i class="fas fa-copy" />
-              </b-button>
-            </b-input-group-append>
-          </b-input-group>
-        </b-form-group>
+        <component
+          :is="authSchemeToComponent(setting.config?.AuthScheme)"
+          :form-data="formData"
+          :auth-scheme="setting.config?.AuthScheme"
+          @updateFormData="updateFormData"
+        />
 
         <additional-driver-connection-properties
           :driver-key="setting?.key"
@@ -145,20 +68,20 @@
           data-cy="cancel-button"
           @click="onCancel"
         >
-          {{ $t('Cancel') }}
+          {{ $t("Cancel") }}
         </button>
         <button
           type="button"
           class="btn btn-secondary ml-3"
           data-cy="authorize-button"
-          :disabled="isButtonDisabled"
           @click="onSave"
         >
-          {{ $t('Authorize') }}
+          {{ $t("Authorize") }}
         </button>
       </div>
     </b-modal>
 
+    <!-- Authorizing modal -->
     <b-modal
       v-model="showAuthorizingModal"
       class="setting-object-modal"
@@ -169,26 +92,33 @@
       no-fade
     >
       <div class="text-center">
-        <h3>{{ $t('Connecting Driver') }}</h3>
+        <h3>{{ $t("Connecting Driver") }}</h3>
         <i class="fas fa-circle-notch fa-spin fa-3x p-0 text-primary" />
       </div>
     </b-modal>
   </div>
 </template>
-
 <script>
 // eslint-disable-next-line import/no-unresolved
 import { FormErrorsMixin, Required } from "SharedComponents";
 import settingMixin from "../mixins/setting";
 import AdditionalDriverConnectionProperties from "./AdditionalDriverConnectionProperties.vue";
+import OauthConnectionProperties from "./cdata/OauthConnectionProperties.vue";
+import NoneConnectionProperties from "./cdata/NoneConnectionProperties.vue";
+import PasswordConnectionProperties from "./cdata/PasswordConnectionProperties.vue";
 
 export default {
-  components: { AdditionalDriverConnectionProperties },
+  components: {
+    AdditionalDriverConnectionProperties,
+    OauthConnectionProperties,
+    NoneConnectionProperties,
+    PasswordConnectionProperties,
+  },
   mixins: [settingMixin, FormErrorsMixin, Required],
   props: {
     setting: {
       type: [Object, null],
-      default: null,
+      default: () => ({}),
     },
     value: {
       type: Object,
@@ -198,19 +128,19 @@ export default {
   data() {
     return {
       input: "",
-      formData: {
-        client_id: "",
-        client_secret: "",
-        callback_url: "",
-      },
+      formData: {},
       selected: null,
       showModal: false,
       showAuthorizingModal: false,
       transformed: null,
       errors: {},
-      isInvalid: true,
-      type: "password",
       resetData: true,
+      componentsMap: {
+        OAuth: "oauth-connection-properties",
+        None: "none-connection-properties",
+        Password: "password-connection-properties",
+        Basic: "password-connection-properties",
+      },
     };
   },
   computed: {
@@ -227,26 +157,6 @@ export default {
       }
       return false;
     },
-    changed() {
-      return JSON.stringify(this.formData) !== JSON.stringify(this.transformed);
-    },
-    icon() {
-      if (this.type === "password") {
-        return "fa-eye";
-      }
-      return "fa-eye-slash";
-    },
-    isButtonDisabled() {
-      return this.isInvalid || (this.isAuthorized && !this.changed);
-    },
-  },
-  watch: {
-    formData: {
-      handler() {
-        this.isInvalid = this.validateData();
-      },
-      deep: true,
-    },
   },
   mounted() {
     if (this.value === null) {
@@ -254,30 +164,11 @@ export default {
     } else {
       this.formData = this.value;
     }
-    this.isInvalid = this.validateData();
     this.transformed = this.copy(this.formData);
   },
   methods: {
-    onCopy() {
-      navigator.clipboard.writeText(this.formData.callback_url).then(() => {
-        ProcessMaker.alert(this.$t("The setting was copied to your clipboard."), "success");
-      }, () => {
-        ProcessMaker.alert(this.$t("The setting was not copied to your clipboard."), "danger");
-      });
-    },
-    togglePassword() {
-      if (this.type === "text") {
-        this.type = "password";
-      } else {
-        this.type = "text";
-      }
-    },
-    validateData() {
-      // Check if client_id and client_secret are empty
-      const clientIdEmpty = _.isEmpty(this.formData.client_id);
-      const clientSecretEmpty = _.isEmpty(this.formData.client_secret);
-
-      return _.isEmpty(this.formData) || clientIdEmpty || clientSecretEmpty;
+    authSchemeToComponent(scheme) {
+      return this.componentsMap[scheme] || null;
     },
     onCancel() {
       this.showModal = false;
@@ -294,14 +185,48 @@ export default {
     onModalHidden() {
       this.resetFormData();
     },
+    generateCallbackUrl(item) {
+      if (item.config.AuthScheme === "OAuth") {
+        const name = item.key.split("cdata.")[1];
+        const appUrl = document.head.querySelector("meta[name=\"app-url\"]").content;
+
+        this.formData.callback_url = `${appUrl}/external-integrations/${name}`;
+      }
+    },
     authorizeConnection() {
       this.showAuthorizingModal = true;
       this.showModal = false;
       this.resetData = false;
-      ProcessMaker.apiClient.post(`settings/${this.setting.id}/get-oauth-url`, this.formData)
+
+      if (this.setting.config.AuthScheme === "OAuth") {
+        this.authorizeOAuthConnection();
+      } else {
+        this.authorizeNoneConnection();
+      }
+    },
+    authorizeOAuthConnection() {
+      ProcessMaker.apiClient
+        .post(`settings/${this.setting.id}/get-oauth-url`, this.formData)
         .then((response) => {
           window.location = response.data?.url;
         })
+        .catch((error) => {
+          const errorMessage = error.response?.data?.message || error.message;
+          ProcessMaker.alert(errorMessage, "danger");
+        })
+        .finally(() => {
+          this.showModal = true;
+          this.showAuthorizingModal = false;
+        });
+    },
+    authorizeNoneConnection() {
+      ProcessMaker.apiClient
+        .post(`settings/${this.setting.id}/authorize-driver`, this.formData)
+        .then((response) => {
+          window.location = response.data.url;
+          this.showModal = false;
+          this.showAuthorizingModal = true;
+        })
         .catch((error) => {
           const errorMessage = error.response?.data?.message || error.message;
           ProcessMaker.alert(errorMessage, "danger");
@@ -310,18 +235,11 @@ export default {
         });
     },
     onSave() {
-      const driver = this.setting.key.split("cdata.")[1];
-
-      this.formData.driver = driver;
+      this.formData.name = this.setting.config?.name;
+      this.formData.driver = this.setting.config?.driver;
       this.transformed = { ...this.formData };
       this.authorizeConnection();
     },
-    generateCallbackUrl(data) {
-      const name = data.key.split("cdata.")[1];
-      const appUrl = document.head.querySelector("meta[name=\"app-url\"]").content;
-
-      this.formData.callback_url = `${appUrl}/external-integrations/${name}`;
-    },
     resetFormData() {
       if (this.resetData) {
         this.formData = {
diff --git a/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue b/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
new file mode 100644
index 0000000000..74032c3495
--- /dev/null
+++ b/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <!-- API key input field -->
+    <b-form-group
+      required
+      :label="$t('API Key')"
+      :description="formDescription('Your BambooHR API Key.', 'APIKey', errors)"
+      :invalid-feedback="errorMessage('APIKey', errors)"
+      :state="errorState('APIKey', errors)"
+    >
+      <b-input-group>
+        <b-form-input
+          v-model="config.APIKey"
+          required
+          autofocus
+          autocomplete="off"
+          trim
+          :type="inputType"
+          :state="errorState('APIKey', errors)"
+          name="APIKey"
+          data-cy="api-key"
+        />
+        <b-input-group-append>
+          <b-button
+            :aria-label="$t('Toggle Show Password')"
+            variant="secondary"
+            @click="togglePassword"
+          >
+            <i
+              class="fas"
+              :class="icon"
+            />
+          </b-button>
+        </b-input-group-append>
+      </b-input-group>
+    </b-form-group>
+
+    <!-- Domain input field -->
+    <b-form-group
+      required
+      :label="$t('Domain')"
+      :description="
+        formDescription('The Domain for the BambooHR account.', 'Domain', errors)
+      "
+      :invalid-feedback="errorMessage('Domain', errors)"
+      :state="errorState('Domain', errors)"
+    >
+      <b-form-input
+        v-model="config.Domain"
+        required
+        autofocus
+        autocomplete="off"
+        :state="errorState('Domain', errors)"
+        name="Domain"
+        data-cy="domain"
+      />
+    </b-form-group>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line import/no-unresolved
+import { FormErrorsMixin } from "SharedComponents";
+
+export default {
+  mixins: [FormErrorsMixin],
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      errors: {},
+      config: {
+        APIKey: "",
+        Domain: "",
+      },
+      inputType: "password",
+    };
+  },
+  computed: {
+    icon() {
+      return this.inputType === "password" ? "fa-eye-slash" : "fa-eye";
+    },
+  },
+  watch: {
+    config: {
+      deep: true,
+      handler() {
+        this.$emit("updateFormData", this.config);
+      },
+    },
+  },
+  mounted() {
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
+    this.$emit("updateFormData", this.config);
+  },
+  methods: {
+    togglePassword() {
+      this.inputType = this.inputType === "password" ? "text" : "password";
+    },
+  },
+};
+</script>
diff --git a/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue b/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue
index 81cdbbfc7b..7599845514 100644
--- a/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue
@@ -51,7 +51,10 @@ export default {
     },
   },
   mounted() {
-    this.config.use_sandbox = this.formData?.use_sandbox ?? true;
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
 
     // Emit the updateFormData event after assigning values.
     this.$emit("updateFormData", this.config);
diff --git a/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue b/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue
index 045e6f8a48..d80858b488 100644
--- a/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue
@@ -61,7 +61,6 @@ export default {
       config: {
         connection_type: "",
         uri: "",
-        AuthScheme: "OAuth",
       },
       connectionOptions: {
         oauth: [
diff --git a/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue b/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue
index 862eab8e6c..2e04b5914e 100644
--- a/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue
@@ -18,7 +18,6 @@ export default {
     return {
       errors: {},
       config: {
-        AuthScheme: "OAuth",
         Schema: "REST",
         Scope: "https://mail.google.com/",
       },
diff --git a/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue b/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
new file mode 100644
index 0000000000..f95f8d50ca
--- /dev/null
+++ b/resources/js/admin/settings/components/cdata/NoneConnectionProperties.vue
@@ -0,0 +1,26 @@
+<template>
+  <div />
+</template>
+<script>
+export default {
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      config: {
+        AuthScheme: "None",
+      },
+    };
+  },
+  mounted() {
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
+  },
+};
+</script>
diff --git a/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
new file mode 100644
index 0000000000..43d205c1b4
--- /dev/null
+++ b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <b-form-group
+      required
+      :label="$t('Client ID')"
+      :description="
+        formDescription(
+          'The client ID assigned when you register your application.',
+          'client_id',
+          errors
+        )
+      "
+      :invalid-feedback="errorMessage('client_id', errors)"
+      :state="errorState('client_id', errors)"
+    >
+      <b-form-input
+        v-model="config.client_id"
+        required
+        autofocus
+        autocomplete="off"
+        :state="errorState('client_id', errors)"
+        name="client_id"
+        data-cy="client_id"
+      />
+    </b-form-group>
+
+    <b-form-group
+      required
+      :label="$t('Client Secret')"
+      :description="
+        formDescription(
+          'The client secret assigned when you register your application.',
+          'client_secret',
+          errors
+        )
+      "
+      :invalid-feedback="errorMessage('client_secret', errors)"
+      :state="errorState('client_secret', errors)"
+    >
+      <b-input-group>
+        <b-form-input
+          v-model="config.client_secret"
+          required
+          autofocus
+          autocomplete="off"
+          trim
+          :type="inputType"
+          :state="errorState('client_secret', errors)"
+          name="client_secret"
+          data-cy="client_secret"
+        />
+        <b-input-group-append>
+          <b-button
+            :aria-label="$t('Toggle Show Password')"
+            variant="secondary"
+            @click="togglePassword"
+          >
+            <i
+              class="fas"
+              :class="icon"
+            />
+          </b-button>
+        </b-input-group-append>
+      </b-input-group>
+    </b-form-group>
+
+    <b-form-group
+      required
+      :label="$t('Redirect URL')"
+      :description="
+        formDescription(
+          'This value must match the callback URL you specify in your app settings.',
+          'callback_url',
+          errors
+        )
+      "
+      :invalid-feedback="errorMessage('callback_url', errors)"
+      :state="errorState('callback_url', errors)"
+    >
+      <b-input-group>
+        <b-form-input
+          v-model="config.callback_url"
+          autofocus
+          readonly
+          autocomplete="off"
+          :state="errorState('callback_url', errors)"
+          name="callback_url"
+          data-cy="callback_url"
+        />
+        <b-input-group-append>
+          <b-button
+            :aria-label="$t('Copy')"
+            variant="secondary"
+            @click="onCopy"
+          >
+            <i class="fas fa-copy" />
+          </b-button>
+        </b-input-group-append>
+      </b-input-group>
+    </b-form-group>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line import/no-unresolved
+import { FormErrorsMixin } from "SharedComponents";
+
+export default {
+  mixins: [FormErrorsMixin],
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      config: {
+        AuthScheme: "OAuth",
+        client_id: "",
+        client_secret: "",
+        callback_url: "",
+      },
+      errors: {},
+      inputType: "password",
+    };
+  },
+  computed: {
+    icon() {
+      return this.inputType === "password"
+        ? "fa-eye-slash"
+        : "fa-eye";
+    },
+  },
+  watch: {
+    config: {
+      deep: true,
+      handler() {
+        this.$emit("updateFormData", this.config);
+      },
+    },
+  },
+  mounted() {
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
+    this.$emit("updateFormData", this.config);
+  },
+  methods: {
+    onCopy() {
+      this.$copyText(this.config.callback_url).then(() => {
+        this.$bvToast.toast(this.$t("Copied"), {
+          title: this.$t("Success"),
+          variant: "success",
+          solid: true,
+        });
+      });
+    },
+    togglePassword() {
+      this.inputType = this.inputType === "password" ? "text" : "password";
+    },
+  },
+};
+</script>
diff --git a/resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue b/resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue
new file mode 100644
index 0000000000..523630db86
--- /dev/null
+++ b/resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <b-form-group
+      required
+      :label="$t('User')"
+      :description="
+        formDescription('The user account used to authenticate.', 'user', errors)
+      "
+      :invalid-feedback="errorMessage('user', errors)"
+      :state="errorState('user', errors)"
+    >
+      <b-form-input
+        v-model="config.user"
+        required
+        autofocus
+        autocomplete="off"
+        :state="errorState('user', errors)"
+        name="user"
+        data-cy="user"
+      />
+    </b-form-group>
+
+    <b-form-group
+      required
+      :label="$t('Password')"
+      :description="
+        formDescription('The password used to authenticate the user.', 'password', errors)
+      "
+      :invalid-feedback="errorMessage('password', errors)"
+      :state="errorState('password', errors)"
+    >
+      <b-input-group>
+        <b-form-input
+          v-model="config.password"
+          required
+          autofocus
+          autocomplete="off"
+          trim
+          :type="inputType"
+          :state="errorState('password', errors)"
+          name="password"
+          data-cy="password"
+        />
+        <b-input-group-append>
+          <b-button
+            :aria-label="$t('Toggle Show Password')"
+            variant="secondary"
+            @click="togglePassword"
+          >
+            <i
+              class="fas"
+              :class="icon"
+            />
+          </b-button>
+        </b-input-group-append>
+      </b-input-group>
+    </b-form-group>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line import/no-unresolved
+import { FormErrorsMixin } from "SharedComponents";
+
+export default {
+  mixins: [FormErrorsMixin],
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+    authScheme: {
+      type: String,
+      default: "Password",
+    },
+  },
+  data() {
+    return {
+      config: {
+        AuthScheme: this.authScheme,
+        user: "",
+        password: "",
+      },
+      errors: {},
+      inputType: "password",
+    };
+  },
+  computed: {
+    icon() {
+      return this.inputType === "password" ? "fa-eye-slash" : "fa-eye";
+    },
+  },
+  watch: {
+    config: {
+      deep: true,
+      handler() {
+        this.$emit("updateFormData", this.config);
+      },
+    },
+  },
+  mounted() {
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
+    this.$emit("updateFormData", this.config);
+  },
+  methods: {
+    togglePassword() {
+      this.inputType = this.inputType === "password" ? "text" : "password";
+    },
+  },
+};
+</script>
diff --git a/resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue b/resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue
new file mode 100644
index 0000000000..d366edbc09
--- /dev/null
+++ b/resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <!-- Server input field -->
+    <b-form-group
+      required
+      :label="$t('Server')"
+      :description="
+        formDescription(
+          'The name of the server running SAP HANA database.',
+          'server',
+          errors
+        )
+      "
+      :invalid-feedback="errorMessage('server', errors)"
+      :state="errorState('server', errors)"
+    >
+      <b-form-input
+        v-model="config.server"
+        type="text"
+        required
+        trim
+        name="server"
+        data-cy="server"
+        :state="errorState('server', errors)"
+      />
+    </b-form-group>
+
+    <!-- Port input field -->
+    <b-form-group
+      required
+      :label="$t('Port')"
+      :description="formDescription('The port of the SAP HANA database.', 'port', errors)"
+      :invalid-feedback="errorMessage('port', errors)"
+      :state="errorState('port', errors)"
+    >
+      <b-form-input
+        v-model="config.port"
+        required
+        name="port"
+        data-cy="port"
+        :state="errorState('port', errors)"
+      />
+    </b-form-group>
+
+    <!-- Database input field -->
+    <b-form-group
+      required
+      :label="$t('Database')"
+      :description="
+        formDescription('The name of the SAP HANA database.', 'database', errors)
+      "
+      :invalid-feedback="errorMessage('database', errors)"
+      :state="errorState('database', errors)"
+    >
+      <b-form-input
+        v-model="config.database"
+        required
+        name="database"
+        data-cy="database"
+        :state="errorState('database', errors)"
+      />
+    </b-form-group>
+
+    <!-- UseSSL switch field -->
+    <b-form-group
+      :label="$t('Use SSL')"
+      :description="
+        formDescription('This field sets whether SSL is enabled.', 'UseSSL', errors)
+      "
+      :invalid-feedback="errorMessage('UseSSL', errors)"
+      :state="errorState('UseSSL', errors)"
+    >
+      <b-form-checkbox
+        v-model="config.UseSSL"
+        name="use_ssl"
+        data-cy="use_ssl"
+        switch
+        :state="errorState('UseSSL', errors)"
+      />
+    </b-form-group>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line import/no-unresolved
+import { FormErrorsMixin } from "SharedComponents";
+
+export default {
+  mixins: [FormErrorsMixin],
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      errors: {},
+      config: {
+        server: "",
+        port: "",
+        database: "",
+        UseSSL: true,
+      },
+    };
+  },
+  computed: {},
+  watch: {
+    config: {
+      deep: true,
+      handler() {
+        this.$emit("updateFormData", this.config);
+      },
+    },
+  },
+  mounted() {
+    this.config = {
+      ...this.config,
+      ...this.formData,
+    };
+
+    this.$emit("updateFormData", this.config);
+  },
+  methods: {},
+};
+</script>