Provide the full source code of Form Field Customization demo

Technical Support Apryse SDK
, , ,
1

Question 1:
I need to implement features similar to the Form Field Customization demo. Could you provide the full source code or a GitHub repository for this demo?

Question 2:
How can I remove the tooltip that appears when hovering over annotations in Forms mode?

image
image783×550 47.3 KB

Question 3:
How can I create a Radio Group Annotation? Currently, I can create a Radio Button using RadioButtonWidgetAnnotation. Here is my code:

const drawSingleSelect = (data) => {
    const { label, isRequired, width, height, pageNumber, x, y } = data;
    const { Annotations } = instance.Core;

    const widgetFlags = new Annotations.WidgetFlags();
    widgetFlags.set('Required', isRequired);
    widgetFlags.set(Annotations.WidgetFlags.RADIO, true);
    // Optional: Keep at least one state active
    widgetFlags.set(Annotations.WidgetFlags.NO_TOGGLE_TO_OFF, true);

    const annotFormField = new Annotations.Forms.Field(label, {
      type: SDK_FORM_FIELD_TYPES.RADIO,
      value: 'Off',
      flags: widgetFlags,
    });

    const widgetAnnot = new Annotations.RadioButtonWidgetAnnotation(annotFormField, {
      appearance: 'Off',
      appearances: {
        Off: {},
        First: {},
      },
    });

    widgetAnnot.PageNumber = pageNumber;
    widgetAnnot.X = x;
    widgetAnnot.Y = y;
    widgetAnnot.Width = width;
    widgetAnnot.Height = height;

    annotationManager.getFieldManager().addField(annotFormField);
    annotationManager.addAnnotation(widgetAnnot);
    annotationManager.drawAnnotationsFromList([widgetAnnot]);
};

I want to group multiple Radio Buttons created with the code above. Is there an API that can help me create a Radio Group?
image

1 Like
3

Hello dung.bui

Question 1: The full source code is included in the WebViewer download, in the samples folder

Question 2: Try this:

 instance.UI.addEventListener('tooltipOpened', function() {
   instance.UI.closeTooltip();
 });

Question 3: Depending on which behaviour youre looking for, see:

or for choice boxes, see: Create-fields | Apryse Documentation

Best regards,
Tyler

2 Likes
4

@tgordon Thank you for answering my questions.

I find the solution for question 2 by using

instance.UI.disableElements(['annotationContentOverlay'])

I am currently struggling to change the color of the resizable rectangle that wraps the annotation.
image
Question: Is there an API or method to change it?

Thanks!

1 Like
5

Hello dung.bui,

See our guide here for customizing the selection model: Custom-selection-model | Apryse Documentation

Best regards,
Tyler

2 Likes
6

Hi tgordon,

Thank you for your assistance. I successfully customized the selection (control) handlers.

For anyone who wants to draw 4 selection handlers instead of 8, you can use the following code:

const { Color, ControlHandle } = instance.Core.Annotations

// Customizing the selection points appearance
ControlHandle.outlineColor = new Color(11, 180, 186)
ControlHandle.color = new Color(255, 255, 255)
ControlHandle.handleWidth = 6
ControlHandle.handleHeight = 6
ControlHandle.selectionPointOutlineThickness = 6

const SELECTION_POINTS = 4
const MAX_SELECTION_POINTS = 8
let currentSelectionPointNumber = 0

ControlHandle.prototype.draw = function (ctx, annotation, selectionBox, zoom) {
  currentSelectionPointNumber++

  if (currentSelectionPointNumber === MAX_SELECTION_POINTS) {
    currentSelectionPointNumber = 0
    return
  }

  if (currentSelectionPointNumber > SELECTION_POINTS) {
    return
  }

  if (typeof zoom === 'undefined') {
    zoom = 1
  }

  ctx.strokeStyle = ControlHandle.outlineColor.toString()
  ctx.fillStyle = ControlHandle.color.toString()
  ctx.shadowColor = ControlHandle.shadowColor.toString()
  ctx.shadowBlur = ControlHandle.shadowBlur
  ctx.shadowOffsetY = ControlHandle.shadowOffsetY
  ctx.lineWidth = ControlHandle.selectionPointOutlineThickness / zoom

  const dim = this.getDimensions(annotation, selectionBox, zoom)
  const x = dim.x1
  const y = dim.y1
  const width = dim.getWidth()
  const height = dim.getHeight()

  ctx.beginPath()
  
  // Customizing the selection points shape
  const zoomRatio = zoom >= 1 ? 1 / zoom : 0.5 / zoom
  const adjustedWidth = ControlHandle.handleWidth * zoomRatio
  const adjustedHeight = ControlHandle.handleHeight * zoomRatio
  ctx.arc(
    x + width / 2,
    y + height / 2,
    Math.min(adjustedWidth, adjustedHeight) / 2,
    0,
    2 * Math.PI
  )

  ctx.stroke()
  ctx.fill()
}

Output:
a1

However, I have an issue when customizing the color of the annotation. Please help me resolve it.

Context: I changed the color of the TextWidgetAnnotation using this code:

const highlightFormFields = () => {
    const { annotationManager, Annotations } = instance.Core
    const customStyles = (widget) => {
      if (widget instanceof Annotations.TextWidgetAnnotation) {
        return {
          'background-color': COLORS.PRIMARY_BACKGROUND,
          'color': COLORS.BLACK,
        }
      }
    }
    Annotations.WidgetAnnotation.getCustomStyles = customStyles

    for (let i = 0; i < instance.Core.documentViewer().getPageCount(); i++) {
      annotationManager.drawAnnotations(i + 1)
    }
  }

Actual: After changing the color of the annotation, the selection handlers and selection outlines are beneath the annotation, making them partially visible.

q1
q1689×145 1.08 KB

I observed the same issue on your Customize Form Style Demo.
image
image160×112 2.92 KB

Expected Result: The selection handlers and outlines should be fully visible and appear above the annotation.
image

Is there any solution to fix this?

1 Like
7

Hello dung.bui,

Thank you for your response, I was able to reproduce this. It seems that it only occurs for the TextWidgetAnnotation. I will raise this as a bug report to our development team.

Best regards,
Tyler

2 Likes