My PDF has fields and the tab order doesn't seem to be correct when loading it on WebViewer. Are there any ways I can improve this?

Technical Support WebViewer
, , ,
1

Some PDFs provide the “logical structure” of the PDF which defines things like the field tab order. You could use code like the following to set this on WebViewer 8.0 (The code snippet can be converted to work on other versions as well):

Webviewer({
  path: '/lib',
  fullAPI: true
}, document.getElementById('viewer')).then(async (instance) => {
  const filePath = 'my-form.pdf';
  const fields = [];
  const { PDFNet, Annotations } = instance.Core;
  const { loadDocument } = instance.UI;

  await PDFNet.initialize();

  const doc = await PDFNet.PDFDoc.createFromURL(filePath);

  doc.initSecurityHandler();

  const tree = await doc.getStructTree();

  const processStructElement = async (element) => {
    if (!(await element.isValid())) {
      return;
    }

    const num = await element.getNumKids();
    for (let i = 0; i < num; ++i) {
      if (await element.isContentItem(i)) {
        const cont = await element.getAsContentItem(i);
        if ((await cont.getType()) === PDFNet.ContentItem.Type.e_OBJR){
          const refObj = await cont.getRefObj();
          if (refObj) {
            const tVal = await refObj.findObj('T');
            if (tVal) {
              const field = await (PDFNet.Field.create(refObj));
              fields.push(await field.getName());
            }
          }
        }
      } else {
        await processStructElement(await element.getAsStructElem(i));
      }
    }
  };

  if (await tree.isValid()) {
      for (let i = 0, numKids = await tree.getNumKids(); i < numKids; ++i) {
        await processStructElement(await tree.getKid(i));
      }
    }

  loadDocument(filePath);

  const textWidgetRefresh = Annotations.TextWidgetAnnotation.prototype.refresh;

  Annotations.TextWidgetAnnotation.prototype.refresh = function (e) {
    textWidgetRefresh.apply(this, arguments);

    const inner = this['innerElement'];
    if (inner) {
      inner.tabIndex = fields.indexOf(this.getField().name);

      const readOnly = !!this['fieldFlags'].get(Annotations.WidgetFlags['READ_ONLY']);
      if (readOnly) {
        inner.tabIndex = -1;
      }
    }
  };

  const textWidgetCreateInnerElement = Annotations.TextWidgetAnnotation.prototype.createInnerElement;

  Annotations.TextWidgetAnnotation.prototype.createInnerElement = function (e) {
    const innerElement = textWidgetCreateInnerElement.apply(this, arguments);

    innerElement.tabIndex = fields.indexOf(this.getField().name);

    const readOnly = !!this['fieldFlags'].get(Annotations.WidgetFlags['READ_ONLY']);
    if (readOnly) {
      innerElement.tabIndex = -1;
    }

    return innerElement;
  };

  const checkButtonWidgetCreateInnerElement = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;

  Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = function (e) {
    const innerElement = checkButtonWidgetCreateInnerElement.apply(this, arguments);

    innerElement.setAttribute('tabindex', fields.indexOf(this.getField().name));

    return innerElement;
  };
});