Guides

Annotation Properties

Use annotationsConfig.initAttribute to set default properties for each annotation type. These properties are automatically applied when creating new annotations.

Note Annotation

{
  "annotationsConfig": {
    "initAttribute": {
      "note": {
        "color": "#1460F3",
        "alpha": 255
      }
    }
  }
}

Field	Description
color	Icon color (hex)
alpha	Opacity (0-255)

Markup Annotations

Includes highlight, underline, squiggly, and strikeout, which share the same property structure:

{
  "annotationsConfig": {
    "initAttribute": {
      "highlight": {
        "color": "#1460F3",
        "alpha": 77
      },
      "underline": {
        "color": "#1460F3",
        "alpha": 77
      },
      "squiggly": {
        "color": "#1460F3",
        "alpha": 77
      },
      "strikeout": {
        "color": "#1460F3",
        "alpha": 77
      }
    }
  }
}

Field	Description
color	Markup color
alpha	Opacity (0-255)

Ink Annotation

{
  "annotationsConfig": {
    "initAttribute": {
      "ink": {
        "color": "#1460F3",
        "alpha": 100,
        "borderWidth": 10
      }
    }
  }
}

Field	Description
color	Pen color
alpha	Opacity (0-255)
borderWidth	Pen line width

Shape Annotations

Square and Circle

{
  "annotationsConfig": {
    "initAttribute": {
      "square": {
        "fillColor": "#1460F3",
        "borderColor": "#000000",
        "colorAlpha": 128,
        "borderWidth": 2,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        },
        "bordEffectType": "solid"
      },
      "circle": {
        "fillColor": "#1460F3",
        "borderColor": "#000000",
        "colorAlpha": 128,
        "borderWidth": 2,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        },
        "bordEffectType": "solid"
      }
    }
  }
}

Field	Description
fillColor	Fill color
borderColor	Border color
colorAlpha	Opacity (0-255)
borderWidth	Border width
borderStyle.style	Border style: "solid" or "dashed"
borderStyle.dashGap	Dash gap
bordEffectType	Border effect type: "solid" (normal) or "cloudy" (cloud)

Line

{
  "annotationsConfig": {
    "initAttribute": {
      "line": {
        "borderColor": "#1460F3",
        "borderAlpha": 100,
        "borderWidth": 5,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        }
      }
    }
  }
}

Arrow

{
  "annotationsConfig": {
    "initAttribute": {
      "arrow": {
        "borderColor": "#1460F3",
        "borderAlpha": 100,
        "borderWidth": 5,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        },
        "startLineType": "none",
        "tailLineType": "openArrow"
      }
    }
  }
}

Field	Description
startLineType	Start endpoint style
tailLineType	End endpoint style

Endpoint style values: none, openArrow, closedArrow, square, circle, diamond, butt, ropenArrow, rclosedArrow, slash.

FreeText Annotation

{
  "annotationsConfig": {
    "initAttribute": {
      "freeText": {
        "fontColor": "#000000",
        "fontColorAlpha": 255,
        "fontSize": 30,
        "alignment": "left",
        "familyName": "Helvetica",
        "styleName": "Regular"
      }
    }
  }
}

Field	Description
fontColor	Font color
fontColorAlpha	Font opacity (0-255)
fontSize	Font size
alignment	Alignment: "left", "center", "right"
familyName	Font family name (see Font Management)
styleName	Font style, e.g. "Regular", "Bold", "Italic"

Property Editor Fragments

Each annotation type has a corresponding property editor Fragment for editing annotation styles in the UI:

Annotation Type	Fragment Class
Markup	CMarkupStyleFragment
Note	CNoteStyleFragment
Ink	CInkStyleFragment
FreeText	CFreeTextStyleFragment
Shape	CShapeStyleFragment
Stamp	CStampStyleFragment
Signature	CSignatureStyleFragment
Image	CImageStyleFragment

When using source code integration, you can extend or modify these Fragments to customize the property panel UI.