{"_id":"@cesarechazu/directus-extension-dynamic-iframe","_rev":"2-e300e8cc768fe1120eccf91eb5e201c0","name":"@cesarechazu/directus-extension-dynamic-iframe","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@cesarechazu/directus-extension-dynamic-iframe","version":"1.0.0","keywords":["directus","directus-extension","directus-extension-interface","iframe","embed","template","alias"],"author":{"name":"cesar","email":"cesarechazu@gmail.com"},"license":"MIT","_id":"@cesarechazu/directus-extension-dynamic-iframe@1.0.0","maintainers":[{"name":"cesarechazu","email":"cesarechazu@gmail.com"}],"homepage":"https://github.com/cesarechazu/directus-extension-dynamic-iframe#readme","bugs":{"url":"https://github.com/cesarechazu/directus-extension-dynamic-iframe/issues"},"dist":{"shasum":"befc6c5ad38619a5ae17c3e2f129c1ff470102f2","tarball":"https://registry.npmjs.org/@cesarechazu/directus-extension-dynamic-iframe/-/directus-extension-dynamic-iframe-1.0.0.tgz","fileCount":4,"integrity":"sha512-yyqMUs+4RyeNotwvEJXJeM+mCTXBe8P5zrqGLug886A1Q6lHjw/pgdq4P+UZxzS/uQkRigKtqEF2ePqlMB4xBA==","signatures":[{"sig":"MEQCIE9IQ4jd1vL7Gsjz6oeHyC1ZohtVqNhQPOgkYDVLxt6/AiAIzYOY5N9hROpB9qLKoX8YozBaBdLw+aOhqtJiGL24mQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14052},"icon":"iframe","type":"module","gitHead":"d3bfa00efbda8a85946e856b351867725a4a2531","scripts":{"dev":"directus-extension build -w --no-minify","link":"directus-extension link","build":"directus-extension build","validate":"directus-extension validate"},"_npmUser":{"name":"cesarechazu","email":"cesarechazu@gmail.com"},"repository":{"url":"git+https://github.com/cesarechazu/directus-extension-dynamic-iframe.git","type":"git"},"_npmVersion":"10.9.2","description":"Embed secure pages using a URL template resolved from the current form values.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","@directus/extensions-sdk":"13.0.4"},"directus:extension":{"host":"^10.10.0","path":"dist/index.js","type":"interface","source":"src/index.js"},"_npmOperationalInternal":{"tmp":"tmp/directus-extension-dynamic-iframe_1.0.0_1772387384826_0.12023279278608934","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@cesarechazu/directus-extension-dynamic-iframe","description":"Embed secure pages using a URL template resolved from the current form values.","icon":"iframe","version":"1.0.1","license":"MIT","author":{"name":"cesar","email":"cesarechazu@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/cesarechazu/directus-extension-dynamic-iframe.git"},"bugs":{"url":"https://github.com/cesarechazu/directus-extension-dynamic-iframe/issues"},"homepage":"https://github.com/cesarechazu/directus-extension-dynamic-iframe#readme","keywords":["directus","directus-extension","directus-extension-interface","iframe","embed","template","alias"],"type":"module","directus:extension":{"type":"interface","path":"dist/index.js","source":"src/index.js","host":"^11.0.0"},"scripts":{"build":"directus-extension build","dev":"directus-extension build -w --no-minify","link":"directus-extension link","validate":"directus-extension validate"},"devDependencies":{"@directus/extensions-sdk":"13.0.4","vue":"^3.5.13"},"_id":"@cesarechazu/directus-extension-dynamic-iframe@1.0.1","gitHead":"6e92766cfab4cefa67b1f012bdedf4362ee315c9","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-GoCEBcJxxD8JZwrmdsd1JU9HzQuGD6NypCbzKtiDFcYI7kERCtjRnWZYkgKe2UpuKj8bjjkWnZIH1DlwMRhRrA==","shasum":"26373294538bc005c1a185e60a9b725ec743149b","tarball":"https://registry.npmjs.org/@cesarechazu/directus-extension-dynamic-iframe/-/directus-extension-dynamic-iframe-1.0.1.tgz","fileCount":4,"unpackedSize":14051,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCLQlz+UH6rcIpmgmq4zdGqcBOxbNF4ZZ9ssiaq66T+iwIgIjR8gj3jLi2mHMdf1MYZLNX+LPPMiBUsuexEasEc59g="}]},"_npmUser":{"name":"cesarechazu","email":"cesarechazu@gmail.com"},"directories":{},"maintainers":[{"name":"cesarechazu","email":"cesarechazu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/directus-extension-dynamic-iframe_1.0.1_1772405698726_0.8322405004200157"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-01T17:49:44.749Z","modified":"2026-03-01T22:54:58.988Z","1.0.0":"2026-03-01T17:49:44.984Z","1.0.1":"2026-03-01T22:54:58.867Z"},"bugs":{"url":"https://github.com/cesarechazu/directus-extension-dynamic-iframe/issues"},"author":{"name":"cesar","email":"cesarechazu@gmail.com"},"license":"MIT","homepage":"https://github.com/cesarechazu/directus-extension-dynamic-iframe#readme","keywords":["directus","directus-extension","directus-extension-interface","iframe","embed","template","alias"],"repository":{"type":"git","url":"git+https://github.com/cesarechazu/directus-extension-dynamic-iframe.git"},"description":"Embed secure pages using a URL template resolved from the current form values.","maintainers":[{"name":"cesarechazu","email":"cesarechazu@gmail.com"}],"readme":"# Dynamic iFrame\n\nEmbed a secure external page inside a Directus alias field using a URL template.\n\nThis interface is useful for showing dashboards, previews, reports, or external tools directly inside the item editor, based on the current form values.\n\nThis pattern is especially useful for embedded analytics and reporting dashboards, where the URL needs to change according to the record currently being edited.\n\n## Interface\n\n\n\n## Features\n\n- Renders an external page inside an iframe\n- Resolves placeholders from the current form values\n- Updates the iframe URL when referenced form values change\n- Supports configurable debounce before reloading\n- Optional loading indicator\n- Optional open in new tab shortcut\n- Optional fullscreen permission\n- Supports custom height\n- Supports custom border styling\n- Supports custom border radius\n- **Accepts only `https` URLs**\n- Shows a placeholder when the URL is missing or invalid\n- Works as an `alias` field, so it does not create a database column\n\n## Options\n\n- `url_template`: target page template, for example `https://example.com?client={{client_id}}`\n- `height`: iframe height, for example `800px` (default `800px`)\n- `debounce`: delay in milliseconds before updating the iframe URL, default `250`\n- `loading`: show a visual loading indicator while the iframe reloads, default `true`\n- `border`: any valid CSS border value\n- `border_radius`: any valid CSS border radius value\n- `open_in_new_tab`: show a shortcut to open the resolved URL in a new tab, default `false`\n- `allow_fullscreen`: enables fullscreen support on the iframe, default `false`\n\n## Dynamic Placeholders\n\nThe `url_template` can use values from other fields in the current item form.\n\nExamples:\n\n- `https://example.com/dashboard?client={{client_id}}`\n- `https://example.com/report/{{id}}`\n- `https://example.com/embed?customer={{customer.id}}`\n- `https://example.com/embed?customer={{customer.id}}&name={{customer.name}}`\n\nSupported placeholder formats:\n\n- `{{field_name}}`: reads a top-level field from the current form\n- `{{relation.id}}`: reads nested values using dot notation\n- `{{id}}`: resolves the current item primary key\n\n\n## Usage Example\n\nOne practical use case is a singleton collection used as a control panel or embedded reporting view.\n\nExample setup:\n\n- Create a singleton collection\n- Add a many-to-one field such as `customer_id` related to a `customers` collection\n- Add a second field using the `Dynamic iFrame` interface as an `alias` field\n- Configure the iframe `url_template` like:\n - `https://example.com/dashboard?customer={{customer_id}}`\n\nBehavior:\n\n- When the user changes the selected customer in the `customer_id` field\n- Directus updates the form state immediately\n- The iframe resolves the new `{{customer_id}}` value\n- The iframe reloads automatically after the configured debounce\n\nThis makes it useful for filtered dashboards, contextual previews, embedded reports, or any external page that needs to react to other field values in the current form.\n\n## Notes\n\n- This interface only renders secure (`https`) pages.\n- Some websites block embedding with `X-Frame-Options` or `Content-Security-Policy`.\n- This interface works best with pages that are designed to be embedded.\n","readmeFilename":"README.md"}