Update custom renderers

Author: olimsaidov

.github/workflows/gh-pages.yaml

@@ -19,6 +19,11 @@ jobs:
         with:
           node-version: '18'
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: '9'
+
       - name: Create redirect page for fhirpath-editor
         run: |
           mkdir -p fhirpath-editor
@@ -80,6 +85,16 @@ jobs:
           </html>
           EOF
 
+      - name: Build Aidbox Forms renderers
+        run: |
+          pnpm install --frozen-lockfile --dir aidbox-forms/aidbox-forms-builder-custom-renderer/csiro-renderer
+          pnpm install --frozen-lockfile --dir aidbox-forms/aidbox-forms-builder-custom-renderer/smart-forms-renderer
+          pnpm --dir aidbox-forms/aidbox-forms-builder-custom-renderer/csiro-renderer build
+          pnpm --dir aidbox-forms/aidbox-forms-builder-custom-renderer/smart-forms-renderer build
+          mkdir -p examples/renderers/csiro examples/renderers/smart-forms
+          cp -R aidbox-forms/aidbox-forms-builder-custom-renderer/csiro-renderer/dist/* examples/renderers/csiro/
+          cp -R aidbox-forms/aidbox-forms-builder-custom-renderer/smart-forms-renderer/dist/* examples/renderers/smart-forms/
+
       - name: Publish
         uses: JamesIves/github-pages-deploy-action@v4
         with:

aidbox-forms/aidbox-forms-builder-custom-renderer/Caddyfile

@@ -10,14 +10,13 @@ This tutorial demonstrates how to connect a custom renderer to the Aidbox Forms
 
 The Aidbox Forms Builder allows you to use custom renderers to display questionnaires with your own UI components. This example shows how to:
 
-1. Wrap your renderer as a web component
-2. Host and configure it with Aidbox
-3. Use it in the Forms Builder preview
+1. Host a renderer page that speaks [SDC SMART Web Messaging](https://github.com/brianpos/sdc-smart-web-messaging)
+2. Register renderer URLs in Aidbox
+3. Use them in the Forms Builder preview
 
 ## Prerequisites
 
-- Docker and Docker Compose
-- Aidbox license (get one from [Aidbox Console](https://aidbox.io))
+- Running Aidbox
 
 ## Tutorial
 
@@ -30,145 +29,54 @@ cp .env.example .env
 # Add your AIDBOX_LICENSE to .env
 ```
 
-### Step 2: Build the Smartforms Component
+### Step 2: Pick a Renderer and Build It (Vite)
 
-This example includes a CSIRO Smartforms renderer wrapped as a web component. Build it first:
+This repo includes two renderer pages: `csiro-renderer` and `smart-forms-renderer`. Pick the renderer you want and build it.
 
 ```bash
-cd smartforms-component
-npm install
-npm run build
-cd ..
+cd csiro-renderer
+pnpm install
+pnpm build
 ```
 
-### Step 3: Wrap Your Renderer for Forms Builder Compatibility
-
-The Forms Builder expects a specific web component structure. Use the provided template `custom-renderer.template.js`:
-
-```javascript
-// simple-questionnaire-renderer.js
-if(!customElements.get("simple-questionnaire-renderer")) {
-
-class SimpleQuestionnaireRenderer extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this._questionnaire = null;
-    this._questionnaireResponse = null;
-    this._onQuestionnaireResponseChange = null;
-  }
-
-  static get observedAttributes() {
-    return ['questionnaire', 'questionnaire-response'];
-  }
-
-  // Handle attribute updates from Forms Builder
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (!this.shadowRoot || oldValue === newValue) return;
-
-    try {
-      const parsed = newValue ? JSON.parse(newValue) : null;
-      if (name === 'questionnaire') this._questionnaire = parsed;
-      if (name === 'questionnaire-response') this._questionnaireResponse = parsed;
-      this.render();
-    } catch (e) {
-      console.error(`Invalid JSON for ${name}:`, e);
-    }
-  }
-
-  // Property accessors
-  get questionnaire() { return this._questionnaire; }
-  set questionnaire(value) { this._questionnaire = value; this.render(); }
-
-  get questionnaireResponse() { return this._questionnaireResponse; }
-  set questionnaireResponse(value) { this._questionnaireResponse = value; this.render(); }
-
-  set onQuestionnaireResponseChange(callback) {
-    this._onQuestionnaireResponseChange = callback;
-  }
-
-  render() {
-    if (!this.shadowRoot) return;
-    // Implement your questionnaire rendering here
-  }
-}
-
-customElements.define('simple-questionnaire-renderer', SimpleQuestionnaireRenderer);
-}
-```
+If you want the other renderer later, repeat the same steps in `smart-forms-renderer`.
+
+### Step 3: Use Renderer Pages (SDC SWM)
 
-The only required attribute is `questionnaire`. 
-Support `questionnaire-response` to receive populated QuestionnaireResponse.
-Support `onQuestionnaireResponseChange` if you want to send QuestionnaireResponse back to the builder. 
+The Forms Builder loads a renderer by URL. The renderer page must implement [SDC SMART Web Messaging](https://github.com/brianpos/sdc-smart-web-messaging) and respond to `postMessage` requests from the host.
 
-This tutorial includes `simple-questionnaire-renderer.js`, a reference implementation that renders FHIR Questionnaires using native HTML inputs.
+Each renderer page in this repo is a Vite app (`index.html` + `src/index.js`) that builds to a static `dist/` folder, mounts the SmartForms renderer, and bridges messages to the host.
 
 ### Step 4: Host Your Renderer
 
-The web component must be accessible via URL. This tutorial uses Caddy to serve the renderer files:
-
-```dockerfile
-# Dockerfile
-FROM caddy:alpine
-COPY Caddyfile /etc/caddy/Caddyfile
-WORKDIR /srv
-COPY ./smartforms-component/dist/aidbox-forms-renderer-csiro-webcomponent.js /srv/
-COPY ./simple-questionnaire-renderer.js /srv/
-EXPOSE 80
-CMD ["caddy", "run", "--config", "/etc/caddy/Caddyfile"]
-```
+The renderer page must be accessible via URL. You can use either:
 
-### Step 5: Configure Aidbox
-
-To register custom renderers with Aidbox Forms, update the `SDCConfig` resource.
-
-Each renderer in the `custom-renderers` array requires:
-- **`name`** - The HTML tag name of your web component (e.g., `simple-questionnaire-renderer`)
-- **`source`** - URL where the renderer JavaScript file is hosted
-- **`title`** - Display name shown in the Forms Builder renderer dropdown
-
-Create an initialization bundle (`init-bundle.json`) to configure the custom renderers:
-
-```json
-{
-  "resourceType" : "Bundle",
-  "type" : "transaction",
-  "entry" : [ {
-    "resource" : {
-      "resourceType" : "SDCConfig",
-      "name": "custom-renderers-config",
-      "default": true,
-      "id" : "custom-renderer-config",
-      "builder": {
-        "custom-renderers": [
-          {
-            "name" : "aidbox-form-csiro-renderer",
-            "source" : "http://localhost:8081/aidbox-forms-renderer-csiro-webcomponent.js",
-            "title" : "CSIRO"
-          },
-          {
-            "name" : "simple-questionnaire-renderer",
-            "source" : "http://localhost:8081/simple-questionnaire-renderer.js",
-            "title" : "Simple Questionnaire Renderer"
-          }
-        ]
-      }
-    },
-    "request" : {
-      "method" : "PUT",
-      "url" : "SDCConfig/custom-renderer-config"
-    }
-  }]
-}
+1) Vite dev server (local testing):
+
+```bash
+cd csiro-renderer
+pnpm dev
 ```
 
-### Step 6: Start Services
+If you chose `smart-forms-renderer`, run the same command from that folder instead.
+
+2) Built files hosted anywhere (for preview):
 
 ```bash
-docker-compose up -d --pull always --build
+pnpm build
 ```
 
-### Step 7: Use in Forms Builder
+Then host the resulting `dist/` folder with any static hosting.
+
+### Step 5: Add the Renderer in Forms Builder
+
+Open Forms Builder and use the renderer switcher (eye icon near the theme selector).
+
+1) Click **Add custom renderer**  
+2) Enter a name and the renderer URL (for example `http://localhost:5173`)  
+3) Save
+
+### Step 6: Use in Forms Builder
 
 1. **Access Forms Builder:** Go to http://localhost:8080 and navigate to Forms Builder
 2. **Create/Edit Questionnaire:** Use the visual editor to build your form
@@ -177,31 +85,28 @@ docker-compose up -d --pull always --build
 
 **Service URLs:**
 - Aidbox: http://localhost:8080
-- Custom renderer demo: http://localhost:8081
+- Renderer dev server: http://localhost:5173 (default Vite port)
 
 ## Troubleshooting
 
 ### Common Issues
 
 1. **Renderer not appearing in Forms Builder:**
-   - Check SDCConfig is properly loaded
-   - Verify renderer URL is accessible
+   - Verify the renderer URL is reachable
    - Check browser console for loading errors
 
 2. **Response not updating:**
-   - Ensure `onQuestionnaireResponseChange` callback is called
-   - Check QuestionnaireResponse structure matches FHIR spec
-   - Verify event listeners are attached to form inputs
+   - Check browser console for postMessage errors
+   - Confirm renderer page receives `sdc.displayQuestionnaire`
+   - Verify the renderer sends `sdc.ui.changedQuestionnaireResponse`
 
 3. **CORS issues:**
    - Ensure renderer URL is accessible from Forms Builder domain
    - Check network tab for failed requests
 
 ### Debug Steps
 
-1. Check Aidbox logs: `docker-compose logs aidbox`
-2. Verify SDCConfig: `GET http://localhost:8080/SDCConfig/custom-renderer-config`
-3. Test renderer directly: http://localhost:8081/simple-questionnaire-renderer.js
+1. Test renderer directly: http://localhost:5173
 4. Check browser console in Forms Builder for errors
 
-This example provides a complete foundation for integrating custom renderers that work seamlessly with the Aidbox Forms Builder.
+This example provides a complete foundation for integrating custom renderers that work seamlessly with the Aidbox Forms Builder.

aidbox-forms/aidbox-forms-builder-custom-renderer/Dockerfile

@@ -0,0 +1,27 @@
+---
+features: [Custom renderer, Forms builder, Questionnaire, CSIRO, SMART Web Messaging]
+languages: [TypeScript]
+---
+# csiro-renderer
+
+This package builds a static renderer page (`index.html` + `src/index.js`) that mounts the CSIRO SmartForms renderer and speaks [SDC SMART Web Messaging](https://github.com/brianpos/sdc-smart-web-messaging).
+
+Renderer source: https://github.com/aehrc/smart-forms
+
+To install dependencies:
+
+```bash
+pnpm install
+```
+
+To run a dev server:
+
+```bash
+pnpm dev
+```
+
+To build static assets:
+
+```bash
+pnpm build
+```

aidbox-forms/aidbox-forms-builder-custom-renderer/README.md

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CSIRO Renderer (SDC SWM)</title>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      width: 100%;
+      font-family: system-ui, -apple-system, sans-serif;
+      background: #f8fafc;
+    }
+
+    #status {
+      position: fixed;
+      top: 12px;
+      left: 12px;
+      right: 12px;
+      padding: 10px 12px;
+      background: #0f172a;
+      color: #e2e8f0;
+      border-radius: 8px;
+      font-size: 12px;
+      line-height: 1.4;
+      z-index: 10;
+      opacity: 0.92;
+    }
+
+    #status.error {
+      background: #7f1d1d;
+      color: #fee2e2;
+    }
+
+    #root {
+      position: absolute;
+      top: 56px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: calc(100% - 56px);
+      overflow: auto;
+      background: #fff;
+    }
+
+    #portal {
+      position: relative;
+      z-index: 20;
+    }
+  </style>
+</head>
+<body>
+  <div id="status">Initializing…</div>
+  <div id="root"></div>
+  <div id="portal"></div>
+  <script type="module" src="/src/index.js"></script>
+</body>
+</html>