{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "pdf-viewer-form-filling",
  "framework": "vue",
  "type": "registry:component",
  "component": "PdfViewer",
  "variant": "form-filling",
  "dependencies": [
    "@syncfusion/ej2-vue-pdfviewer"
  ],
  "description": "PDF viewer validates required form fields before allowing the document to be submitted.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/pdf-viewer-form-filling.md"
  },
  "files": [
    {
      "target": "src/components/pdf-viewer-form-filling/PdfViewer.vue",
      "content": "<template>\n    <div>\n        <div class=\"control-section\">\n            \n            <ejs-pdfviewer \n                id=\"pdfviewer\" \n                ref=\"pdfviewer\" \n                :documentPath=\"documentPath\" \n                :enableFormFieldsValidation=\"true\"\n                :showNotificationDialog=\"false\" \n                :validateFormFields=\"validateFormFields\"\n                :resourceUrl=\"resourceUrl\">\n            </ejs-pdfviewer>\n        </div>\n\n    </div>\n</template>\n<style scoped>\n#pdfviewer {\n    height: 640px;\n}\n\n</style>\n<script>\nimport { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer } from \"@syncfusion/ej2-vue-pdfviewer\";\n\nvar viewer;\nexport default {\n    components: {\n        'ejs-pdfviewer': PdfViewerComponent\n    },\n    data: function () {\n        return {\n            documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',\n            resourceUrl: 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib'\n        }\n    },\n    provide: {\n        PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]\n    },\n    methods: {\n        validateFormFields: function (args) {\n            var errorMessage = \"Required Field(s): \";\n            viewer = this.$refs.pdfviewer.ej2Instances;\n            var forms = viewer.formFieldCollections;\n            var flag = false;\n            var radioGroupName = \"\";\n            for (var i = 0; i < forms.length; i++) {\n                var text = \"\";\n                if (forms[i].isRequired == true) {\n                    if (forms[i].type.toString() == \"Checkbox\" && forms[i].isChecked == false) {\n                        text = forms[i].name;\n                    }\n                    else if (forms[i].type == \"RadioButton\" && flag == false) {\n                        radioGroupName = forms[i].name;\n                        if (forms[i].isSelected == true)\n                            flag = true;\n                    }\n                    else if (forms[i].type.toString() != \"Checkbox\" && forms[i].type != \"RadioButton\" && forms[i].value == \"\") {\n                        text = forms[i].name;\n                    }\n                    if (text != \"\") {\n                        if (errorMessage == \"Required Field(s): \") {\n                            errorMessage += text;\n                        }\n                        else {\n                            errorMessage += \", \" + text;\n                        }\n                    }\n                }\n            }\n            if (!flag && radioGroupName != \"\") {\n                if (errorMessage == \"Required Field(s): \")\n                    errorMessage += radioGroupName;\n                else\n                    errorMessage += \", \" + radioGroupName;\n            }\n            if (errorMessage != \"Required Field(s): \") {\n                viewer.showNotificationPopup(errorMessage);\n            }\n        },\n    }\n};\n</script>"
    },
    {
      "target": "src/components/pdf-viewer-form-filling/PdfViewerView.vue",
      "content": "<template>\n  <PDFViewer />\n</template>\n\n<script setup>\nimport PDFViewer from '../../components/PDFViewer.vue'\n</script>"
    }
  ]
}