Iterate over all form fields and widgets in the document

function updateWidgetBorder(formField, widget) {
  if (formField.value) {
    // Reset the widget border properties when form field has a value.
    return widget
        .set('borderColor', undefined)
        .set('borderWidth', undefined)
        .set('borderStyle', undefined) 
  } else {
    // Set solid border if the form field does not have a value.
    return widget
      .set('borderColor', PSPDFKit.Color.LIGHT_RED)
      .set('borderWidth', 1)
      .set('borderStyle', 'solid')
  }
}

async function refreshWidgets() {
  // Retrieve all form fields.
  const formFields = await instance.getFormFields()
  
  // Retrieve all widget annotations in the document.
  const widgetAnnotations = (await Promise.all(
    Array.from({ length: instance.totalPageCount }).map(async (_, pageIndex) =>
      (await instance.getAnnotations(pageIndex))
        .filter(it => it instanceof PSPDFKit.Annotations.WidgetAnnotation)
    )
  )).flatMap(pageAnnotations => pageAnnotations.toArray())
  
  // Iterate over all form fields and their widgets to update their appearance.
  const widgetsToUpdate = formFields.flatMap(formField => {
    // Find all widget annotations for a given form field.
    const widgets = widgetAnnotations.filter(annotation => formField.annotationIds.contains(annotation.id))
    
    // Update all widgets based on the form field value.
    return widgets.map(widget => updateWidgetBorder(formField, widget))
  })
  
  // Now perform the batch update with our updated widget annotations.
  return instance.update(widgetsToUpdate)
}