Get Underlying WebViewer Field object on ContextMenu Event

Technical Support WebViewer
, ,
1

WebViewer Version: v10.6

Do you have an issue with a specific file(s)? Particular XFDF fields (see below)
Can you reproduce using one of our samples or online demos? N/A
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? Yes/Fields

Please give a brief summary of your issue:
We have a feature we’re trying to build that allows users to right click on a field and then fill the field from a custom context menu we provide them. We are having trouble accessing the Field object from the contextMenu event.

Please describe your issue and provide steps to reproduce it:
Our code is a bit janky - very keen on feedback if there’s an easier way to achieve this. We can access the Field in most cases by:

  1. Get the parent div of the input element. Then get the id of that div.
  2. Use const field = fieldManager.getFieldByName(parentDivId)
  3. const.setValue(clickedValue)

However, this feels hacky and breaks when we have fields that are nested in a PDF document. An example of XFDF data where this doesn’t work is:

		<field name="Text1">
			<field name="0">
				<field name="0">
					<value>%^last_name^%</value>
				</field>
				<field name="2">
					<field name="0">
						<field name="0">
							<value>%^first_name^%</value>
						</field>
						<field name="1">
							<value>%^middle_name^%</value>
						</field>
						<field name="2">
							<value></value>
						</field>
					</field>
                                  </field>
                           </field>
              </field>

Unfortunately as this feature is designed to allow user uploaded PDF Forms we can’t always control the format of the incoming PDF Form so handling nested fields like this is a requirement of ours.

Is there an easier way to achieve what we’re trying to do? We have also tried using the annotationManager.getAnnotationByMouseEvent(event) function but found that this doesn’t get the Field - I believe because Field objects are different than Annotation objects.

2

Hi matt,
We will check the issue presented and will contact you once we have more information.

3

Hi matt,

You are right, Field annotations are widgets, thats why when targeted by mouseLeftDown event, will return null. We have submitted a feature request to our Product Team to check for viability and feasibility.

4

Hi @bjovanovic thank you for looking into that!

We actually found a workaround - but I’m curious to see if it would be recommended by your devs since it’s not using the standard API.

We found that if we programmatically manipulate the input field on the DOM and then programmatically trigger the ‘input’ event that the FieldManager will pick up on the change. We initially tried triggering the ‘change’ event which didn’t work but triggering ‘input’ does work.

I didn’t see that explicitly being suggested in the docs so I imagine it could break on future WebViewer updates - just curious if your dev team feels that’s a safe way to programmatically edit form fields and trigger the FieldManager to pick up the changes. It would actually be ideal for us as our devs could utilize that without having to refer to the actual API for simple things.

5

Hello Matt,

Ive talked with our devs, and they have expressed some concerns regarding the workaround you have suggested. It might set all the fields to isModified = true and clash with annotation command format. Also you might want to check if Digital Signatures are working correctly.

Could you please provide us with the code snippets you have used to achieve this functionality, or better yet, provide us with a minimal reproducible sample of your project, so we can do our internal testing?

*A minimal runnable reproducible sample refers to a simplified version of your project where unrelated/unnecessary code has been removed. The issue should still be reproducible in this simplified version.

This helps us isolate and understand the problem more efficiently. You can attach your project here or provide us with a download link or GitHub repo (NOTE: This is a public forum, so please don’t share any sensitive information or files here).