Template Schema Query

Demonstrates fetching template field definitions with client.templates.schema().
Live Demo

Source Code

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TopBridge SDK — Template Schema Example</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; }
    h1 { color: #333; }
    .section { margin: 20px 0; padding: 16px; border: 1px solid #ddd; border-radius: 8px; }
    button { padding: 8px 16px; margin: 4px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
    button:hover { background: #f0f0f0; }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    #log { background: #1a1a1a; color: #0f0; padding: 16px; border-radius: 8px; font-family: monospace;
           font-size: 13px; max-height: 400px; overflow-y: auto; white-space: pre-wrap; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background: #f5f5f5; }
  </style>
</head>
<body>
  <h1>Template Schema Example</h1>
  <p>Demonstrates usage of <code>templates.list()</code> and <code>templates.schema()</code>.</p>

  <div class="section">
    <h2>1. Fetch Template List</h2>
    <button id="btn-list" onclick="listTemplates()">Fetch Templates</button>
    <div id="template-table"></div>
  </div>

  <div class="section">
    <h2>2. Query Template Field Definitions</h2>
    <select id="schema-select"><option value="">-- fetch templates first --</option></select>
    <button id="btn-schema" onclick="querySchema()" disabled>Query Schema</button>
    <div id="schema-table"></div>
  </div>

  <div class="section">
    <h2>Log</h2>
    <div id="log"></div>
  </div>

  <script type="module">
    const { TopBridgeClient } = await import('https://esm.sh/@appzgatenz/label-print-topbridge-js')

    const client = new TopBridgeClient({ debug: true })

    function log(msg) {
      const el = document.getElementById('log')
      const time = new Date().toLocaleTimeString()
      el.textContent += `[${time}] ${msg}\n`
      el.scrollTop = el.scrollHeight
    }

    window.listTemplates = async () => {
      const btn = document.getElementById('btn-list')
      btn.disabled = true
      btn.textContent = 'Fetching...'
      log('--- Fetching template list ---')

      try {
        const result = await client.templates.list()
        log(`✓ Fetched ${result.data.count} templates`)

        const table = document.getElementById('template-table')
        if (result.data.templates?.length) {
          let html = '<table><tr><th>ID</th><th>Code</th><th>Name</th><th>Status</th></tr>'
          for (const t of result.data.templates) {
            html += `<tr><td>${t.id}</td><td>${t.code || '-'}</td><td>${t.name}</td><td>${t.isEnabled ? '✓' : '✗'}</td></tr>`
          }
          html += '</table>'
          table.innerHTML = html

          const select = document.getElementById('schema-select')
          select.innerHTML = ''
          for (const t of result.data.templates) {
            const opt = document.createElement('option')
            opt.value = t.code || t.id
            opt.textContent = t.name
            select.appendChild(opt)
          }
          document.getElementById('btn-schema').disabled = false
        }
      } catch (err) {
        log(`✗ Failed: ${err.message}`)
      } finally {
        btn.disabled = false
        btn.textContent = 'Fetch Templates'
      }
    }

    window.querySchema = async () => {
      const template = document.getElementById('schema-select').value
      if (!template) return

      const btn = document.getElementById('btn-schema')
      btn.disabled = true
      btn.textContent = 'Querying...'
      log(`--- Querying template fields: ${template} ---`)

      try {
        const schema = await client.templates.schema(template)
        log(`✓ Template: ${schema.data.name} (${schema.data.code})`)
        log(`  Fields count: ${schema.data.fields?.length ?? 0}`)

        const table = document.getElementById('schema-table')
        if (schema.data.fields?.length) {
          let html = '<table><tr><th>Field Name</th><th>Type</th><th>Required</th><th>Default</th></tr>'
          for (const f of schema.data.fields) {
            html += `<tr><td>${f.name}</td><td>${f.type}</td><td>${f.required ? '✓' : '✗'}</td><td>${f.default ?? '-'}</td></tr>`
          }
          html += '</table>'
          table.innerHTML = html
        }
      } catch (err) {
        log(`✗ Failed: ${err.message}`)
      } finally {
        btn.disabled = false
        btn.textContent = 'Query Schema'
      }
    }

    // --- iframe height auto-resize ---
    function reportHeight() {
      const height = document.documentElement.scrollHeight
      window.parent.postMessage({ type: 'resize-iframe', height }, '*')
    }
    window.addEventListener('load', reportHeight)
    window.addEventListener('resize', reportHeight)
    const observer = new MutationObserver(reportHeight)
    observer.observe(document.body, { childList: true, subtree: true })
  </script>
</body>
</html>
Template Schema Query ​

Live Demo ​

Source Code ​

Template Schema Query

Live Demo

Source Code
