CDF Embedded Example

Description

Loads CDF require configs from a server and renders a new Dashboard with a Select Component.

It also allows to add custom require modules and load them along with the CDF modules.

This will make it possible for any server and/or 3rd party applications to embed CDF Dashboards, from a Pentaho Server.

Note:

To properly allow the embedded scenario, which probably requires Cross-Origin Resource Sharing
there is one extra setting that needs to be turned on in the settings.xml of CDF:

<allow-cross-domain-resources>true</allow-cross-domain-resources>

Configurations

script tag

The url for the server endpoint that injects the CDF dependencies

To demonstrate the embedding capabilities of CDF, we have an embedded.html file (located in the same folder), which is is capable of embedding CDF.
This is done by simply including a javascript resource, which will make sure to embed the necessary files.
You can drop the embedded.html file into any web server and you'll be able to embed a CDF dashboard, as long as you provide the correct url for the script tag mentioned below.

You really only need to know the path to the Pentaho Server from which you want to embed CDF, and then include the embed javascript resource:

<script type="text/javascript" src="path/to/server/pentaho/plugin/pentaho-cdf/api/cdf-embed.js"></script>

Our embedded.html demonstrates this:

ln12:

<script type="text/javascript" src="http://localhost:8080/pentaho/plugin/pentaho-cdf/api/cdf-embed.js"></script>

We can then assume we are in a Pentaho CDF environment, we are embedded!

ln54:

      require(['cdf/Dashboard.Blueprint', 'cdf/components/SelectComponent', 'myModule', "cdf/Logger"],
        function(Dashboard, SelectComponent, m, Logger) {
          
        Logger.log("MODULE getString() " + m.getString());
        m.writeOnElement("#myModuleText", "Text written by a custom module defined in myModule.js");

        var myDashboard = new Dashboard();

        myDashboard.addParameter("region", "1");

        var selectComponent = new SelectComponent({
          name: "regionSelector",
          type: "select",
          parameters: [],
          valuesArray: [["1", "Lisbon"], ["2", "Dusseldorf"]],
          parameter: "region",
          valueAsId: false,
          htmlObject: "sampleObject",
          executeAtStart: true,
          postChange: function() {
            alert("You chose: " + myDashboard.getParameterValue(this.parameter));
          }
        });

        myDashboard.addComponent(selectComponent);
        myDashboard.init();
      });
    

Note that myModule is not configured in CDF, hence requireJS will try to get its definition from a file named myModule.js in the same path as the embedded.html file.

In order to properly check this sample, please download the following file from the Pentaho Repository.

      /Public/plugin-samples/CDF/Documentation/embeddedSample/embedded.html
    

For instance, in an Apache Server, copy this file to its content root directory and in the browser open http://localhost/embedded.html