Image markup field

Draw, annotate, and mark up on top of a static image, useful for inspections, sketches, incident reports.

The Image markup field lets users draw, highlight, and annotate on top of a static image. Common in inspection workflows ("circle the damaged area on this diagram"), sketches, and incident reports. The result is flattened to a PNG and uploaded like a regular Image field.

Common properties

Property	Description
`label` string	Visible label.
`description` string	Helper text.
`required` boolean default: `false`	Requires at least one stroke before save.
`readOnly` boolean default: `false`	Shows the saved markup without allowing edits.

Type-specific properties

Property	Description
`backgroundImageUrl` string	Static image the filler draws on top of, set at design time. Same-origin SharePoint URLs work directly; cross-origin URLs use the runtime blob-refetch fallback so `canvas.toBlob` is not tainted.
`canvasWidth` number default: `800`	Canvas pixel width.
`canvasHeight` number default: `600`	Canvas pixel height.
`defaultPenColor` string (CSS colour) default: `#ef4444`	Initial pen colour.
`defaultPenWidth` number default: `3`	Initial pen width in CSS pixels (1-20).
`storageMode` 'note' \| 'attachment' \| 'library' default: `attachment`	Where the composite PNG goes on submit. `note` writes a base64 data URL into a Note column (≤64 KB). `attachment` uploads to the per-item Attachments folder. `library` uploads to `libraryPath`. `attachment`/`library` also PATCH the bound SP Image column with the thumbnail pointer.
`libraryPath` string default: `/SiteAssets/Forms365/markups`	Doc-library folder used when `storageMode === 'library'`.
`strokeDataInternalName` string	Internal name of a Multi-line Text column. When set, strokes are saved as JSON into that column (alongside the flattened Image) so reopening Edit can replay and per-stroke erase. Without it the field is raster-only.
`modalBelowWidth` number	Viewport-width breakpoint (CSS px). At or below this width the runtime shows a "Tap to mark up" button that opens the canvas in a modal instead of inline. Unset = always inline.
`showToolbar` boolean default: `false`	When true the filler toolbar exposes the pen/eraser toggle, colour picker and width slider. When false the filler draws only with the author-configured pen. Undo and Clear are always available.
`canvasAlign` 'left' \| 'center' \| 'right' default: `left`	Horizontal alignment of the canvas within its cell. Pixel size is unchanged.

JavaScript recipes

Require a markup before save

f365.events.onBeforeSave(async () => {
  if (!f365.field('Diagram').value) {
    await f365.ui.showConfirm('Please mark up the diagram before submitting.');
    return false; // keeps the form open
  }
  return true;
});

Lock the markup once an inspection is approved

f365.events.onChange((e) => {
  if (e.fieldKey !== 'Status') return;
  f365.field('Diagram').readOnly = e.newValue === 'Approved';
});

Make the markup required only for incident reports

f365.events.onLoad(() => {
  const isIncident = f365.field('ReportType').value === 'Incident';
  f365.field('Diagram').required = isIncident;
});

Image field
Upload an image to a SharePoint Image column with preview, crop, and replace.
Signature field
Canvas-based signature capture, finger, stylus, or mouse. Saves as a PNG image to a SharePoint Image column or the item's Attachments.