CDE Embedded Example

Description

Loads CDE require configs from a server and creates a new dashboard with a Select Component, including a loaded CDE Dashboard.

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

To allow embedded scenarios using an external HTTP server, e.g. running on localhost port 8070, users need to enable Cross-Origin Resource Sharing (CORS) by editing the file settings.xml of each plugin (CDF, CDE and CDA; example location for CDF: system/pentaho-cdf/settings.xml) and set the following content:

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

<cross-domain-resources-whitelist>http://localhost:8070</cross-domain-resources-whitelist>

CORS also needs to be enabled for the Pentaho Server, this can be done by editing the file system/pentaho.xml and setting the following content:

<cors-requests-allowed>true</cors-requests-allowed>

<cors-requests-allowed-domains>http://localhost:8070</cors-requests-allowed-domains>

Start the server after applying the latter changes. If it is already running restart it.

Configurations

script tag

The url for the server endpoint that injects the CDE dependencies

To demonstrate the embedding capabilities of CDE, we have an embedded.html file (located in the same folder), which is is capable of embedding CDE. 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 CDE 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-dd/api/renderer/cde-embed.js"></script>

Our embedded.html demonstrates this:

ln12:

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

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

ln54:

      require([
        'cdf/Dashboard.Blueprint',
        'cdf/components/SelectComponent',
        'myModule',
        'cdf/Logger',
        'dash!/public/plugin-samples/pentaho-cdf-dd/embeddedSample/dashboard/sample.wcdf'
      ], function(Dashboard, SelectComponent, myModule, Logger, SampleDash) {

        Logger.log("MODULE getString() " + myModule.getString());
        myModule.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();

        var sampleDash = new SampleDash("content1");
        sampleDash.render();
      });
    

Note that myModule is not configured in CDF or CDE, 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/CDE/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