Date is editable while viewing the document using datepickerAnnotation

Technical Support
1

Which product are you using?

PDF.js Express Version

Detailed description of issue
{I am trying to add a date field using date picker annotation and after field is added i am able to select the date from the datepicker popup and after saving the document but eventually i am viewing the same document at another place date is visible but it is editable and font size is also reduced which i had set earlier.
i have tried using readonly and locked property but nothing works for the same.}

Expected behaviour
{Date should not be editable and font size should be same while selecting the date

image

}

Does your issue happen with every document, or just one?
{Yes}

Link to document
{Provide a link to the document in question if possible}

Code snippet
{
let date;
const flags = new Annotations.WidgetFlags();
const font = new Annotations.Font();

font.size = 20;
field = new Annotations.Forms.Field(annot.type, {
type: ‘Tx’,
flags,
font,
});

            date = new Annotations.DatePickerWidgetAnnotation(field);
            date.TextColor = new Annotations.Color(0, 0, 1, 0.5);

            annotationManager.redrawAnnotation(date);

date.PageNumber = annot.page_number;
date.X = annot.x;
date.Y = annot.y;
date.Width = annot.width;
date.Height = annot.height;

annotationManager.addAnnotation(date);
fieldManager.addField(field);
annotsToDraw.push(date);
}

3

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

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:

4

Hello ds081999,

I was able to set the annotation to readonly by doing:

    dateAnnotation.fieldFlags.set('ReadOnly', true)

How are you setting the readonly flag?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

5

Hey tgordon,

I tried the same using fieldflags and also with locked property but it’ do not worked out infact, issue is that it creates a text field where the user view the pdf and also it decreases the font size to default.

6

Hello ds081999,

You will need to redraw the annotation if you are setting the flags after it is rendered, you can do that with annotationManager.redrawAnnotation(annotation)

Does this work for you?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

7

Hey tgordon,

Yeah! thanks that worked i have another issue regarding datepicker tootip i am setting tooltipName: ‘date’ inside the fields. It’s saying ‘undefined’ and also the font size issue in the viewer it automatically reset to default though i have set font size in the field itself. Please refer to the below screenshot.
image

8

Hello ds081999,

Glad to hear that works for you!

For the popup you can use the UI’s popup APIs: PDFJS Express WebViewer Interface: Popup, here is a guide on this: Popup API with JavaScript | PDF.js Express SDK

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

9

Also, the font size issue in the viewer it automatically reset to default though I have already set font size in the field itself by using font annotation.

10

Hello ds081999,

Can you provide screenshots and steps to reproduce? Thank you!

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

12

Hello ds081999,

What does it say the font size is after save?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

13

Hi tgordon,

After inspecting from elements, it is 12 which is default.
I guess it’s not getting saved after rendering.

14

Hello ds081999,

When you initialize the Font, you can pass in a font size like so:

    const font = new Annotations.Font({size: 20});

Does this work for you?
Also how are you saving the document?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

15

Hello tgordon,

Nope! this does not work.

I am saving it in the form of file ‘base64’ basically, but before doing that converting it into filedata and merging annotations using setXFDF() and setFile() and merge() then saving it in base64 form. Hope it helps.

Thanks

16

Hello ds081999,

To confirm, youre using the REST API to do set xfdf and merge xfdf?
Merge XFDF: Merging XFDF using the Express REST API | Documentation
Set XFDF: Set XFDF using the Express REST API | Documentation

If you could provide the code you’re using to merge and set XFDF that would help with reproducing the issue.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

18

Hello ds081999,

Thank you for providing the code, I wasnt able to reproduce the issue but can you try using the REST API through HTTP requests? The functionality should be similar, but it may be a bug with the Utility SDK.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here