Edit Permission

Name

Also known as (comma separated)

Brief definition Specific allowed action/access.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "permissionName", "type": "text", "label": "Permission", "default": "can_delete_records" }, { "id": "actionLabel", "type": "text", "label": "Guarded action", "default": "Delete record" }, { "id": "granted", "type": "toggle", "label": "Granted", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"perm\">\n <code class=\"perm__name\">{{permissionName}}: {{#if granted}}true{{/if}}{{#unless granted}}false{{/unless}}</code>\n <button type=\"button\" class=\"perm__btn\" style=\"background:{{accent}};\" {{#unless granted}}disabled{{/unless}}>{{actionLabel}}</button>\n {{#unless granted}}<p class=\"perm__note\">Blocked &mdash; this user lacks {{permissionName}}.</p>{{/unless}}\n</div>\n<style>\n.perm { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.perm__name { display: block; font: 11px ui-monospace, monospace; background: #24143012; padding: 8px 10px; border-radius: 6px; margin-bottom: 14px; }\n.perm__btn { border: none; padding: 10px 18px; border-radius: 8px; color: #FAF7F2; font: 600 13px system-ui, sans-serif; cursor: pointer; width: 100%; }\n.perm__btn:disabled { opacity: .35; cursor: not-allowed; }\n.perm__note { margin: 8px 0 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border\">\n <code class=\"block font-mono text-[11px] bg-[#24143012] py-2 px-2.5 rounded-md mb-3.5\">{{permissionName}}: {{#if granted}}true{{/if}}{{#unless granted}}false{{/unless}}</code>\n <button type=\"button\" class=\"border-none py-2.5 px-4.5 rounded-lg text-[#FAF7F2] font-semibold text-[13px] cursor-pointer w-full disabled:opacity-35 disabled:cursor-not-allowed\" style=\"background:{{accent}};\" {{#unless granted}}disabled{{/unless}}>{{actionLabel}}</button>\n {{#unless granted}}<p class=\"mt-2 text-[10px] text-[#24143099]\">Blocked &mdash; this user lacks {{permissionName}}.</p>{{/unless}}\n</div>", "react": "export function Permission({\n permissionName = \"{{permissionName}}\",\n actionLabel = \"{{actionLabel}}\",\n granted = {{granted}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n <code style={{ display: \"block\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, background: \"#24143012\", padding: \"8px 10px\", borderRadius: 6, marginBottom: 14 }}>{permissionName}: {String(granted)}</code>\n <button type=\"button\" disabled={!granted}\n style={{ border: \"none\", padding: \"10px 18px\", borderRadius: 8, color: \"#FAF7F2\", fontWeight: 600, fontSize: 13, cursor: granted ? \"pointer\" : \"not-allowed\", width: \"100%\", background: accent, opacity: granted ? 1 : .35 }}>{actionLabel}</button>\n {!granted && <p style={{ margin: \"8px 0 0\", fontSize: 10, color: \"#24143099\" }}>Blocked &mdash; this user lacks {permissionName}.</p>}\n </div>\n );\n}" }