diff --git a/packages/web/src/datagrid/JslDataGrid.svelte b/packages/web/src/datagrid/JslDataGrid.svelte
index 04d443cbb..b06c60970 100644
--- a/packages/web/src/datagrid/JslDataGrid.svelte
+++ b/packages/web/src/datagrid/JslDataGrid.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { createGridCache, createGridConfig, JslGridDisplay } from 'dbgate-datalib';
   import { writable } from 'svelte/store';
+  import JslFormView from '../formview/JslFormView.svelte';
   import { apiOff, apiOn, useApiCall } from '../utility/api';
   import useEffect from '../utility/useEffect';
 
@@ -56,6 +57,7 @@
     {display}
     {jslid}
     gridCoreComponent={JslDataGridCore}
+    formViewComponent={JslFormView}
     bind:loadedRows
     isDynamicStructure={$info?.__isDynamicStructure}
     useEvalFilters
diff --git a/packages/web/src/formview/JslFormView.svelte b/packages/web/src/formview/JslFormView.svelte
new file mode 100644
index 000000000..12b04f441
--- /dev/null
+++ b/packages/web/src/formview/JslFormView.svelte
@@ -0,0 +1,34 @@
+<script lang="ts" context="module">
+  async function loadRow(props, index) {
+    const { jslid, formatterFunction, display } = props;
+
+    const response = await apiCall('jsldata/get-rows', {
+      jslid,
+      offset: index,
+      limit: 1,
+      formatterFunction,
+      filters: display ? display.compileFilters() : null,
+    });
+
+    if (response.errorMessage) return response;
+    return response.rows[0];
+  }
+</script>
+
+<script lang="ts">
+  import { apiCall } from '../utility/api';
+  import _ from 'lodash';
+  import LoadingFormView from './LoadingFormView.svelte';
+
+  export let display;
+
+  async function handleLoadRow() {
+    return await loadRow($$props, display.config.formViewRecordNumber || 0);
+  }
+
+  async function handleLoadRowCount() {
+    return null;
+  }
+</script>
+
+<LoadingFormView {...$$props} loadRowFunc={handleLoadRow} loadRowCountFunc={handleLoadRowCount} />
diff --git a/packages/web/src/formview/LoadingFormView.svelte b/packages/web/src/formview/LoadingFormView.svelte
new file mode 100644
index 000000000..5473137b8
--- /dev/null
+++ b/packages/web/src/formview/LoadingFormView.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+  import FormView from './FormView.svelte';
+  import { apiCall } from '../utility/api';
+  import ChangeSetGrider from '../datagrid/ChangeSetGrider';
+  import _ from 'lodash';
+
+  export let changeSetState;
+  export let dispatchChangeSet;
+  export let masterLoadedTime;
+  export let conid;
+  export let database;
+  export let onReferenceSourceChanged;
+  export let display;
+
+  export let loadRowFunc;
+  export let loadRowCountFunc;
+
+  let isLoadingData = false;
+  let isLoadedData = false;
+  let rowData = null;
+  let isLoadingCount = false;
+  let isLoadedCount = false;
+  let loadedTime = new Date().getTime();
+  let allRowCount = null;
+  let errorMessage = null;
+
+  const handleLoadCurrentRow = async () => {
+    if (isLoadingData) return;
+    let newLoadedRow = false;
+    isLoadingData = true;
+    const row = await loadRowFunc(display.config.formViewRecordNumber || 0);
+    isLoadingData = false;
+    isLoadedData = true;
+    rowData = row;
+    loadedTime = new Date().getTime();
+    newLoadedRow = row;
+  };
+
+  const handleLoadRowCount = async () => {
+    isLoadingCount = true;
+    allRowCount = await loadRowCountFunc();
+    isLoadedCount = true;
+    isLoadingCount = false;
+  };
+
+  const handleNavigate = async command => {
+    display.formViewNavigate(command, allRowCount);
+  };
+
+  export function reload() {
+    isLoadingData = false;
+    isLoadedData = false;
+    isLoadingCount = false;
+    isLoadedCount = false;
+    rowData = null;
+    loadedTime = new Date().getTime();
+    allRowCount = null;
+    errorMessage = null;
+  }
+
+  $: {
+    if (masterLoadedTime && masterLoadedTime > loadedTime) {
+      display.reload();
+    }
+  }
+
+  $: {
+    if (display?.cache?.refreshTime > loadedTime) {
+      reload();
+    }
+  }
+
+  $: {
+    if (display?.isLoadedCorrectly) {
+      if (!isLoadedData && !isLoadingData) handleLoadCurrentRow();
+      if (isLoadedData && !isLoadingCount && !isLoadedCount) handleLoadRowCount();
+    }
+  }
+
+  $: grider = new ChangeSetGrider(rowData ? [rowData] : [], changeSetState, dispatchChangeSet, display);
+
+  $: if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData], loadedTime);
+</script>
+
+<FormView {...$$props} {grider} isLoading={isLoadingData} {allRowCount} onNavigate={handleNavigate} />
diff --git a/packages/web/src/formview/SqlFormView.svelte b/packages/web/src/formview/SqlFormView.svelte
index 7b28a2ae7..0c7af9fec 100644
--- a/packages/web/src/formview/SqlFormView.svelte
+++ b/packages/web/src/formview/SqlFormView.svelte
@@ -16,87 +16,20 @@
 </script>
 
 <script lang="ts">
