Documentation
develop
develop
  • Cubbles documentation
  • First steps
    • Generate a project
    • Create a webpackage
    • Create an elementary component
    • Create a compound component
      • Compound slot initialization
  • Runtime extension - RTE
    • User guide
      • RTE Integration
      • The Cubbles TAG API
        • The Cubbles Dependency API
      • The Cubbles Javascript API
        • Interacting with Cubbles from the outside
        • Adding dynamic connections
        • Interacting with Elementary Cubbles from the inside
      • The RTE Processing
        • RTE initialization and rendering timeline
      • The Cubbles IFrame API
        • The Cubbles IFrame Resizer API
      • The Cubbles mutation based start event API
      • FAQs
        • How to manually resolve dependency conflicts?
        • How to create a component instance dynamically?
        • How to render HTML Markup coming from input slot?
        • How to replace a dependency when declaring a component instance?
        • How to synchronize multiple dataflows between component instances?
        • How to handle the copyValue flag for non serializable instances?
    • Contributor guide
      • CIF processing
  • Developing with the vanilla boilerplate
    • Creating a new project
    • Developing elementaries using the vanilla boilerplate
    • Developing compounds using the vanilla boilerplate
    • Using the vanilla boilerplate scripts
  • Coder devtools - CDT
    • User guide
      • Create Cubbles artifacts
      • Upload a Webpackage
      • Generate a README file
      • Rename an artifact
      • Configure network proxy
      • Validate the manifest.webpackage file
      • Change active webpackage
      • Bulk upload of webpackages
      • Release a webpackage
      • Update the RTE version of a webpackage
      • Prepare a webpackage to be released
      • Update webpackage to the next development version
      • Generate a test environment for a component
      • Testing Cubbles components
      • Validate sources
      • Create a demo webpackage
    • Contributor guide
      • Checklist for releasing a new webpackage.modelVersion
  • Terms and concepts
    • Webpackage
    • Artifacts
    • User roles
    • Base
Powered by GitBook
On this page
  • Purpose
  • Use
  • Including the iframe-resizer utility
  • Setting the iframe id
  • Result
  1. Runtime extension - RTE
  2. User guide
  3. The Cubbles IFrame API

The Cubbles IFrame Resizer API

PreviousThe Cubbles IFrame APINextThe Cubbles mutation based start event API

Last updated 6 years ago

Purpose

Cubbles supports the integration of any component into a webpage using the html iframe element (See ). However, the iframe will not bet automatically resized to adjust its content, and you may not always be sure of the final size of the iframe.

In that case, you can use the iframe-resizer utility to enable the Cubbles iframe to resize according to its content. The following sections show how to use the iframe-resizer utility to automatically resize a Cubbles iframe.

Use

If you want the Cubbles iframe to be resized automatically according to its content size; you can use the iframe-resizer utility. Let's suppose you want to use a Cubbles iframe to display the cubx-maps-demo from the cubx-maps@1.0.0-SNAPSHOT, you should include an iframe html element as follows (See ):

<html>
...
<body>
  <iframe id="myIframe" src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/iframe/index.html?webpackage-id=my-first-webpackage@0.1.0-SNAPSHOT&amp;artifact-id=currency-viewer"></iframe>
</body>
</html>

Including the iframe-resizer utility

Now you need to include the utility as a script within the head of your html page. By the moment it is available at . Your code should now look as follows:

<html>
<head>
   <script src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/iframe-resizer/resize.js"></script>
</head>
<body>
  <iframe id="myIframe" src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/iframe/index.html?webpackage-id=my-first-webpackage@0.1.0-SNAPSHOT&amp;artifact-id=currency-viewer"></iframe>
</body>
</html>

Setting the iframe id

Finally you should:

  1. make sure the id attribute of your iframe is set and

  2. pass it to the Cubbles iframe using iframe-id parameter in the src url:

<html>
<head>
   <script src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/iframe-resizer/resize.js"></script>
</head>
<body>
  <iframe id="myIframe" src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/iframe/index.html?iframe-id=myIframe&amp;webpackage-id=my-first-webpackage@0.1.0-SNAPSHOT&amp;artifact-id=currency-viewer"></iframe>
</body>
</html>

Remember that the id of the iframe should be the same as the iframe-id value passed as a parameter, otherwise the resizing wouldn't work.

Result

The width of the iframe will be set to 100%. The height will be set according to the body content of the iframe whenever it changes as shown below.

Check to see the result running online.

The Cubbles IFrame API
The Cubbles IFrame API
https://cubbles.world/core/cubx.core.rte@3.0.0-SNAPSHOT/iframe-resizer/resize.js
this demo
RTE iframe Resizer Demo