Export and import of DatePickerWidgetAnnotation

slavko.jovanovic · June 17, 2022, 10:11pm

Which product are you using?

PDF.js Express
PDF.js Express Version

Detailed description of issue
I’m create a annotation with:
annotField = new instance.Annotations.DatePickerWidgetAnnotation
This field works fine and shows the date selection.

I then store the annotation/field into my database via:

  var xfdf = await annotManager.exportAnnotations({
    annotList: annots,
    widgets: true,
    links: true,
    fields: true,
  });

This is the xfdf file:

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
	<pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4">
		<ffield type="Tx" name="2b555f1a-6cd1-d501-c1e0-89a4aef99acf" flags="Required">
			<font name="Helvetica"/>
		</ffield>
		<widget field="2b555f1a-6cd1-d501-c1e0-89a4aef99acf" modified-date="D:20220617114011-07'00'" page="1">
			<rect x1="29.453" x2="154.252" y1="734.093" y2="759.053"/>
			<border width="0" style="null">
				<color a="0"/>
			</border>
			<trn-custom-data bytes="{&quot;teams&quot;:&quot;[{\&quot;id\&quot;:7}]&quot;,&quot;text&quot;:&quot;Todays Date&quot;,&quot;sort_index&quot;:&quot;1&quot;,&quot;required&quot;:&quot;true&quot;,&quot;defaultchecked&quot;:&quot;false&quot;,&quot;defaulttoday&quot;:&quot;true&quot;,&quot;groupname&quot;:&quot;&quot;,&quot;options&quot;:&quot;[]&quot;,&quot;type&quot;:&quot;Date&quot;}"/>
		</widget>
	</pdf-info>
	<fields>
		<field name="2b555f1a-6cd1-d501-c1e0-89a4aef99acf">
			<value/>
		</field>
	</fields>
	<annots>
		<freetext page="0" rect="29.453,734.093,154.252,759.053" color="#E6FAFF" flags="print" name="2b555f1a-6cd1-d501-c1e0-89a4aef99acf" title="Brooklyn Collins" subject="FreeText" date="D:20220617092925-07'00'" creationdate="D:20220617092912-07'00'" TextColor="#000000" FontSize="7.487942122186496">
			<trn-custom-data bytes="{&quot;type&quot;:&quot;Date&quot;,&quot;trn-wrapped-text-lines&quot;:&quot;[\&quot;Date \&quot;]&quot;,&quot;teams&quot;:&quot;[{\&quot;id\&quot;:7}]&quot;,&quot;required&quot;:&quot;true&quot;,&quot;text&quot;:&quot;Todays Date&quot;,&quot;groupname&quot;:&quot;&quot;,&quot;multiline&quot;:&quot;false&quot;,&quot;defaultchecked&quot;:&quot;false&quot;,&quot;defaulttoday&quot;:&quot;true&quot;,&quot;options&quot;:&quot;[]&quot;}"/>
			<contents>Date</contents>
			<contents-richtext>
				<body>
					<p>
						<span style="color:#000000">Date</span>
						<span/>
					</p>
				</body>
			</contents-richtext>
			<defaultappearance>0 0.8 1 rg /Helvetica 7.487942122186496 Tf</defaultappearance>
			<defaultstyle>font: Helvetica 7.487942122186496pt; text-align: center; text-vertical-align: top; color: #000000</defaultstyle>
		</freetext>
	</annots>
</xfdf>