-  import FormView from './FormView.svelte';
   import { apiCall } from '../utility/api';
-  import ChangeSetGrider from '../datagrid/ChangeSetGrider';
   import _ from 'lodash';
+  import LoadingFormView from './LoadingFormView.svelte';
 
-  export let changeSetState;
-  export let dispatchChangeSet;
-  export let masterLoadedTime;
-  export let conid;
-  export let database;
-  export let onReferenceSourceChanged;
   export let display;
 
-  let isLoadingData = false;
-  let isLoadedData = false;
-  let rowData = null;
-  let isLoadingCount = false;
-  let isLoadedCount = false;
-  let loadedTime = new Date().getTime();
-  let allRowCount = null;
-  let errorMessage = null;
+  async function handleLoadRow() {
+    return await loadRow($$props, display.getPageQuery(display.config.formViewRecordNumber || 0, 1));
+  }
 
-  const handleLoadCurrentRow = async () => {
-    if (isLoadingData) return;
-    let newLoadedRow = false;
-    isLoadingData = true;
-    const row = await loadRow($$props, display.getPageQuery(display.config.formViewRecordNumber || 0, 1));
-    isLoadingData = false;
-    isLoadedData = true;
-    rowData = row;
-    loadedTime = new Date().getTime();
-    newLoadedRow = row;
-  };
-
-  const handleLoadRowCount = async () => {
-    isLoadingCount = true;
+  async function handleLoadRowCount() {
     const countRow = await loadRow($$props, display.getCountQuery());
-    // const countBeforeRow = await loadRow($$props, formDisplay.getBeforeCountQuery());
-
-    isLoadedCount = true;
-    isLoadingCount = false;
-    allRowCount = countRow ? parseInt(countRow.count) : null;
-  };
-
-  const handleNavigate = async command => {
-    display.formViewNavigate(command, allRowCount);
-  };
-
-  export function reload() {
-    isLoadingData = false;
-    isLoadedData = false;
-    isLoadingCount = false;
-    isLoadedCount = false;
-    rowData = null;
-    loadedTime = new Date().getTime();
-    allRowCount = null;
-    errorMessage = null;
+    return countRow ? parseInt(countRow.count) : null;
   }
-
-  $: {
-    if (masterLoadedTime && masterLoadedTime > loadedTime) {
-      display.reload();
-    }
-  }
-
-  $: {
-    if (display?.cache?.refreshTime > loadedTime) {
-      reload();
-    }
-  }
-
-  $: {
-    if (display?.isLoadedCorrectly) {
-      if (!isLoadedData && !isLoadingData) handleLoadCurrentRow();
-      if (isLoadedData && !isLoadingCount && !isLoadedCount) handleLoadRowCount();
-    }
-  }
-
-  $: grider = new ChangeSetGrider(rowData ? [rowData] : [], changeSetState, dispatchChangeSet, display);
-
-  $: if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData], loadedTime);
 </script>
 
-<FormView {...$$props} {grider} isLoading={isLoadingData} {allRowCount} onNavigate={handleNavigate} />
+<LoadingFormView {...$$props} loadRowFunc={handleLoadRow} loadRowCountFunc={handleLoadRowCount} />