{"id":29784805,"url":"https://github.com/withdave/qlik-embed-examples","last_synced_at":"2026-02-07T13:03:53.774Z","repository":{"id":300182103,"uuid":"1005165366","full_name":"withdave/qlik-embed-examples","owner":"withdave","description":"A Qlik Sense app with all charts, embedded in a static site.","archived":false,"fork":false,"pushed_at":"2025-11-05T19:35:23.000Z","size":12859,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-05T21:27:13.820Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://withdave.github.io/qlik-embed-examples/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/withdave.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-19T19:24:58.000Z","updated_at":"2025-11-05T19:34:10.000Z","dependencies_parsed_at":"2025-08-28T12:18:42.127Z","dependency_job_id":"cc6401a4-3a1c-4031-97cf-2d2435b0328c","html_url":"https://github.com/withdave/qlik-embed-examples","commit_stats":null,"previous_names":["withdave/qlik-sense-charts","withdave/qlik-embed-examples"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/withdave/qlik-embed-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withdave%2Fqlik-embed-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withdave%2Fqlik-embed-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withdave%2Fqlik-embed-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withdave%2Fqlik-embed-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withdave","download_url":"https://codeload.github.com/withdave/qlik-embed-examples/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withdave%2Fqlik-embed-examples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29194468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T12:38:28.597Z","status":"ssl_error","status_checked_at":"2026-02-07T12:38:23.888Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-27T16:16:39.152Z","updated_at":"2026-02-07T13:03:53.768Z","avatar_url":"https://github.com/withdave.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# qlik-embed-examples\n\nA simple Qlik Sense app, with all charts, hosted in GitHub pages via Qlik anonymous access. Includes some basic tests.\n\n[![Playwright - nightly visual regression](https://github.com/withdave/qlik-embed-examples/actions/workflows/playwright_nightly.yml/badge.svg?event=schedule)](https://github.com/withdave/qlik-embed-examples/actions/workflows/playwright_nightly.yml)\n\n## Overview\n\nThis repository provides a simple, hosted Qlik Sense app that demonstrates all available chart types. It includes:\n- An embeddable web app (`embed/index.html`) for viewing the Qlik Sense app via Qlik's web components.\n- Automated deployment to GitHub Pages for the embed app. This is configured to deploy to a Qlik Cloud anonymous tenant (note this is why the NL object won't render).\n- Automated deployment of the Qlik Sense app (`src/*.qvf`) to your Qlik Cloud tenant using GitHub Actions.\n\n---\n\n## Repository Structure\n\n- `embed/` — Contains the embeddable web app and deployment scripts\n  - `index.html` — Main embed page (uses Qlik web components)\n  - `index.css` — Styling for the embed page\n  - `qlik-upload.js` — Node.js script to upload and publish Qlik Sense apps to your tenant\n- `src/` — Contains Qlik Sense app files (`.qvf`)\n- `.github/workflows/` — GitHub Actions workflows for automation\n- `README.md` — This documentation\n\n---\n\n## Embed App (`embed/index.html`)\n\n\nThe `embed/` directory contains several example HTML pages that use Qlik's web components to display Qlik Sense apps and charts in different configurations:\n\n- `index.html` — Index page for examples.\n- `dual-classic-app.html` — Qlik Sense app overview using both @qlik/embed-web-components and @qlik/api.\n- `solo-classic-app.html` — Qlik Sense app overview using @qlik/embed-web-components.\n- `solo-analytics-sheet-selections.html` — Dynamic sheet loading for Qlik Sense sheets using @qlik/embed-web-components and Ref API.\n- `solo-analytics-chart-otf.html` — On-the-fly analytics chart using @qlik/embed-web-components (barchart, custom state, and more).\n- `solo-analytics-snapshot.html` — Static chart rendering using \u003ccode\u003edata___json\u003c/code\u003e and @qlik/embed-web-components (no backend required).\n- `configurator.html` — Interactive Qlik Sense chart configurator using @qlik/embed-web-components.\n\nThese pages require several Qlik Cloud variables to be injected at build/deploy time:\n\n- `{{qlikHost}}` — Your Qlik Cloud tenant host (e.g. `your-tenant.qlikcloud.com`)\n- `{{qlikClientId}}` — OAuth client ID for anonymous access\n- `{{qlikAccessCode}}` — Access code for the anonymous app share\n- `{{qlikAppId}}` — The Qlik Sense app ID to display\n\nThese placeholders are replaced automatically during the GitHub Pages deployment workflow.\n\n---\n\n## GitHub Actions Workflows\n\n### 1. Deploy Embed App to GitHub Pages\n\nWorkflow: `.github/workflows/pages.yml`\n\n- **Triggers:** On push to `main` affecting `embed/**`, or manually via workflow dispatch\n- **Steps:**\n  1. Checks for required Qlik environment variables\n  2. Replaces placeholders in `embed/index.html` with values from repository variables\n  3. Uploads the `embed/` directory as a GitHub Pages artifact\n  4. Deploys to GitHub Pages\n\n#### Required Repository Variables (in GitHub repo settings \u003e Variables):\n- `QLIK_HOST` — Your Qlik Cloud tenant host\n- `QLIK_CLIENT_ID` — OAuth client ID for anonymous access\n- `QLIK_ACCESS_CODE` — Access code for the anonymous app share\n- `QLIK_APP_ID` — The Qlik Sense app ID to embed\n\n### 2. Qlik Sense App Workflows\n\nThere are two workflows for working with Qlik Sense apps in this repository:\n\n- **Workflow: `.github/workflows/qlik_app_deploy.yml`**\n  - **Purpose:** Deploys (uploads and publishes) Qlik Sense apps from `src/*.qvf` to your Qlik Cloud tenant for consumption via the embed page.\n  - **Triggers:** On push to `main` affecting `src/*.qvf`, or manually via workflow dispatch.\n  - **Steps:**\n    1. Installs dependencies\n    2. Runs `embed/qlik-upload.js` to upload and publish the Qlik Sense app(s) to your tenant\n\n- **Workflow: `.github/workflows/unbuild_app.yml`**\n  - **Purpose:** Extracts (\"unbuilds\") the definition of each Qlik Sense app in `src/` into a `/diff` folder for version control and review. This does not deploy apps.\n  - **Triggers:** On pull requests to `main` affecting `src/**`, or manually via workflow dispatch.\n  - **Steps:**\n    1. For each `.qvf` in `src/`, imports the app to a temporary Qlik Cloud context\n    2. Runs `qlik app unbuild` to extract the app definition (without data) into `/diff/\u003cqvf-name\u003e/`\n    3. Downloads any app images/media into `/diff/\u003cqvf-name\u003e/images/`\n    4. Commits and pushes changes in `/diff` if any are detected\n\n\u003e **Note:** Use `qlik-app-deploy.yml` to deploy apps to your tenant. Use `unbuild_app.yml` to extract and version app definitions for code review and change tracking. The `/diff` folder is only updated by the unbuild workflow and is not used for deployment.\n\n#### Required Repository Variables and Secrets:\n- `QLIK_HOST` — Your Qlik Cloud tenant host\n- `QLIK_ADMIN_CLIENT_ID` — Machine-to-machine OAuth client ID with `admin_classic` and `user_default` scopes\n- `QLIK_ADMIN_CLIENT_SECRET` (Secret) —  Machine-to-machine OAuth client secret\n\n---\n\n## How to Configure Variables and Secrets\n\n1. Go to your GitHub repository \u003e Settings \u003e Secrets and variables \u003e Actions\n2. Add the following **Variables**:\n   - `QLIK_HOST`\n   - `QLIK_CLIENT_ID`\n   - `QLIK_ACCESS_CODE`\n   - `QLIK_APP_ID`\n   - `QLIK_ADMIN_CLIENT_ID`\n3. Add the following **Secret**:\n   - `QLIK_ADMIN_CLIENT_SECRET`\n\n---\n\n## Local Development\n\n### Development Server (Recommended)\nThe project includes a build system that automatically replaces Qlik placeholders with environment variables, just like the GitHub workflow.\n\n1. Install dependencies:\n   ```bash\n   npm install\n   ```\n\n2. Set up your Qlik environment variables using a `.env` file:\n   ```bash\n   # Copy the template file\n   cp .env.template .env\n   \n   # Edit .env with your actual Qlik Cloud values\n   ```\n\n3. Start the development server:\n   ```bash\n   npm start\n   ```\n\n4. Open your browser and navigate to:\n   - Main app: http://localhost:3000\n\nThe server will automatically:\n- Run the build process to replace Qlik placeholders\n- Serve files from the `build/` directory\n- Use fallback values if environment variables aren't set\n\n### Build Process\nThe build system:\n- Copies all files from `embed/` to `build/`\n- Replaces `{{qlikHost}}`, `{{qlikClientId}}`, `{{qlikAccessCode}}`, and `{{qlikAppId}}` placeholders\n- Uses environment variables if available, otherwise falls back to placeholder values\n- Can be run independently with `npm run build`\n\n### Manual File Access (Not Recommended)\nYou can still open `embed/index.html` directly in your browser, but you'll need to manually replace the Qlik placeholders for the charts to render properly.\n\n---\n\n## License\n\nMIT License. See [LICENSE](LICENSE).\n\n---\n\n## Tests\n\nThis repository includes automated visual regression tests using Playwright. These tests ensure that the Qlik Sense charts render correctly and match the expected visual output.\n\n### Running the Tests\n\n1. Install dependencies:\n   ```bash\n   npm install --no-save @playwright/test playwright\n   npx playwright install --with-deps\n   ```\n\n2. Run the tests:\n   ```bash\n   npx playwright test\n   ```\n\n### Test Details\n\n- The tests navigate to the hosted Qlik Sense app and verify the presence of key elements.\n- Visual regression checks are performed on the `.main-container` to ensure it matches the baseline image.\n- Timeout for rendering elements is set to 15 seconds to accommodate iframe loading delays.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithdave%2Fqlik-embed-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithdave%2Fqlik-embed-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithdave%2Fqlik-embed-examples/lists"}