1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Using PDF Form Designer without "Add & Edit" toolbar

Using PDF Form Designer without "Add & Edit" toolbar

Hello,

I've got a few questions about the PDF Form Designer in the PDF Viewer (ASP.NET CORE & JAVASCRIPT).

I'd like to externalize the "Add & Edit Form Fields" toolbar from the PDF VIEWER, I'm already able to drag'n'drop a new form field using a button on my web page using these javascript lines:

var pdfViewer = document.getElementById('container').ej2_instances[0];

pdfViewer.formDesignerModule.setFormFieldMode("Textbox");


But, I'm unable to edit the newly added fields from the UI without opening the "Add & Edit Form Fields" toolbar to change sizes and properties.

I would like to let the user edit the programmatically added fields from the UI without opening this toolbar.

How can I achieve this?

You'll find in the attachment a GIF showing a draft of what I tried to achieve.


My second question is about the form fields properties. By default, right-clicking a form field allow to edit his general and appearance properties.

I also need to externalize this properties editor from the PDF Viewer elsewhere in my page, can I re-use your properties panel or do I need to make it by myself, by updating the form field properties?

Regards,

Nicolas


Attachment: 20231003_10h23_32_bcf81727.zip

3 Replies 1 reply marked as answer
CK Chinnamunia Karthik Chinna Thambi Syncfusion Team October 9, 2023 01:23 PM UTC

Please find the details.


I would like to let the user edit the programmatically added fields from the UI without opening this toolbar.

How can I achieve this?

 

To edit the form fields without open the form designer toolbar, you can utilize the `designerMode` API. This API allows you to achieve this functionality, and we've included the corresponding code snippet below.

 

Code snippet:

 

 

    function enableEdit(args) {

        var viewer = document.getElementById('pdfviewer').ej2_instances[0];

        viewer.designerMode = true;

    }

 

    function disableEdit(args) {

        var viewer = document.getElementById('pdfviewer').ej2_instances[0];

        viewer.designerMode = false;

    }

 

I would like to let the user edit the programmatically added fields from the UI without opening this toolbar.

How can I achieve this?

 

To edit the form field programmatically, you can use the `updateFormField` method. This method enables you to programmatically change the form field properties . Below, you'll find the code snippet for implementing this.

Code snippet:
 

 

    function changeBorder(args) {

        var viewer = document.getElementById('pdfviewer').ej2_instances[0];

 

        viewer.formDesignerModule.updateFormField(viewer.formFieldCollections[0], { borderColor: 'red' });

    }
 

    function changeBackground(args) {

        var viewer = document.getElementById('pdfviewer').ej2_instances[0];

 

        viewer.formDesignerModule.updateFormField(viewer.formFieldCollections[0], { backgroundColor: 'blue' });

    }


We've also provided a sample and a video recording demonstrating this process. In the provided video, we have modified the form field properties at form field index 0.


Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/FormFieldEdit181953893.zip


Video:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/FormFieldVideo383797724.zip


Marked as answer
NG Nicolas Guerrault October 10, 2023 10:49 AM UTC

Hi, 

Thanks for your reply and sample, everything's working as I expected!

Have a nice day.

Nicolas


CK Chinnamunia Karthik Chinna Thambi Syncfusion Team October 11, 2023 09:14 AM UTC

We are glad to know that the reported query was resolved on your end. So, we are closing this ticket.


Loader.
Up arrow icon