diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/extended-lang-client.ts b/workspaces/ballerina/ballerina-core/src/interfaces/extended-lang-client.ts
index 5293d4ab909..3a8a6925644 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/extended-lang-client.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/extended-lang-client.ts
@@ -474,8 +474,10 @@ export interface GetDataMapperCodedataResponse {
 export interface PropertyRequest {
     filePath: string;
     codedata: CodeData;
-    propertyKey: string,
     targetField: string;
+}
+
+export interface FieldPropertyRequest extends PropertyRequest {
     fieldId: string;
 }
 
@@ -483,6 +485,17 @@ export interface PropertyResponse {
     property: Property;
 }
 
+export interface ClausePositionRequest {
+    filePath: string;
+    codedata: CodeData;
+    targetField: string;
+    index: number;
+}
+
+export interface ClausePositionResponse {
+    position: LinePosition;
+}
+
 export interface GraphqlDesignServiceParams {
     filePath: string;
     startLine: LinePosition;
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/index.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/index.ts
index 8c4a13dd0d8..b117410c013 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/index.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/index.ts
@@ -42,7 +42,10 @@ import {
     ProcessTypeReferenceResponse,
     ProcessTypeReferenceRequest,
     ExpandedDMModelResponse,
-    ClearTypeCacheResponse
+    ClearTypeCacheResponse,
+    FieldPropertyRequest,
+    ClausePositionRequest,
+    ClausePositionResponse
 } from "../../interfaces/extended-lang-client";
 
 export interface DataMapperAPI {
@@ -62,6 +65,8 @@ export interface DataMapperAPI {
     getDataMapperCodedata: (params: GetDataMapperCodedataRequest) => Promise<GetDataMapperCodedataResponse>;
     getSubMappingCodedata: (params: GetSubMappingCodedataRequest) => Promise<GetDataMapperCodedataResponse>;
     getProperty: (params: PropertyRequest) => Promise<PropertyResponse>;
+    getFieldProperty: (params: FieldPropertyRequest) => Promise<PropertyResponse>;
+    getClausePosition: (params: ClausePositionRequest) => Promise<ClausePositionResponse>;
     getExpandedDMFromDMModel: (params: DMModelRequest) => Promise<ExpandedDMModelResponse>;
     getProcessTypeReference: (params: ProcessTypeReferenceRequest) => Promise<ProcessTypeReferenceResponse>;
     clearTypeCache: () => Promise<ClearTypeCacheResponse>;
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/rpc-type.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/rpc-type.ts
index cb1a0b2eaad..876b413a300 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/rpc-type.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/rpc-type.ts
@@ -44,7 +44,10 @@ import {
     ProcessTypeReferenceResponse,
     ProcessTypeReferenceRequest,
     ExpandedDMModelResponse,
-    ClearTypeCacheResponse
+    ClearTypeCacheResponse,
+    FieldPropertyRequest,
+    ClausePositionRequest,
+    ClausePositionResponse
 } from "../../interfaces/extended-lang-client";
 import { RequestType } from "vscode-messenger-common";
 
@@ -65,6 +68,8 @@ export const mapWithTransformFn: RequestType<MapWithFnRequest, DataMapperSourceR
 export const getDataMapperCodedata: RequestType<GetDataMapperCodedataRequest, GetDataMapperCodedataResponse> = { method: `${_preFix}/getDataMapperCodedata` };
 export const getSubMappingCodedata: RequestType<GetSubMappingCodedataRequest, GetDataMapperCodedataResponse> = { method: `${_preFix}/getSubMappingCodedata` };
 export const getProperty: RequestType<PropertyRequest, PropertyResponse> = { method: `${_preFix}/getProperty` };
+export const getFieldProperty: RequestType<FieldPropertyRequest, PropertyResponse> = { method: `${_preFix}/getFieldProperty` };
+export const getClausePosition: RequestType<ClausePositionRequest, ClausePositionResponse> = { method: `${_preFix}/getClausePosition` };
 export const getExpandedDMFromDMModel: RequestType<DMModelRequest, ExpandedDMModelResponse> = { method: `${_preFix}/getExpandedDMFromDMModel` };
 export const getProcessTypeReference: RequestType<ProcessTypeReferenceRequest, ProcessTypeReferenceResponse> = { method: `${_preFix}/getProcessTypeReference` };
 export const clearTypeCache: RequestType<void, ClearTypeCacheResponse> = { method: `${_preFix}/clearTypeCache` };
diff --git a/workspaces/ballerina/ballerina-extension/src/core/extended-language-client.ts b/workspaces/ballerina/ballerina-extension/src/core/extended-language-client.ts
index 2dfeec60760..816c4f46e56 100644
--- a/workspaces/ballerina/ballerina-extension/src/core/extended-language-client.ts
+++ b/workspaces/ballerina/ballerina-extension/src/core/extended-language-client.ts
@@ -272,7 +272,10 @@ import {
     ProjectInfoRequest,
     ProjectInfo,
     onMigratedProject,
-    ProjectMigrationResult
+    ProjectMigrationResult,
+    FieldPropertyRequest,
+    ClausePositionResponse,
+    ClausePositionRequest
 } from "@wso2/ballerina-core";
 import { BallerinaExtension } from "./index";
 import { debug, handlePullModuleProgress } from "../utils";
@@ -371,6 +374,8 @@ enum EXTENDED_APIS {
     DATA_MAPPER_CODEDATA = 'dataMapper/nodePosition',
     DATA_MAPPER_SUB_MAPPING_CODEDATA = 'dataMapper/subMapping',
     DATA_MAPPER_PROPERTY = 'dataMapper/targetFieldPosition',
+    DATA_MAPPER_FIELD_PROPERTY = 'dataMapper/fieldPosition',
+    DATA_MAPPER_CLAUSE_POSITION = 'dataMapper/clausePosition',
     DATA_MAPPER_CLEAR_TYPE_CACHE = 'dataMapper/clearTypeCache',
     VIEW_CONFIG_VARIABLES = 'configEditor/getConfigVariables',
     UPDATE_CONFIG_VARIABLES = 'configEditor/updateConfigVariables',
@@ -845,6 +850,14 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         return this.sendRequest<PropertyResponse>(EXTENDED_APIS.DATA_MAPPER_PROPERTY, params);
     }
 
+    async getFieldProperty(params: FieldPropertyRequest): Promise<PropertyResponse | NOT_SUPPORTED_TYPE> {
+        return this.sendRequest<PropertyResponse>(EXTENDED_APIS.DATA_MAPPER_FIELD_PROPERTY, params);
+    }
+
+    async getClausePosition(params: ClausePositionRequest): Promise<ClausePositionResponse> {
+        return this.sendRequest<ClausePositionResponse>(EXTENDED_APIS.DATA_MAPPER_CLAUSE_POSITION, params);
+    }
+
     async clearTypeCache(): Promise<ClearTypeCacheResponse> {
         return this.sendRequest<ClearTypeCacheResponse>(EXTENDED_APIS.DATA_MAPPER_CLEAR_TYPE_CACHE);
     }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts
index ef60effd2ff..d4d063a30e8 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts
@@ -24,6 +24,7 @@ import {
     addNewArrayElement,
     addSubMapping,
     AddSubMappingRequest,
+    ClausePositionRequest,
     clearTypeCache,
     convertToQuery,
     ConvertToQueryRequest,
@@ -36,11 +37,14 @@ import {
     deleteSubMapping,
     DeleteSubMappingRequest,
     DMModelRequest,
+    FieldPropertyRequest,
+    getClausePosition,
     getDataMapperCodedata,
     GetDataMapperCodedataRequest,
     getDataMapperModel,
     getDataMapperSource,
     getExpandedDMFromDMModel,
+    getFieldProperty,
     getInitialIDMSource,
     getProcessTypeReference,
     getProperty,
@@ -53,7 +57,7 @@ import {
     mapWithTransformFn,
     ProcessTypeReferenceRequest,
     PropertyRequest,
-    VisualizableFieldsRequest
+    VisualizableFieldsRequest,
 } from "@wso2/ballerina-core";
 import { Messenger } from "vscode-messenger";
 import { DataMapperRpcManager } from "./rpc-manager";
@@ -76,6 +80,8 @@ export function registerDataMapperRpcHandlers(messenger: Messenger) {
     messenger.onRequest(getDataMapperCodedata, (args: GetDataMapperCodedataRequest) => rpcManger.getDataMapperCodedata(args));
     messenger.onRequest(getSubMappingCodedata, (args: GetSubMappingCodedataRequest) => rpcManger.getSubMappingCodedata(args));
     messenger.onRequest(getProperty, (args: PropertyRequest) => rpcManger.getProperty(args));
+    messenger.onRequest(getFieldProperty, (args: FieldPropertyRequest) => rpcManger.getFieldProperty(args));
+    messenger.onRequest(getClausePosition, (args: ClausePositionRequest) => rpcManger.getClausePosition(args));
     messenger.onRequest(getExpandedDMFromDMModel, (args: DMModelRequest) => rpcManger.getExpandedDMFromDMModel(args));
     messenger.onRequest(getProcessTypeReference, (args: ProcessTypeReferenceRequest) => rpcManger.getProcessTypeReference(args));
     messenger.onRequest(clearTypeCache, () => rpcManger.clearTypeCache());
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-manager.ts
index a9e94e73ce9..439a0d31391 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-manager.ts
@@ -21,6 +21,8 @@ import {
     AddArrayElementRequest,
     AddClausesRequest,
     AddSubMappingRequest,
+    ClausePositionRequest,
+    ClausePositionResponse,
     ClearTypeCacheResponse,
     ConvertToQueryRequest,
     DataMapperAPI,
@@ -34,6 +36,7 @@ import {
     DMModelRequest,
     ExpandedDMModel,
     ExpandedDMModelResponse,
+    FieldPropertyRequest,
     GetDataMapperCodedataRequest,
     GetDataMapperCodedataResponse,
     GetSubMappingCodedataRequest,
@@ -233,6 +236,26 @@ export class DataMapperRpcManager implements DataMapperAPI {
         });
     }
 
+    async getFieldProperty(params: FieldPropertyRequest): Promise<PropertyResponse> {
+        return new Promise(async (resolve) => {
+            const property = await StateMachine
+                .langClient()
+                .getFieldProperty(params) as PropertyResponse;
+
+            resolve(property);
+        });
+    }
+
+    async getClausePosition(params: ClausePositionRequest): Promise<ClausePositionResponse> {
+        return new Promise(async (resolve) => {
+            const position: any = await StateMachine
+                .langClient()
+                .getClausePosition(params);
+
+            resolve(position);
+        });
+    }
+
     async deleteMapping(params: DeleteMappingRequest): Promise<DataMapperSourceResponse> {
         return new Promise(async (resolve) => {
             await StateMachine
@@ -394,4 +417,5 @@ export class DataMapperRpcManager implements DataMapperAPI {
                 });
         });
     }
+
 }
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts
index a4c8b9bf67f..7c8219b7f43 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts
@@ -21,7 +21,8 @@ import {
     AddArrayElementRequest,
     AddClausesRequest,
     AddSubMappingRequest,
-    AllDataMapperSourceRequest,
+    ClausePositionRequest,
+    ClausePositionResponse,
     ClearTypeCacheResponse,
     ConvertToQueryRequest,
     DMModelRequest,
@@ -34,6 +35,7 @@ import {
     DeleteMappingRequest,
     DeleteSubMappingRequest,
     ExpandedDMModelResponse,
+    FieldPropertyRequest,
     GetDataMapperCodedataRequest,
     GetDataMapperCodedataResponse,
     GetSubMappingCodedataRequest,
@@ -54,10 +56,12 @@ import {
     deleteClause,
     deleteMapping,
     deleteSubMapping,
+    getClausePosition,
     getDataMapperCodedata,
     getDataMapperModel,
     getDataMapperSource,
     getExpandedDMFromDMModel,
+    getFieldProperty,
     getInitialIDMSource,
     getProcessTypeReference,
     getProperty,
@@ -140,6 +144,14 @@ export class DataMapperRpcClient implements DataMapperAPI {
         return this._messenger.sendRequest(getProperty, HOST_EXTENSION, params);
     }
 
+    getFieldProperty(params: FieldPropertyRequest): Promise<PropertyResponse> {
+        return this._messenger.sendRequest(getFieldProperty, HOST_EXTENSION, params);
+    }
+
+    getClausePosition(params: ClausePositionRequest): Promise<ClausePositionResponse> {
+        return this._messenger.sendRequest(getClausePosition, HOST_EXTENSION, params);
+    }
+
     getExpandedDMFromDMModel(params: DMModelRequest): Promise<ExpandedDMModelResponse> {
         return this._messenger.sendRequest(getExpandedDMFromDMModel, HOST_EXTENSION, params);
     }
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/EditorFactory.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/EditorFactory.tsx
index b66c118a6e7..4ea059de9f7 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/EditorFactory.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/EditorFactory.tsx
@@ -24,7 +24,7 @@ import { FormField } from "../Form/types";
 import { MultiSelectEditor } from "./MultiSelectEditor";
 import { TextEditor } from "./TextEditor";
 import { TypeEditor } from "./TypeEditor";
-import { ContextAwareExpressionEditor } from "./ExpressionEditor";
+import { ContextAwareExpressionEditor, DataMapperJoinClauseRhsEditor } from "./ExpressionEditor";
 import { ParamManagerEditor } from "../ParamManager/ParamManager";
 import { DropdownEditor } from "./DropdownEditor";
 import { FileSelect } from "./FileSelect";
@@ -218,6 +218,19 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
                 field={field}
             />
         );
+    } else if (field.type === "DM_JOIN_CLAUSE_RHS_EXPRESSION") {
+        // Expression field for Data Mapper join on condition RHS
+        return (
+            <DataMapperJoinClauseRhsEditor
+                field={field}
+                openSubPanel={openSubPanel}
+                subPanelView={subPanelView}
+                handleOnFieldFocus={handleOnFieldFocus}
+                onBlur={onBlur}
+                autoFocus={autoFocus}
+                recordTypeField={recordTypeFields?.find(recordField => recordField.key === field.key)}
+            />
+        );
     } else {
         // Default to text editor
         // Readonly fields are also treated as text editor
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx
index bc8dbf0e081..e8566cc31df 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx
@@ -32,6 +32,7 @@ import { getPropertyFromFormField, sanitizeType } from './utils';
 import { FormField, FormExpressionEditorProps, HelperpaneOnChangeOptions } from '../Form/types';
 import { useFormContext } from '../../context';
 import {
+    ExpressionProperty,
     LineRange,
     RecordTypeField,
     SubPanel,
@@ -303,6 +304,33 @@ export const ContextAwareExpressionEditor = (props: ContextAwareExpressionEditor
     );
 };
 
+export const DataMapperJoinClauseRhsEditor = (props: ContextAwareExpressionEditorProps) => {
+    const { form, expressionEditor, targetLineRange, fileName } = useFormContext();
+
+    const modifiedExpressionEditor = {
+        ...expressionEditor
+    };
+
+    modifiedExpressionEditor.retrieveCompletions = async (value: string, property: ExpressionProperty, offset: number, triggerCharacter?: string) => {
+        const varName = form.watch('name');
+        const expression = form.watch('expression');
+        const prefixExpr = `from var ${varName} in ${expression} select `;
+        return await expressionEditor.retrieveCompletions(prefixExpr + value, property, prefixExpr.length + offset, triggerCharacter);
+    }
+
+    return (
+        <ExpressionEditor
+            fileName={fileName}
+            targetLineRange={targetLineRange}
+            helperPaneZIndex={props.helperPaneZIndex}
+            {...form}
+            {...modifiedExpressionEditor}
+            {...props}
+        />
+    );
+};
+
+
 export const ExpressionEditor = (props: ExpressionEditorProps) => {
     const {
         autoFocus,
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx
index 759a65ca09d..a4ac82b8760 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx
@@ -284,8 +284,8 @@ export function DataMapperView(props: DataMapperProps) {
                 fileName={filePath}
                 preserveFieldOrder={true}
                 helperPaneSide="left"
+                isDataMapperEditor={true}
                 {...formProps}
-                targetLineRange={viewState.codedata.lineRange}
             />
         )
     }
@@ -360,6 +360,20 @@ export function DataMapperView(props: DataMapperProps) {
         }
     }
 
+    const getClausePosition = async (targetField: string, index: number) => {
+        try {
+            const { position } = await rpcClient.getDataMapperRpcClient().getClausePosition({
+                filePath,
+                codedata: viewState.codedata,
+                targetField: targetField,
+                index: index
+            });
+            return position;
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
     const addSubMapping = async (
         subMappingName: string,
         type: string,
@@ -492,13 +506,12 @@ export function DataMapperView(props: DataMapperProps) {
     };
 
     const goToSource = async (outputId: string, viewId: string) => {
-        const { property } = await rpcClient.getDataMapperRpcClient().getProperty({
+        const { property } = await rpcClient.getDataMapperRpcClient().getFieldProperty({
             filePath,
             codedata: viewState.codedata,
-            propertyKey: "expression", // TODO: Remove this once the API is updated
             targetField: viewId,
             fieldId: outputId,
-        })
+        });
         if (property.codedata) {
             const position: NodePosition = {
                 startLine: property.codedata.lineRange?.startLine?.line,
@@ -593,9 +606,7 @@ export function DataMapperView(props: DataMapperProps) {
                 const { property } = await rpcClient.getDataMapperRpcClient().getProperty({
                     filePath,
                     codedata: viewState.codedata,
-                    propertyKey: "expression", // TODO: Remove this once the API is updated
-                    targetField: viewId,
-                    fieldId: outputId,
+                    targetField: viewId
                 })
                 const { lineOffset, charOffset } = calculateExpressionOffsets(value, cursorPosition);
                 const startLine = updateLineRange(property.codedata.lineRange, expressionOffsetRef.current).startLine;
@@ -689,6 +700,7 @@ export function DataMapperView(props: DataMapperProps) {
                             convertToQuery={convertToQuery}
                             addClauses={addClauses}
                             deleteClause={deleteClause}
+                            getClausePosition={getClausePosition}
                             addSubMapping={addSubMapping}
                             deleteMapping={deleteMapping}
                             deleteSubMapping={deleteSubMapping}
diff --git a/workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx
index d0a73bd940e..69bb98736d8 100644
--- a/workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx
@@ -139,6 +139,7 @@ export function DataMapperEditor(props: DataMapperEditorProps) {
         generateForm,
         addClauses,
         deleteClause,
+        getClausePosition,
         mapWithCustomFn,
         mapWithTransformFn,
         goToFunction,
@@ -361,6 +362,7 @@ export function DataMapperEditor(props: DataMapperEditorProps) {
                                 targetField={views[views.length - 1].targetField}
                                 addClauses={addClauses}
                                 deleteClause={deleteClause}
+                                getClausePosition={getClausePosition}
                                 generateForm={generateForm}
                             />
                         )}
diff --git a/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseEditor.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseEditor.tsx
index 75cb3a1ba3a..9d0d8191158 100644
--- a/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseEditor.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseEditor.tsx
@@ -17,22 +17,26 @@
  */
 
 import React from "react";
-import { EditorContainer } from "./styles";
-import { Divider, Dropdown, OptionProps, Typography } from "@wso2/ui-toolkit";
-import { DMFormProps, DMFormField, DMFormFieldValues, IntermediateClauseType, IntermediateClause, IntermediateClauseProps } from "@wso2/ballerina-core";
+import { EditorContainer, ProgressRingWrapper } from "./styles";
+import { Divider, Dropdown, OptionProps, ProgressRing, Typography } from "@wso2/ui-toolkit";
+import { DMFormProps, DMFormField, DMFormFieldValues, IntermediateClauseType, IntermediateClause, IntermediateClauseProps, LinePosition } from "@wso2/ballerina-core";
 import { useDMQueryClausesPanelStore } from "../../../../store/store";
+import { useQuery } from "@tanstack/react-query";
 
 export interface ClauseEditorProps {
+    index: number;
+    targetField: string;
     clause?: IntermediateClause;
     onSubmitText?: string;
     isSaving: boolean;
     onSubmit: (clause: IntermediateClause) => void;
     onCancel: () => void;
+    getClausePosition: (targetField: string, index: number) => Promise<LinePosition>;
     generateForm: (formProps: DMFormProps) => JSX.Element;
 }
 
 export function ClauseEditor(props: ClauseEditorProps) {
-    const { clause, onSubmitText, isSaving, onSubmit, onCancel, generateForm } = props;
+    const { index, targetField, clause, onSubmitText, isSaving, onSubmit, onCancel, getClausePosition, generateForm } = props;
     const { clauseToAdd, setClauseToAdd } = useDMQueryClausesPanelStore.getState();
     const { type: _clauseType, properties: clauseProps } = clause ?? clauseToAdd ?? {};
 
@@ -110,7 +114,7 @@ export function ClauseEditor(props: ClauseEditorProps) {
     const rhsExpressionField: DMFormField = {
         key: "rhsExpression",
         label: "RHS Expression",
-        type: "EXPRESSION",
+        type: "DM_JOIN_CLAUSE_RHS_EXPRESSION",
         optional: false,
         editable: true,
         documentation: "Enter the RHS expression of join-on condition",
@@ -152,8 +156,17 @@ export function ClauseEditor(props: ClauseEditorProps) {
         }
     }
 
+    const { 
+        data: clausePosition, 
+        isFetching: isFetchingTargetLineRange
+    } = useQuery({
+        queryKey: ['getClausePosition', targetField, index],
+        queryFn: async () => await getClausePosition(targetField, index),
+        networkMode: 'always'
+    });
+
     const formProps: DMFormProps = {
-        targetLineRange:{ startLine: { line: 0, offset: 0 }, endLine: { line: 0, offset: 0 } },
+        targetLineRange: { startLine: clausePosition, endLine: clausePosition },
         fields: generateFields(),
         submitText: onSubmitText || "Add",
         cancelText: "Cancel",
@@ -179,7 +192,12 @@ export function ClauseEditor(props: ClauseEditorProps) {
                 value={clauseType}
             />
 
-            {generateForm(formProps)}
+            {isFetchingTargetLineRange ?
+                <ProgressRingWrapper>
+                    <ProgressRing sx={{ height: "20px", width: "20px" }} />
+                </ProgressRingWrapper> :
+                generateForm(formProps)
+            }
             
         </EditorContainer >
     );
diff --git a/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseItem.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseItem.tsx
index 58792dd89a5..ecd0eab0bf0 100644
--- a/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseItem.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseItem.tsx
@@ -34,11 +34,12 @@ import {
 } from "./styles";
 import { Button, Codicon, ProgressRing } from "@wso2/ui-toolkit";
 import {  ClauseEditor } from "./ClauseEditor";
-import { DMFormProps, IntermediateClause, IntermediateClauseType } from "@wso2/ballerina-core";
+import { DMFormProps, IntermediateClause, IntermediateClauseType, LinePosition } from "@wso2/ballerina-core";
 import { set } from "lodash";
 
 export interface ClauseItemProps {
     index: number;
+    targetField: string;
     clause: IntermediateClause;
     isSaving: boolean;
     isAdding: boolean;
@@ -49,11 +50,12 @@ export interface ClauseItemProps {
     onAdd: (clause: IntermediateClause, index?: number) => void;
     onEdit: (clause: IntermediateClause, index: number) => void;
     onDelete: (index: number) => void;
+    getClausePosition: (targetField: string, index: number) => Promise<LinePosition>;
     generateForm: (formProps: DMFormProps) => JSX.Element;
 }
 
 export function ClauseItem(props: ClauseItemProps) {
-    const { index, clause, isSaving, isAdding, isEditing, isDeleting, setAdding, setEditing, onDelete, onEdit, onAdd, generateForm } = props;
+    const { index, targetField, clause, isSaving, isAdding, isEditing, isDeleting, setAdding, setEditing, onDelete, onEdit, onAdd, getClausePosition, generateForm } = props;
     const { type: clauseType, properties: clauseProps } = clause;
 
 
@@ -104,20 +106,26 @@ export function ClauseItem(props: ClauseItemProps) {
 
             {isEditing && (
                 <ClauseEditor
+                    index={index}
+                    targetField={targetField}
                     clause={clause}
                     onSubmitText="Update"
                     isSaving={isSaving}
                     onSubmit={onHandleEdit}
                     onCancel={() => setEditing(undefined)}
+                    getClausePosition={getClausePosition}
                     generateForm={generateForm}
                 />
             )}
 
             {isAdding ? (
                 <ClauseEditor
+                    index={index + 1}
+                    targetField={targetField}
                     isSaving={isSaving}
                     onCancel={() => setAdding(undefined)}
                     onSubmit={onHandleAdd}
+                    getClausePosition={getClausePosition}
                     generateForm={generateForm} />
             ) : (
                 <AddButton onClick={() => setAdding(index)} />
diff --git a/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClausesPanel.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClausesPanel.tsx
index 46042de03a0..52d329b3f02 100644
--- a/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClausesPanel.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClausesPanel.tsx
@@ -23,20 +23,21 @@ import { useDMQueryClausesPanelStore } from "../../../../store/store";
 import { AddButton, ClauseItem } from "./ClauseItem";
 import { ClauseEditor } from "./ClauseEditor";
 import { ClauseItemListContainer } from "./styles";
-import { DMFormProps, IntermediateClause, Query } from "@wso2/ballerina-core";
+import { DMFormProps, IntermediateClause, LinePosition, Query } from "@wso2/ballerina-core";
 
 export interface ClausesPanelProps {
     query: Query;
     targetField: string;
     addClauses: (clause: IntermediateClause, targetField: string, isNew: boolean, index:number) => Promise<void>;
     deleteClause: (targetField: string, index: number) => Promise<void>;
+    getClausePosition: (targetField: string, index: number) => Promise<LinePosition>;
     generateForm: (formProps: DMFormProps) => JSX.Element;
 }
 
 export function ClausesPanel(props: ClausesPanelProps) {
     const { isQueryClausesPanelOpen, setIsQueryClausesPanelOpen } = useDMQueryClausesPanelStore();
     const { clauseToAdd, setClauseToAdd } = useDMQueryClausesPanelStore.getState();
-    const { query, targetField, addClauses, deleteClause, generateForm } = props;
+    const { query, targetField, addClauses, deleteClause, getClausePosition, generateForm } = props;
 
     const [adding, setAdding] = React.useState<number>();
     const [editing, setEditing] = React.useState<number>();
@@ -104,9 +105,12 @@ export function ClausesPanel(props: ClausesPanelProps) {
 
                 {adding === -1 ? (
                     <ClauseEditor
+                        index={0}
+                        targetField={targetField}
                         isSaving={saving === -1}
                         onCancel={() => setAdding(undefined)}
                         onSubmit={onAdd}
+                        getClausePosition={getClausePosition}
                         generateForm={generateForm}
                     />
                 ) : (
@@ -118,6 +122,7 @@ export function ClausesPanel(props: ClausesPanelProps) {
                         <ClauseItem
                             key={index}
                             index={index}
+                            targetField={targetField}
                             clause={clause}
                             isSaving={index === saving}
                             isAdding={index === adding}
@@ -128,11 +133,11 @@ export function ClausesPanel(props: ClausesPanelProps) {
                             onAdd={onAdd}
                             onEdit={onEdit}
                             onDelete={onDelete}
+                            getClausePosition={getClausePosition}
                             generateForm={generateForm} />
                     ))}
                 </ClauseItemListContainer>
 
-                
             </SidePanelBody>
         </SidePanel>
     );
diff --git a/workspaces/ballerina/data-mapper/src/index.tsx b/workspaces/ballerina/data-mapper/src/index.tsx
index 85f1e575359..27e713079cf 100644
--- a/workspaces/ballerina/data-mapper/src/index.tsx
+++ b/workspaces/ballerina/data-mapper/src/index.tsx
@@ -24,7 +24,7 @@ import type {} from "@projectstorm/react-diagrams-core";
 import type {} from "@projectstorm/react-diagrams";
 import { css, Global } from '@emotion/react';
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { DMFormProps, ModelState, IntermediateClause, Mapping, CodeData, FnMetadata, LineRange, ResultClauseType, IOType } from "@wso2/ballerina-core";
+import { DMFormProps, ModelState, IntermediateClause, Mapping, CodeData, FnMetadata, LineRange, ResultClauseType, IOType, Property, LinePosition } from "@wso2/ballerina-core";
 import { CompletionItem, ErrorBoundary } from "@wso2/ui-toolkit";
 
 import { DataMapperEditor } from "./components/DataMapper/DataMapperEditor";
@@ -68,6 +68,7 @@ export interface DataMapperEditorProps {
     convertToQuery: (mapping: Mapping, clauseType: ResultClauseType, viewId: string, name: string) => Promise<void>;
     addClauses: (clause: IntermediateClause, targetField: string, isNew: boolean, index:number) => Promise<void>;
     deleteClause: (targetField: string, index: number) => Promise<void>;
+    getClausePosition: (targetField: string, index: number) => Promise<LinePosition>;
     addSubMapping: (subMappingName: string, type: string, index: number, targetField: string, importsCodedata?: CodeData) => Promise<void>;
     deleteMapping: (mapping: Mapping, viewId: string) => Promise<void>;
     deleteSubMapping: (index: number, viewId: string) => Promise<void>;