I then import the xfdf with :

          annotManager.importAnnotations(dbAnnot.annotation);
          var annotations = annotManager.getAnnotationsList();
          annotations.forEach((annotation) => {
            if (annotation.Subject === "Widget" && annotation.getCustomData("type") !== "") {
              var field = fieldManager.getField(annotation.fieldName);
              if (annotation.getCustomData("type") === "Date") {
                var widget = field.widgets[0];
                widget.getDatePicker().show(); // open date picker widget
                annotation.refreshDatePicker();
              }

My code fails with:
widget.getDatePicker is not a function

The imported field does not know it’s a DatePickerWidgetAnnotation.
How do I import or set this field so that its a DatePickerWidgetAnnotation widget?

Expected behavior
{Provide a screenshot or description of the expected behaviour}
I expected after import that the field would be a DatePickerWidgetAnnotation and allow me to select a date with a pulldown.

Does your issue happen with every document, or just one?
All Documents

Link to document
Any PDF

Code snippet
See above

Thank-you in advance for your help!

system · June 17, 2022, 10:11pm

Hello, I’m Ron, an automated tech support bot

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:

APIs:

Forums:

tgordon · June 20, 2022, 6:35pm

Hello slavko.jovanocvic,
Instead of checking the type of annotation like this:

I would suggest doing

annotation instanceof Annotations.DatePickerWidget

As custom data can cause unexpected behaviour between viewers. You also have to pass in the field associated with the annotation, and the options when creating a date picker widget: PDFJS Express WebViewer Class: DatePickerWidgetAnnotation

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

slavko.jovanovic · June 20, 2022, 7:53pm

Tyler,

Thank-you for your response. The issue that I’m facing is after retrieving (from the DB) the annotation with importAnnotations(annots), the widget field returned by the import is not an instanceof of a DatePickerWidget… How would I get this field to be instanceof DatePickerWidget? There is noting in the xfdf that would signify that it’s an DatePickerWidget, I believe this is why the import does not create it as such.

tgordon · June 21, 2022, 10:56pm

Hello slavko.jovanovic,

Looking at the XFDF, it seems the annotation with the “Date” contents is a FreeText, which shouldnt be the case it should be of type widget with an associated field.

How are you creating these DatePickerWidgetAnnotations?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

slavko.jovanovic · June 22, 2022, 7:34pm

The FreeText annot that you see in the XFDF is from the process used to create the Date field. I’m dropping FreeText annot on the PDF and then converting them to specific Widgets, this is what is creating the ffield, widget and fields xml int eh XFDF.

I’m create the datefield with the following.:

else if (annot.getCustomData("type") === "Date") {
          //flags.set(instance.Annotations.WidgetFlags.EDIT, false);
          const font = new instance.Annotations.Font({ name: "Helvetica" });
          field = new instance.Annotations.Forms.Field(annot.Id, {
            type: "Tx",
            //value: annot.getCustomData("defaultchecked"),
            //value: true,
            flags,
            font,
          });
          annotField = new instance.Annotations.DatePickerWidgetAnnotation(field);
          instance.annotManager.addAnnotation(annotField);

The field works properly once created, but does not work once extracted and reloaded from the xfdf.

tgordon · July 8, 2022, 5:22pm

Hello slavko.jovanovic,

Can you provide the document with the broken field?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

slavko.jovanovic · July 19, 2022, 12:15am

No I cannot, since the document does not initially have the date field. I create the date field with the API code (the field works fine). When I export it and reimport it, it does not come back as a date field. It comes back as regular text field.

tgordon · July 25, 2022, 9:10pm

Hello slavko.jovanovic,

After doing some investigation I was unable to reproduce this, here are the steps I did:

Open a blank PDF file in the latest version of PDFJS Express
Create a date widget using the tool under ‘Forms’
Exported all the annotations on the file using await annotManager.exportAnnotations({ widgets: true, links: true, fields: true, });
Inserted this code into my environment:

  instance.Core.documentViewer.addEventListener('documentLoaded', async () =>{
    const xfdf = `<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><freetext page="0" rect="204.040,606.140,456.570,692" flags="print" name="094ef77a-9234-7b9d-aed7-d80e2ea0f33f" title="Guest" subject="FreeText" date="D:20220725140728-07'00'" width="0" creationdate="D:20220725140727-07'00'" TextColor="#E44234" FontSize="12"><trn-custom-data bytes="{&quot;pdftron_freetext_date&quot;:&quot;YYYY-MM-DD&quot;,&quot;trn-wrapped-text-lines&quot;:&quot;[\\&quot;2022-07-25 \\&quot;]&quot;}"/><contents>2022-07-25</contents><contents-richtext><body><p><span>2022-07-25</span></p></body></contents-richtext><defaultappearance>0 0 0 rg /Helvetica 12 Tf</defaultappearance><defaultstyle>font: Helvetica 12pt; text-align: left; text-vertical-align: top; color: #E44234</defaultstyle></freetext></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>`
    await instance.Core.annotationManager.importAnnotations(xfdf)
  })

Reloaded the webpage to apply the changes
The date widget was imported correctly.

What version of PDFJS Express are you using?
Are you modifying the XFDF at all?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Topic		Replies	Views
Import Annotation not working Technical Support	2	419	March 30, 2022
Do you have any example from PDF to database Technical Support	4	774	August 19, 2020
DatePicker not rendering in PDF Bug Reports pdfjs-express	9	314	November 3, 2021
Clarification on Exporting and Importing Annotations in PDF.js Express Plus: API Usage and Limits Technical Support pdfjs-express	2	16	December 12, 2024
Is it possible to use exportAnnotations to export individual widgets and fields Technical Support	3	593	May 3, 2023

Export and import of DatePickerWidgetAnnotation

Related topics