Edit Tenant

Name

Also known as (comma separated)

Brief definition Isolated customer/application context.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "tenant", "type": "select", "label": "Active tenant", "default": "acme", "options": [ "acme", "globex", "initech" ] }, { "id": "accent", "type": "color", "label": "Tenant brand colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showScope", "type": "toggle", "label": "Show data scope", "default": true }, { "id": "appName", "type": "text", "label": "App shell name", "default": "Workspace" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"tnt tnt--{{tenant}}\">\n <div class=\"tnt__bar\" style=\"background:{{accent}};\">\n <span class=\"tnt__logo tnt__logo--acme\">Acme Co</span>\n <span class=\"tnt__logo tnt__logo--globex\">Globex</span>\n <span class=\"tnt__logo tnt__logo--initech\">Initech</span>\n <span class=\"tnt__app\">{{appName}}</span>\n </div>\n {{#if showScope}}\n <p class=\"tnt__scope tnt__scope--acme\">Scope: 1,204 records visible to Acme Co only</p>\n <p class=\"tnt__scope tnt__scope--globex\">Scope: 388 records visible to Globex only</p>\n <p class=\"tnt__scope tnt__scope--initech\">Scope: 92 records visible to Initech only</p>\n {{/if}}\n</div>\n<style>\n.tnt { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border-radius: 12px; width: 300px; box-sizing: border-box; overflow: hidden; border: 1.5px solid #24143018; }\n.tnt__bar { display: flex; align-items: center; padding: 12px 14px; }\n.tnt__logo { display: none; font-weight: 800; }\n.tnt__app { margin-left: auto; font-size: 11px; opacity: .8; }\n.tnt--acme .tnt__logo--acme, .tnt--globex .tnt__logo--globex, .tnt--initech .tnt__logo--initech { display: inline-block; }\n.tnt__scope { display: none; margin: 0; padding: 12px 14px; font-size: 11px; color: #24143099; }\n.tnt--acme .tnt__scope--acme, .tnt--globex .tnt__scope--globex, .tnt--initech .tnt__scope--initech { display: block; }\n</style>", "tailwind": "<div class=\"tnttw tnttw--{{tenant}} font-sans text-[#241430] bg-[#FAF7F2] rounded-xl w-[300px] box-border overflow-hidden border border-[#24143018]\">\n <div class=\"flex items-center py-3 px-3.5\" style=\"background:{{accent}};\">\n <span class=\"tnttw__logo tnttw__logo--acme hidden font-extrabold\">Acme Co</span>\n <span class=\"tnttw__logo tnttw__logo--globex hidden font-extrabold\">Globex</span>\n <span class=\"tnttw__logo tnttw__logo--initech hidden font-extrabold\">Initech</span>\n <span class=\"ml-auto text-[11px] opacity-80\">{{appName}}</span>\n </div>\n {{#if showScope}}\n <p class=\"tnttw__scope tnttw__scope--acme hidden m-0 py-3 px-3.5 text-[11px] text-[#24143099]\">Scope: 1,204 records visible to Acme Co only</p>\n <p class=\"tnttw__scope tnttw__scope--globex hidden m-0 py-3 px-3.5 text-[11px] text-[#24143099]\">Scope: 388 records visible to Globex only</p>\n <p class=\"tnttw__scope tnttw__scope--initech hidden m-0 py-3 px-3.5 text-[11px] text-[#24143099]\">Scope: 92 records visible to Initech only</p>\n {{/if}}\n</div>\n<style>\n.tnttw--acme .tnttw__logo--acme, .tnttw--globex .tnttw__logo--globex, .tnttw--initech .tnttw__logo--initech { display: inline-block; }\n.tnttw--acme .tnttw__scope--acme, .tnttw--globex .tnttw__scope--globex, .tnttw--initech .tnttw__scope--initech { display: block; }\n</style>", "react": "export function Tenant({\n tenant = \"{{tenant}}\",\n accent = \"{{accent}}\",\n showScope = {{showScope}},\n appName = \"{{appName}}\",\n}) {\n const names = { acme: \"Acme Co\", globex: \"Globex\", initech: \"Initech\" };\n const scopes = { acme: \"1,204 records visible to Acme Co only\", globex: \"388 records visible to Globex only\", initech: \"92 records visible to Initech only\" };\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", borderRadius: 12, width: 300, boxSizing: \"border-box\", overflow: \"hidden\", border: \"1.5px solid #24143018\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", padding: \"12px 14px\", background: accent }}>\n <span style={{ fontWeight: 800 }}>{names[tenant]}</span>\n <span style={{ marginLeft: \"auto\", fontSize: 11, opacity: .8 }}>{appName}</span>\n </div>\n {showScope && <p style={{ margin: 0, padding: \"12px 14px\", fontSize: 11, color: \"#24143099\" }}>Scope: {scopes[tenant]}</p>}\n </div>\n );\n}" }