Predefined Variable Insertion in Forms

[linesh98]

is it able Provide the ability to insert predefined variables (e.g., MRN, Patient Name, Address, Age, Consultant, etc.) into forms?. These variables should automatically populate with corresponding values when the form is opened from a transaction screen, making the feature especially useful for certificates and patient-related forms.

In the form designer, the system should offer dropdown suggestions for predefined variables when the user types a special character (for example, #). Once a variable is selected, it should be inserted into the form and automatically replaced with the corresponding transaction data at runtime.

could you please help for this ?
below are our current code

`// src/pages/private/form-builder/Designer.tsx

import { useCallback, useEffect, useMemo } from "react";
import { FormBuilder, useFormBuilder, type BuilderView } from "@react-form-builder/designer";

import {
components as rsuiteComponents,
formEngineRsuiteCssLoader,
ltrCssLoader,
rtlCssLoader,
RsLocalizationWrapper,
rSuiteComponentsDescriptions,
} from "@react-form-builder/components-rsuite";
import { rSuiteTableComponentsDescriptions } from "@react-form-builder/components-rsuite-table";

import {
fastQrComponent,
fastQrComponentsDescriptions,
} from "@react-form-builder/components-fast-qr";
import {
googleMapComponent,
googleMapComponentsDescriptions,
} from "@react-form-builder/components-google-map";
import {
richTextComponent,
richTextEditorComponentsDescriptions,
} from "@react-form-builder/components-rich-text";
import {
signatureComponent,
signatureComponentsDescriptions,
} from "@react-form-builder/components-signature";

import { BiDi, BuilderView as CoreBuilderView } from "@react-form-builder/core";

import ButtonComponent from "../../../components/general/ButtonComponent";
import { voiceTextInput } from "./VoiceTextInputDef";
import { textEditor } from "./TextEditorDef";

/* -------------------------------------------------------------------------- /
/ Toggle Builder / Preview Mode Button /
/ -------------------------------------------------------------------------- */

const CustomToggleModeButton = () => {
const builder = useFormBuilder();
const label = builder.builderMode === "builder" ? "Preview Mode" : "Edit Mode";

const toggleMode = useCallback(() => {
const newMode = builder.builderMode === "builder" ? "viewer" : "builder";
builder.builderMode = newMode;

const leftPanel = document.querySelector(".FE_LeftPanel");
const rightPanel = document.querySelector(".FE_RightPanel");

if (leftPanel && rightPanel) {
  if (newMode === "viewer") {
    leftPanel.classList.add("hidden-panel");
    rightPanel.classList.add("hidden-panel");
  } else {
    leftPanel.classList.remove("hidden-panel");
    rightPanel.classList.remove("hidden-panel");
  }
}

}, [builder]);

return {label};
};

/* -------------------------------------------------------------------------- /
/ Builder Customizations /
/ -------------------------------------------------------------------------- */

const builderCustomizations = {
JsonViewButton: { hidden: true },
MainMenu_Button: { hidden: true },
ResolutionSelect: { hidden: true },
ToggleThemeButton: { hidden: true },
Actions_Tab: { hidden: true },
Actions_Tab_Content: { hidden: true },
LocalizationSelect: { hidden: true },
ToggleModeButton: { hidden: true },
Header_Toolbar: { hidden: true },
MainMenu_Dropdown: {
style: #menuitem-\\:r5\\:, #menuitem-\\:r6\\: { display: none; },
},
Header: {
customRenderer: () => (
<>
<style>
{.hidden-panel { display: none !important; }}
</style>
<div
style={{
display: "flex",
justifyContent: "flex-end",
padding: "0.5rem",
}}
>


</>
),
},
};

/* -------------------------------------------------------------------------- /
/ Props /
/ -------------------------------------------------------------------------- */

interface DesignerProps {
onRefReady: (ref: any) => void;
onDataChange: (data: any) => void;
}

/* -------------------------------------------------------------------------- /
/ Designer Component /
/ -------------------------------------------------------------------------- */

export const Designer = ({ onRefReady, onDataChange }: DesignerProps) => {
/* ------------------------ Register ALL components ------------------------ */

const allComponents = useMemo(
() => [
...rsuiteComponents,
fastQrComponent.build(),
googleMapComponent.build(),
signatureComponent.build(),
richTextComponent.build(),
voiceTextInput.build(),
textEditor.build(),
],
[],
);
useEffect(() => {
if (globalThis.crypto && typeof globalThis.crypto.subtle === "undefined") {
Object.defineProperty(globalThis.crypto, "subtle", {
value: {
verify: async () => true,
importKey: async () => ({}),
},
configurable: true,
});
}
}, []);

/* ------------------------- Create Builder View --------------------------- */

const view = useMemo(() => {
return (
new CoreBuilderView(allComponents)
.withViewerWrapper(RsLocalizationWrapper)
.withCssLoader(BiDi.LTR, ltrCssLoader)
.withCssLoader(BiDi.RTL, rtlCssLoader)
.withCssLoader("common", formEngineRsuiteCssLoader)

    // Register library descriptions (LEFT PANEL)
    .withComponentLibraryDescription(fastQrComponentsDescriptions)
    .withComponentLibraryDescription(googleMapComponentsDescriptions)
    .withComponentLibraryDescription(richTextEditorComponentsDescriptions)
    .withComponentLibraryDescription(signatureComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteTableComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteComponentsDescriptions)
);

}, [allComponents]);

const licenseKey = import.meta.env.VITE_LICENSE_KEY;

return (
<FormBuilder
licenseKey={licenseKey}
view={view}
customization={builderCustomizations}
builderRef={(ref) => ref && onRefReady(ref)}
onFormDataChange={({ data }) => onDataChange(data)}
/>
);
};

`

[ashalugin]

Hi @linesh98,

You can set initial data for the form using the initialData property (https://formengine.io/documentation/api-reference/@react-form-builder/core/interfaces/FormViewerProps/#initialdata). See also https://formengine.io/documentation/form-data#setting-the-form-data.

In the form designer, the system should offer dropdown suggestions for predefined variables when the user types a special character (for example, #). Once a variable is selected, it should be inserted into the form and automatically replaced with the corresponding transaction data at runtime.

If I understand you correctly, you want to substitute different form data in the designer during form design? One option is to create your own dropdown (or another component that is convenient for you) where the user can select the necessary data. When the data is selected, the value in the initialData property will change.

If I have misunderstood you, please explain your task in more detail.