[Item] Metadata with Bulleted Color Annotations

[green-queen]

Description

This note template is a minor modification of tblopo's Colored Annotations by Type template to make the annotations sorted by color appear as a bulleted list, with the comments as sub-bullets under a corresponding annotation.

Screenshots

Test on Zotero version

7.0.30

Test on Better Notes version

2.5.13

Template Type

Item

Edit 12/27/25

Front matter updated so template import functions.

Template Share Code

# This template is specifically for importing/sharing, using better 
# notes 'import from clipboard': copy the content and
# goto Zotero menu bar, click Tools->New Template from Clipboard.  
# Do not copy-paste this to better notes template editor directly.
name: "[item]Annotations_Comments_as_List"
zoteroVersion: "7.0.30"
pluginVersion: "2.5.13"
content: |-
 <h1><font size="5">${topItem.getField('title')}</font></h1><strong>Authors: </strong>${topItem.getCreators().map((v)=>v.firstName+" "+v.lastName).join("; ")}<br/><strong>Date: </strong>${topItem.getField('date')}
  
  ${{
    	sharedObj.colors = {
    		"#ffd400": { name: "Section 1", annotations: [] },  // Yellow
    		"#ff6666": { name: "Section 2", annotations: [] }, // Red
    		"#5fb236": { name: "Section 3", annotations: [] }, // Green
    		"#2ea8e5": { name: "Section 4", annotations: [] }, // Blue
    		"#a28ae5": { name: "Section 5", annotations: [] }, // Purple
    		"#f19837": { name: "Section 6", annotations: [] }, // Orange
    		"#aaaaaa": { name: "Section 7", annotations: [] }, // Grey
    		"#e56eee": { name: "Section 8", annotations: [] } // Magenta
    	};
    	return "";
    }}$
  
    ${{
      	async function getAnnotation(item) {
    		try {
    			if (!item || !item.isAnnotation()) {
    				return null;
    			}
    			let json = await Zotero.Annotations.toJSON(item);
    			json.id = item.key;
    			delete json.key;
    			for (let key in json) {
    				json[key] = json[key] || "";
    			}
    			json.tags = json.tags || [];
    			
    			if (json.type === "image" && json.image) {
    				json.renderedImage = `<div style="margin: 10px 0;"><img src="${json.image}" alt="Annotation Image" style="max-width: 100%; height: auto; border: 1px solid #ccc;"></div>`;
    			}
    			
    			return json;
    		} catch (e) {
    			Zotero.logError(e);
    			return null;
    		}
    	}
    
      	async function getAnnotationsByColor(_attachment, color) {
        	const annots = _attachment.getAnnotations().filter((a) => a.annotationColor === color);
        	if (annots.length === 0) return [];
    
        	const jsonAnnots = await Promise.all(annots.map(a => getAnnotation(a)));
        	return jsonAnnots.filter(Boolean);
      	}
    
      	const attachments = Zotero.Items.get(topItem.getAttachments())
        .filter(i => i.isPDFAttachment() || i.isSnapshotAttachment() || i.isEPUBAttachment());
    
    	sharedObj.colors = sharedObj.colors || {};
    	for (const c of Object.keys(sharedObj.colors)) {
    		sharedObj.colors[c].annotations = sharedObj.colors[c].annotations || [];
    	}
    
    	for (const color of Object.keys(sharedObj.colors)) {
    		for (const att of attachments) {
    			const annots = await getAnnotationsByColor(att, color);
    			sharedObj.colors[color].annotations.push(...annots);
    		}
    	}
    
      return "";
    }}$
  
    ${{
    	const rawDate = targetNoteItem.getField("dateAdded");
    	let formattedDate = "";
    	if (rawDate) {
    		const d = new Date(rawDate + (rawDate.includes('Z') ? '' : 'Z'));
    		const pad = (n) => (n < 10 ? "0" + n : n);
    		formattedDate = `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
    	}
    
  let output = ""		
    	for (const color in sharedObj.colors) {
    		const colorData = sharedObj.colors[color];
    		if (colorData.annotations.length > 0) {
    			output += `<h2><span style="color:${color};"> ${colorData.name}</span></h2>`;
    			for (const annot of colorData.annotations) {
    				let content = "";
    				if (annot.type === "highlight") {
    					content = annot.text;
    				} else if (annot.type === "image") {
    					content = "Selected Area";
    				} else {
    					content = annot.text || "[No text]";
    				}
    				let page = annot.pageLabel;
    
    				output += `<ul style="margin-bottom: 0;"><span style="color:${color};">${content} (${topItem.getCreators().map((v)=>v.lastName)}, ${page})</span>`;
    				if (annot.type === "image" && annot.renderedImage) {
    					output += annot.renderedImage;
    				}
  				if (annot.comment) {
  					output += `<ul style="margin-top: 0;"> ${annot.comment} </ul>`
  				}
  				output += `</ul>`
    			}
    		}
    	}
    	return output;
    }}$

Anything else

No response

[macrospecter]

Oh WOW, this is amazing, @green-queen . This is exactly what I was looking for--such a time saver, because I often have to run through each section independently and input (and often correct) the bullets several times per day. Thanks a million!