Embedding within Pentaho Server

This walk-through tutorial assumes you have completed the steps in the Create a Dashboard Using RequireJS section. In this tutorial, you will embed the dashboard created in that tutorial into an HTML page hosted within the Pentaho Server.

On your Desktop, create a folder named Embed to hold the three files we will create and upload to the Pentaho Server in this tutorial:
- main.html
- includeDashboards.js
- styles.css

Use a text editor to create a new HTML file and save it as main.html in the Embed folder you just created. Copy the following HTML code to the file:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Embedding CDE Dashboards with RequireJS</title>
    <link rel="stylesheet" type="text/css" href="../../repo/files/:public:Embed:styles.css"/>
   <script type="text/javascript" src="../../../plugin/pentaho-cdf-dd/api/renderer/cde-embed.js"></script>
  </head>
  <body>
    <div class="headerContainer">
      <header class="header">
        <a class="logo" href="http://www.pentaho.com/">
          <img src="http://www.pentaho.com/sites/all/themes/pentaho_resp/_media/logo-pentaho-new.svg" alt="Pentaho Logo">
        </a>
        <div class="titleHTML">
          <strong>Embedding CDE Dashboards with RequireJS</strong>
        </div>
      </header>
    </div>
    <div class="dashboardContainer">
      <div id="content1"></div>
      <div id="content2"></div>
      <script src="../../repo/files/:public:Embed:includeDashboards.js"></script>
    </div>
  </body>
</html>

Line 7 loads the cde-embed.js resource, which contains all the RequireJS configurations to embed CDE dashboards into the HTML page.
Line 20 creates a div which contains two other divs, identified as content1 and content2, in which two instances of the required dashboard class will be rendered.
Line 23 loads the includeDashboards.js file, which uses RequireJS to load the demoDashboard CDE dashboard as a JavaScript class. This file creates both instances and associates each one to its respective div and executes its render function.

Create the includeDashboards.js file and save it in the Embed folder. Copy the following JS code to the file:
```
require([
  "dash!/public/demoDashboard/demoDashboard.wcdf"
], function(SampleDash) {
  // Create two instances of the same dashboard that use distinct DOM elements
  (new SampleDash("content1")).render();
  (new SampleDash("content2")).render();
});
```
- The CDE dashboard is obtained via the CDE endpoint, /pentaho/plugin/pentaho-cdf-dd/api/renderer/getDashboard. The path field in the query string must contain the path to the CDE dashboard. Below is an example.
```
require([
  "/pentaho/plugin/pentaho-cdf-dd/api/renderer/getDashboard?path=/public/demoDashboard/demoDashboard.wcdf"
], function(SampleDash) { /* code */ });
```
- This endpoint returns a RequireJS module which contains a class for a specific dashboard which is used to create new dashboard instances. You can also embed a dashboard using the simpler dash! RequireJS loader plugin, such as in the includeDashboards.js source code. Below is an example.
```
require([
  "dash!/public/demoDashboard/demoDashboard.wcdf"
], function(SampleDash) { /* code */ });
```
Create the styles.css file in the Embed folder. Copy the following CSS code to the file:
```
body {
  padding: 10px;
}

img {
  width: 300px;
  padding-bottom: 10px;
}
```
Zip the Embed folder, and then use PUC to upload the compressed folder to the Pentaho Server’s Public folder.
Finally, review your work. From the Public > Embed folder, open the main.html file. The embedded dashboard should look similar to the image below.