Preparing the app

Starting from an existing Angular application, the rendering of a Pentaho dashboard has as prerequisite to prepare it properly with some initial steps. Each step has a precise goal and it is introduced below and detailed in the following paragraphs.

  1. Adding the dependency.
  2. Setting the proxy.
  3. Including the JS script.
  4. Importing the PentahoDashboardModule.
  5. Installing the package.

If you don't have an existing Angular app, you can easily create a new one following the tutorial in the Appendix named Creating a new app. Once done, or if you already have an Angular app, in the following paragraphs you can find the step-by-step description of the task to complete.

1. Adding the dependency

The very first step to do is about adding the dependency to the pentaho-dashboard npm package. To complete the task, edit thepackage.json file and add the following source code.

...,
"dependencies": {
    ...,
        "pentaho-dashboard": "1.0.1"

To find the latest release, check the pentaho-dashboard npm package directly.

2. Setting the proxy

To avoid the cross-origin resource sharing issue, the solution is to redirect the local URI /pentaho to the correct URL (in our example http://localhost:8080/pentaho). In the development environment the task can be easily completed using the proxy.conf.json file. If the file exists, add the configuration as follows.

...,
"/pentaho": {
  "target": "http://localhost:8080",
  "secure": false,
  "changeOrigin": false
}

If the proxy.conf.json file does not exist, create it into the root folder of your project and fill it with the following JSON content.

{
  "/pentaho": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": false
  }
}

Of course, the target URL should be replaced with the right one for your environment, containing the server/port where Pentaho Business Analytics platform is up and running.

Only if you are creating the proxy.conf.json file, edit thepackage.json file and change the start item as following.

"scripts": {
  ...
  "start": "ng serve --proxy-config proxy.conf.json"

3. Including the JS script

The HTML page requires one JS file to be included in the head tag. To develop this, edit the .angular-cli.json file and add the following configuration.

...,
"scripts": [
  ...,
  "../node_modules/pentaho-dashboard/src/assets/pentahoHeaderScript.js"

Be aware that the .angular-cli.json file must exist in an Angular application, directly into the root folder of the project. If you don't see it suing the file explorer, it could be hidden according to the default settings of your Operating System.

4. Importing the PentahoDashboardModule

Now that everything is correctly configured, it's time to import the PentahoDashboardModule into the application. The first thing to do is to edit the tsconfig.json file and setup the include property as described below.

{
  "compileOnSave": false,
  "compilerOptions": { ... },
  "include": [
    "src/**/*",
    "node_modules/pentaho-dashboard/index.ts"

Once done, edit the src/app/app.module.ts file and add the source code as described below.

...
import { PentahoDashboardModule } from 'pentaho-dashboard';
...
@NgModule({
  imports: [
    ...,
    PentahoDashboardModule

5. Installing the package

Last but not least, download and install the pentaho-dashboard package executing the following command from a terminal.

npm install

Once done, run the npm start command and open a browser at http://localhost:4200.

What to do next

Congratulations! Your Angular application is ready to manage the Pentaho sessions and dashboards. In the following sections you will learn how to log in into Pentaho (defining a valid session), how to log out and how to render all your existing or future dashboards.

results matching ""

    No results matching ""