Panel tab

The panel tab (panel.entry, named by panel.tab) is for the plugin’s own work: redeeming codes at the till, statistics, lists, approvals. Do not put a settings form here; the panel draws the Settings tab from the schema.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="viswoo-ui.css" />
  </head>
  <body>
    <section class="vz-card">
      <header class="vz-card-header"><h2 id="title"></h2></header>
      <div class="vz-stat"><span class="vz-stat-label" id="label"></span><span class="vz-stat-value" id="count">0</span></div>
    </section>
    <script src="viswoo-panel.js"></script>
    <script src="panel.js"></script>
  </body>
</html>

var panel = window.Viswoo.panel;
panel.context().then(function (context) {
  // code, version, language, theme, role, permissions, setupComplete, publicUrl
  if (!context.setupComplete) showSetupWarning();
  return panel.events.summary(30);
}).then(function (rows) {
  // [{ date, name, count }]
  panel.ui.resize(document.documentElement.scrollHeight + 8);
});

Context and theme

The bridge requests the context once when it loads and applies the panel theme to the page (html[data-theme]); when the theme changes a theme.changed event arrives and the kit repaints itself. You can listen too with panel.on('theme.changed', fn).

Roles

context.role: owner, admin, editor, viewer. Writing settings and data needs editor or above; a viewer gets auth.forbidden. Looking up and redeeming codes works for every role (the till).

Data

With the data permission you keep JSON documents for the plugin: collection and key [A-Za-z0-9_.-]{1,64}, documents up to 64 KB, at most 10,000 documents per customer. Collections starting with _ belong to the platform.

panel.data.put('notes', 'n1', { text: 'Till 2 is open' });
panel.data.list('notes').then(function (documents) { /* [{ key, data, updatedAt }] */ });

Height

The frame does not grow with its content; call ui.resize(px) when the height changes (480–4000 px).

States

Every section has loading, empty, error and no-permission states; error texts come from error.code (Error codes). See the Design standard.

Full bridge: Panel bridge.