+
+ {t('scenarios:edit_string_template.template_field.label')}
+
+
+
+ {variableNames.length > 0 ? (
+
+ {t('scenarios:edit_string_template.variables.label')}
+
+ {variableNames.map((name) => (
+
+
+
+ {name}
+
+
+
+ setVariable(name, node)}
+ />
+
+
+
+ ))}
+
+
+ ) : null}
+
+ );
+};
diff --git a/packages/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/Operand/OperandEditor/OperandEditModal/StringTemplateEdit/VariableOperand.tsx b/packages/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/Operand/OperandEditor/OperandEditModal/StringTemplateEdit/VariableOperand.tsx
new file mode 100644
index 000000000..ee05f2499
--- /dev/null
+++ b/packages/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/Operand/OperandEditor/OperandEditModal/StringTemplateEdit/VariableOperand.tsx
@@ -0,0 +1,54 @@
+import { type AstNode } from '@app-builder/models';
+import {
+ useGetAstNodeOption,
+ useOperandOptions,
+} from '@app-builder/services/editor/options';
+import {
+ type AstNodeErrors,
+ type ValidationStatus,
+} from '@app-builder/services/validation/ast-node-validation';
+import { useMemo } from 'react';
+
+import { Operand } from '../../../Operand';
+
+export type VariableOperandProps = {
+ astNode: AstNode;
+ astNodeErrors: AstNodeErrors | undefined;
+ validationStatus: ValidationStatus;
+ onChange: (node: AstNode) => void;
+};
+
+export const VariableOperand = ({
+ astNode,
+ astNodeErrors,
+ validationStatus,
+ onChange,
+}: VariableOperandProps) => {
+ const options = useOperandOptions([]);
+ const leftOptions = useMemo(
+ () =>
+ options.filter(
+ (option) =>
+ option.dataType === 'String' ||
+ option.dataType === 'Int' ||
+ option.dataType === 'Float',
+ ),
+ [options],
+ );
+
+ const getAstNodeOption = useGetAstNodeOption();
+ const operandProps = useMemo(
+ () => getAstNodeOption(astNode),
+ [astNode, getAstNodeOption],
+ );
+
+ return (
+