Add New properties in Textbox properties modal

[Khushbu Maurya]

Is there any way to add new properies in this modal?

[Chinnamunia Karthik Chinna Thambi]

Hi Khushbu,

Sorry, it's not possible to add new properties to the default form field properties dialog. Could you please provide more details about your requirements? We'll then assess whether it's feasible to accommodate your request or suggest an alternative approach if possible.

[Khushbu Maurya]

Hello  Chinnamunia Karthik

I am working on one requirement where I am reading all input from pdf file and create new form. 

So I want to add some properties like name, title, description of in input element.

Let me know if you have any other alternative for this

[Chinnamunia Karthik Chinna Thambi]

Hi Khushbu,

Thanks for the information. Unfortunately, we don't have support to add new items in the existing dialog. However, when you double-click the form fields in designer mode, the `formFieldDoubleClick` event is triggered. Within this event, you can prevent the default form field dialog from opening by using `args.cancel = true`, and then create your own custom dialog to achieve your requirement. We have provided the code snippet to cancel the form field dialog opening.

Code snippet:

 

<PdfViewerComponent

    ref={(scope) => {

    viewer = scope;

    }}

    id="container"

    documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"

    resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"

    style={{ height: '640px' }}

    documentLoad={documentLoad}

    formFieldDoubleClick={formFieldDoubleClick}

    >

    <Inject

    services={[

        Toolbar,

        Magnification,

        Navigation,

        LinkAnnotation,

        BookmarkView,

        ThumbnailView,

        Print,

        TextSelection,

        TextSearch,

        Annotation,

        FormFields,

        FormDesigner,

        PageOrganizer,

    ]}

    />

</PdfViewerComponent>

 

const formFieldDoubleClick = (args) => {

    args.cancel = true;

};

If you want to save the title and description to the form fields, we have introduced the `customData` property. By utilizing this property, you can save custom values. We have provided the code snippet and sample for this functionality.

Code snippet:

 

const updateCustomData = () => {

    var formFields = viewer.retrieveFormFields();

    for (var x = 0; x < formFields.length; x++) {

        var options = {

            customData: {

                title: 'FormField',

                description: 'FormField Description',

            },

        };

        viewer.formDesignerModule.updateFormField(formFields[x], options);

    }

};

Sample: https://stackblitz.com/edit/react-xvavod?file=index.js,index.html

Note: The `customData` feature was introduced in version 26.1.35. Kindly upgrade to that version to utilize this feature.