Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents


Purpose

Cubbles supports the integration of any component into a webpage using the html iframe element.

This is a useful option if:

  1. You are not allowed to place any <script/> -element into the page.
  2. The component's integration via the 2.3 | Cubbles Tag API has side-effects onto the embedding page:
    1. styling side-effects - e.g. if css declarations within the component are not consequently defined within their own namespace.
    2. functional side-effects - e.g. if javascript dependencies used by the component are in conflict with javascript dependencies of the embedding page.

The RTE contains a html-resource

  1. that can be referenced using the iframe's src-attribute,
  2. with parameters to
    1. define the component to be loaded
    2. to initialize the component with proper values
    3. to add dependencies

The following sections present a demo to indicates the proper use of the Cubbles iframe.




Demo

Prerequisites

  • The webpackageId (e.g. my-webpackage@1.0.0-SNAPSHOT) of the component is known.
  • The artifactId  (e.g. my-component)of the component s known.

Sample case

Let's say say you want to show a line chart presenting the sales behavior of your store during the first 4 months of the current year. To aim that, you can use the line-chart component. Let's now say that you sales behavior was as shown in the following tables:

MonthSold Units of Product ASold Units of Product B
January1000300
February500400
March1500700
April1100500


Using iframe app

The iframe app allows users to visualize a component within any web page using the html iframe element. To aim that, the webpackageId and the artifactId of the component should be provided as url parameters. Additionally, the initial values of the component's slots and additional dependencies can be provided using JSON format as url parameters.

The iframe app is available at https://cubbles.world/sandbox/cubx.core.rte@2.3.0/iframe Therefore, to use it you should provide the url as src attribute of an iframe element as follows:

Code Block
languagexml
<iframe src='https://cubbles.world/sandbox/cubx.core.rte@2.3.0/iframe'/>

Note that the app itself does not load anything, first it should be initialized. The following sections present this process in detail.

Component initialization (Mandatory)

To initialize the iframe you should provide the following data of the component:

  • webpackageId: in this case com.incowia.lib.chart-library@0.2.0-SNAPSHOT
  • artifactId: in this case line-chart

To provide those ids you should use the webpackge-id and the artifact-id url parameters as shown below:

Code Block
languagexml
<iframe src='https://cubbles.world/sandbox/cubx.core.rte@2.3.0/iframe/index.html?webpackage-id=com.incowia.lib.chart-library@0.2.0-SNAPSHOT&artifact-id=line-chart&dependencies=[]'/>


Result

Iframe
srchttps://cubbles.world/sandbox/cubx.core.rte@2.3.0/iframe/index.html?webpackage-id=com.incowia.lib.chart-library@0.2.0-SNAPSHOT&artifact-id=bar-chart&dependencies=%5B%5D
width100%
height350px


Component's slots initialization (Optional)

Until now the line chart is empty so you need to provide initial values for the line-chart component, using the inits parameter, which accepts the slots values in JSON format, i.e. {"slot1Name": slot1Value, "slot2Name": slot2Value}. 

In our case we need to initialize the component as follows:

Slot nameSlot value
dataColumns

[["Product A", 1000, 500, 1500, 1100],
["Product B", 300, 400, 700, 500]]

xLabels

["January", "February", "March", "April"]

The iframe should look as follows:

Code Block
languagexml
<iframe src='https://cubbles.world/sandbox/cubx.core.rte@2.3.0/iframe/index.html?webpackage-id=com.incowia.lib.chart-library@0.2.0-SNAPSHOT&artifact-id=line-chart&inits={"dataColumns":[["Product A",1000,500,1500,1100],["Product B",300,400,700,500]],"xLabels":["January","February","March","April"]}&dependencies=[]'/>


Result

Iframe
srchttps://cubbles.world/sandbox/cubx.core.rte@2.3.0/iframe/index.html?webpackage-id=com.incowia.lib.chart-library@0.2.0-SNAPSHOT&artifact-id=line-chart&inits=%7B%22dataColumns%22%3A%5B%5B%22Product+A%22%2C1000%2C500%2C1500%2C1100%5D%2C%5B%22Product+B%22%2C300%2C400%2C700%2C500%5D%5D%2C%22xLabels%22%3A%5B%22January%22%2C%22February%22%2C%22March%22%2C%22April%22%5D%7D&dependencies=%5B%5D
width100%
height350px


Adding dependencies (Optional)

If you want, you can also add Cubbles dependencies to the component using the dependencies parameter, which accepts an array (JSON format) containing the dependencies like this: [{ "webpackage-id" : "valueX", "artifact-id" : "valueY"}, ...].

For instance if you want to add our bootstrap utility as dependency the code should look as shown below:

Code Block
languagexml
<iframe src='https://cubbles.world/sandbox/cubx.core.rte@2.3.0/iframe/index.html?webpackage-id=com.incowia.lib ... &dependencies=[{"webpackage-id" : "bootstrap-3.3.5@1.1.0", "artifact-id" : "bootstrap"}]'/>



Tip

You might want the Cubbles iframe size to adjust to its content. Then, check the /wiki/spaces/RTE/pages/221563802.4 | The Cubbles IFrame Resizer API to get more information.