+
+ );
+ }
+
+ // Custom template for rendering each item in the dropdown list
+ const itemTemplate = (data: any) => {
+ return (
+
+
+
+ ![]({"../assets/User.png"})
+
+ );
+ }
+
+ // Custom template for displaying the selected value in the dropdown
+ const valueTemplate = (data: any) => {
+ return (
+
+
+ {data.Name}
+ {data.Mail}
+
+
+
);
+ };
+
+ // Renders the "Finish Signing" button
+ const buttonComponent = () => {
+ return (
+
+
+ {data.Name}
+ {data.Mail}
+
+ {userDetails.map((user, idx) => (
+
+ );
+ };
+
+ // Renders the dialog content with user selection and submit button
+ const getRecipientDialogContent = () => {
+ return (
+
+
+
+ ))}
+
+
+
+
+ {user['Name'] as string}
+
+
+ {user['Mail'] as string}
+
+
+
+ );
+ };
+
+ // Initializes event listener for closing the form designer and shows the user dropdown
+ const documentLoaded = () => {
+ document.getElementById("pdfViewer_formdesigner_closeContainer")?.addEventListener("click", async function () {
+ setShowDropdown(true);
+ if (pdfViewer.current)
+ pdfViewer.current.designerMode = false;
+ showOnlyCurrentUserFields();
+ })
+
+ }
+
+ // Displays only the form fields assigned to the current user and hides others
+ const showOnlyCurrentUserFields = () => {
+ const formFields = pdfViewer.current?.retrieveFormFields();
+ currentUser.current = userDetails[0].Mail;
+ if (!formFields || !currentUser.current) return;
+
+ formFields.forEach(field => {
+ const fieldEmail = (field.customData as { email?: string })?.email;
+ // Show fields of current user, hide others
+ pdfViewer.current?.formDesigner.updateFormField(field, {
+ visibility: fieldEmail === currentUser.current ? 'visible' : 'hidden'
+ } as any);
+ });
+ };
+
+ // Handles user selection change in the dropdown
+ const dropdownUserChange = (args: any) => {
+ const selectedMail = args.itemData.Mail;
+ const selectedIdx = userDetails.findIndex(u => u.Mail === selectedMail);
+
+ // Validate all previous users, on first invalid - show error, block switch
+ for (let i = 0; i < selectedIdx; i++) {
+ const prevUser = userDetails[i];
+ const prevUserFields = pdfViewer.current?.formFieldCollections?.filter(
+ (field: any) => (field.customData && field.customData.email === prevUser.Mail)
+ );
+ // If any previous user's fields are invalid, cancel the dropdown change and show
+ if (!validateFormFields(prevUserFields || [], prevUser.Name)) {
+ args.cancel = true;
+ // Optionally, show which user needs to finish:
+ pdfViewer.current?.showNotificationPopup(
+ `Please complete all required fields for user: ${prevUser.Name}`
+ );
+ return;
+ }
+ }
+
+ // Proceed to update field visibility and editability based on selected user
+ const fieldCollection = pdfViewer.current?.formFieldCollections;
+ if (fieldCollection) {
+ for (let i = 0; i < fieldCollection.length; i++) {
+ const customData = fieldCollection[i]?.customData as any;
+ if (!customData) continue;
+
+ const fieldUserIdx = userDetails.findIndex(u => u.Mail === customData.email);
+
+ // For the selected user: show fields as editable
+ if (fieldUserIdx === selectedIdx) {
+ pdfViewer.current?.formDesigner.updateFormField(fieldCollection[i], {
+ visibility: 'visible',
+ isReadOnly: false,
+ } as any);
+ }
+ // For users before the selected one: show fields as read-only
+ else if (fieldUserIdx < selectedIdx) {
+ pdfViewer.current?.formDesigner.updateFormField(fieldCollection[i], {
+ visibility: 'visible',
+ isReadOnly: true,
+ } as any);
+ }
+
+ // For users after the selected one: hide fields and make them read-only
+ else {
+ pdfViewer.current?.formDesigner.updateFormField(fieldCollection[i], {
+ visibility: 'hidden',
+ isReadOnly: true,
+ } as any);
+ }
+
+ }
+ }
+ };
+
+ // Validates previous users' fields before allowing dropdown selection change and updates field visibility accordingly.
+ function validateFormFields(fieldsToCheck: any[], userLabel?: string, showPopup = true): boolean {
+ let missingFields: string[] = [];
+ let radioGroups: Record+ Select the User: +
+
+ {userDetails.map((user, index) => (
+
+
+
+ ))}
+
+ Submit
+
+ Required fields: ${fieldsList}`; + pdfViewer.current?.showNotificationPopup(errorMessage); + } + return false; + } + return true; + } + + // Checks all required form fields on change and enables/disables the finish button based + const fieldChange = (args: any) => { + const forms = pdfViewer.current?.formFieldCollections || []; + const missingFields: Set
+ {/* Toolbar displaying user cards (e.g., name, email, image) */}
+
+ {/* Inject required PDF viewer services and features */}
+
+
+ {/* Dialog for selecting user type (Licensee or Licensor) */}
+
+ );
+}
+
+export default PdfViewer;
+
diff --git a/How to/Create Signable PDF Forms with Dynamic User/src/recipientSetup.tsx b/How to/Create Signable PDF Forms with Dynamic User/src/recipientSetup.tsx
new file mode 100644
index 0000000..52f925c
--- /dev/null
+++ b/How to/Create Signable PDF Forms with Dynamic User/src/recipientSetup.tsx
@@ -0,0 +1,179 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { FormValidator } from '@syncfusion/ej2-inputs';
+
+function RecipientSetup() {
+ const navigate = useNavigate();
+ // State to manage a list of recipients (e.g., for sharing or notifications)
+ const [recipients, setRecipients] = useState([{ userName: '', userEmail: '' }]);
+ // Ref to access the form DOM element for validation or reset
+ const formRef = useRef
+
+
+
+
+
+
+ {/* PDF Viewer with form designer and other tools enabled */}
+
+
+ {getRecipientDialogContent()}
+
+
+
+ {/* Container element used as the target for loading spinner and layout wrapper */}
+
+
+
+ );
+}
+export default RecipientSetup;
\ No newline at end of file
diff --git a/How to/Create Signable PDF Forms with Dynamic User/tsconfig.json b/How to/Create Signable PDF Forms with Dynamic User/tsconfig.json
new file mode 100644
index 0000000..a273b0c
--- /dev/null
+++ b/How to/Create Signable PDF Forms with Dynamic User/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": [
+ "src"
+ ]
+}
+ {/* Header section with title and add button */}
+
+
+
+
+ {/* Form for entering recipient details */}
+
+
+ Add recipients
+
+