Edit Bulk Operations

Name

Also known as (comma separated)

Brief definition Actions performed on many records.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "actionLabel", "type": "text", "label": "Bulk action", "default": "Archive" }, { "id": "selectedCount", "type": "select", "label": "Rows selected", "default": "2", "options": [ "0", "2", "4" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "showBar", "type": "toggle", "label": "Show action bar when any selected", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"bulk\" data-count=\"{{selectedCount}}\">\n <div class=\"bulk__row\"><span class=\"bulk__check\"></span>Invoice 001</div>\n <div class=\"bulk__row\"><span class=\"bulk__check\"></span>Invoice 002</div>\n <div class=\"bulk__row\"><span class=\"bulk__check\"></span>Invoice 003</div>\n <div class=\"bulk__row\"><span class=\"bulk__check\"></span>Invoice 004</div>\n {{#if showBar}}<div class=\"bulk__bar\" style=\"background:{{accent}};\" role=\"status\">{{selectedCount}} selected &mdash; <strong>{{actionLabel}}</strong></div>{{/if}}\n</div>\n<style>\n.bulk { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.bulk__row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid #24143014; }\n.bulk__check { width: 16px; height: 16px; border-radius: 4px; border: 2px solid #24143040; box-sizing: border-box; flex-shrink: 0; }\n.bulk__bar { display: none; margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12px; text-align: center; color: #241430; }\n.bulk[data-count=\"0\"] .bulk__bar { display: none; }\n.bulk[data-count=\"2\"] .bulk__row:nth-child(-n+2) .bulk__check, .bulk[data-count=\"4\"] .bulk__row .bulk__check { background: #241430; border-color: #241430; }\n.bulk[data-count=\"2\"] .bulk__bar, .bulk[data-count=\"4\"] .bulk__bar { display: block; }\n</style>", "tailwind": "<div class=\"bulktw bulktw--{{selectedCount}} font-sans text-[#241430] bg-[#FAF7F2] p-3.5 rounded-xl w-[280px] box-border\">\n <div class=\"bulktw__row flex items-center gap-2.5 py-2 px-1.5 border-b border-[#24143014]\"><span class=\"bulktw__check w-4 h-4 rounded border-2 border-[#24143040] box-border shrink-0 block\"></span>Invoice 001</div>\n <div class=\"bulktw__row flex items-center gap-2.5 py-2 px-1.5 border-b border-[#24143014]\"><span class=\"bulktw__check w-4 h-4 rounded border-2 border-[#24143040] box-border shrink-0 block\"></span>Invoice 002</div>\n <div class=\"bulktw__row flex items-center gap-2.5 py-2 px-1.5 border-b border-[#24143014]\"><span class=\"bulktw__check w-4 h-4 rounded border-2 border-[#24143040] box-border shrink-0 block\"></span>Invoice 003</div>\n <div class=\"bulktw__row flex items-center gap-2.5 py-2 px-1.5 border-b border-[#24143014]\"><span class=\"bulktw__check w-4 h-4 rounded border-2 border-[#24143040] box-border shrink-0 block\"></span>Invoice 004</div>\n {{#if showBar}}<div class=\"bulktw__bar hidden mt-2.5 py-2.5 px-3 rounded-lg text-xs text-center\" style=\"background:{{accent}};\" role=\"status\">{{selectedCount}} selected &mdash; <strong>{{actionLabel}}</strong></div>{{/if}}\n</div>\n<style>\n.bulktw--2 .bulktw__row:nth-child(-n+2) .bulktw__check, .bulktw--4 .bulktw__check { background: #241430; border-color: #241430; }\n.bulktw--2 .bulktw__bar, .bulktw--4 .bulktw__bar { display: block; }\n</style>", "react": "export function BulkOperations({\n actionLabel = \"{{actionLabel}}\",\n selectedCount = \"{{selectedCount}}\",\n accent = \"{{accent}}\",\n showBar = {{showBar}},\n}) {\n const n = Number(selectedCount);\n const rows = [\"Invoice 001\", \"Invoice 002\", \"Invoice 003\", \"Invoice 004\"];\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 14, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n {rows.map((label, i) => (\n <div key={label} style={{ display: \"flex\", alignItems: \"center\", gap: 10, padding: \"8px 6px\", borderBottom: \"1px solid #24143014\" }}>\n <span style={{ width: 16, height: 16, borderRadius: 4, boxSizing: \"border-box\", flexShrink: 0, border: i < n ? \"2px solid #241430\" : \"2px solid #24143040\", background: i < n ? \"#241430\" : \"transparent\" }} />\n {label}\n </div>\n ))}\n {showBar && n > 0 && (\n <div role=\"status\" style={{ marginTop: 10, padding: \"10px 12px\", borderRadius: 8, fontSize: 12, textAlign: \"center\", color: \"#241430\", background: accent }}>\n {selectedCount} selected &mdash; <strong>{actionLabel}</strong>\n </div>\n )}\n </div>\n );\n}" }