Hitachi Vantara Pentaho Community Forums
Results 1 to 22 of 22

Thread: Embedding CDE dashboard into web application

  1. #1
    Join Date
    Sep 2016
    Posts
    29

    Default Embedding CDE dashboard into web application

    Hi,

    Please let me know how to embed Pentaho 6.1 CDE dashboard in to a web application. Any documentation links will be helpful.

    Thanks,
    Padma Priya N.





  2. #2
    Join Date
    Nov 2011
    Posts
    1,229

    Default

    There's documentation on that in Plugin Samples -> CDE.

    Also, you can take a look here: http://redmine.webdetails.org/projec...g-Capabilities
    Pedro Vale
    --
    CTools Product Development
    http://www.webdetails.pt

  3. #3
    Join Date
    Sep 2016
    Posts
    29

    Default

    Thank you for the reply. Even after doing the below steps getting error as "Parser-blocking, cross-origin script, http://localhost:8080/pentaho/conten...uire-js-cfg.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity."
    1) I have added <script type="text/javascript" src="http://localhost:8080/pentaho/plugin/pentaho-cdf-dd/api/renderer/cde-embed.js"></script> in my java application
    2) downloaded cors-filter-1.8.jar & java-properties-util-1.9.jar and placed them in my biserver-ce/tomcat/lib folder. I also added the following to my biserver-ce/tomcat/conf/web.xml:

    <filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    </filter>

    <filter-mapping>
    <filter-name>CORS</filter-name>
    <url-pattern>/*</url-pattern>
    </filter-mapping>

    3) Added settings.xml files of CDF:
    <allow-cross-domain-resources>true</allow-cross-domain-resources>

    Please let me know if i miss anything?

    Thanks
    Padma Priya N.

  4. #4
    Join Date
    Nov 2011
    Posts
    1,229

    Default

    What is your java application?

    Is it a webapp running in the same tomcat instance?
    A webapp running in another server?
    Pedro Vale
    --
    CTools Product Development
    http://www.webdetails.pt

  5. #5
    Join Date
    Sep 2016
    Posts
    29

    Default

    Hi,
    I have 12 reports to be shown in my web application. The urls are constructed dynamically in my web application as "http://localhost:8080/pentaho/api/repos/lugin-samples:<reportName>.wcdf/generatedContent" .
    I'm trying to display the report response in div in my web application.

    Web app & Pentaho are running in different tomcat instances.

    Thanks,
    Padma Priya N.

  6. #6
    Join Date
    Nov 2011
    Posts
    1,229

    Default

    That should work fine. Are you able to make one of the samples work? Just running the provided html in your tomcat or from the local filesystem?
    Pedro Vale
    --
    CTools Product Development
    http://www.webdetails.pt

  7. #7
    Join Date
    Sep 2016
    Posts
    29

    Default

    Hi Pedro,
    Thank you for the reply.I'm able to embed the sample & my reports using iFrame but not with div. Getting CORS exceptions when try to embed using div. Please find the error attachment.
    1)Added allow-cross-domain-resources = true in pentaho-solutions\system\pentaho-cdf\settings.xml,pentaho-solutions\system\pentaho-cdf-dd\settings.xml
    2)Added the script <script type="text/Javascript" src="http://localhost:8080/pentaho/plugin/pentaho-cdf-dd/api/renderer/cde-embed.js">
    require([
    '/pentaho/plugin/pentaho-cdf-dd/api/renderer/getDashboard?path=/public/plugin-samples/pentaho-cdf-dd/pentaho-cdf-dd-require/cde_sample1.wcdf'
    ], function(SampleDash) {
    var sampleDash = new SampleDash("content1");
    sampleDash.render();
    });</script>
    3) checked the box for requireJSSupport while creating dashboard

    Error Attachment
    Name:  Capture.jpg
Views: 914
Size:  28.9 KB
    Last edited by Padma Priya; 11-21-2016 at 07:01 AM.

  8. #8
    Join Date
    Sep 2016
    Posts
    29

    Default

    Any one please help. unable to embed the CDE dashboard in to java web application.

  9. #9
    Join Date
    Nov 2011
    Posts
    1,229

    Default

    So, the info in that console screenshot are warnings, there is nothing actually being blocked - unless you're running in a 2G network on a mobile phone.

    Is there anything else in the console?
    Pedro Vale
    --
    CTools Product Development
    http://www.webdetails.pt

  10. #10
    Join Date
    Sep 2016
    Posts
    29

    Default

    Please find the console log

    22-Nov-2016 11:19:20.250 WARNING [http-apr-8080-exec-2] com.sun.jersey.spi.inject.Errors.processErrorMessages The following warnings have been detecte
    d with resource and/or provider classes:
    WARNING: A HTTP GET method, public void pt.webdetails.cda.CdaUtils.unwrapQuery(java.lang.String,java.lang.String,javax.servlet.http.HttpServletRespo
    nse,javax.servlet.http.HttpServletRequest) throws javax.ws.rs.WebApplicationException, MUST return a non-void type.
    WARNING: A HTTP GET method, public void pt.webdetails.cda.CdaUtils.getCdaList(java.lang.String,javax.servlet.http.HttpServletResponse,javax.servlet.
    http.HttpServletRequest) throws java.lang.Exception, MUST return a non-void type.
    11:21:06,198 ERROR [BlueprintContainerImpl] Unable to start blueprint container for bundle pdi-dataservice-server-plugin due to unresolved dependenci
    s [(objectClass=org.pentaho.metaverse.api.ILineageClient)]
    java.util.concurrent.TimeoutException
    at org.apache.aries.blueprint.container.BlueprintContainerImpl$1.run(BlueprintContainerImpl.java:336)
    at org.apache.aries.blueprint.utils.threading.impl.DiscardableRunnable.run(DiscardableRunnable.java:48)
    at java.util.concurrent.Executors$RunnableAdapter.call(Unknown Source)
    at java.util.concurrent.FutureTask.run(Unknown Source)
    at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.access$201(Unknown Source)
    at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.run(Unknown Source)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
    at java.lang.Thread.run(Unknown Source)

  11. #11
    Join Date
    Nov 2011
    Posts
    1,229

    Default

    Those are the server logs, I meant the browser javascript console. Also, in the network monitor, what is the status and response for the requests?
    Pedro Vale
    --
    CTools Product Development
    http://www.webdetails.pt

  12. #12
    Join Date
    Oct 2016
    Posts
    12

    Default

    I have the same warnings on my console, besides the following error is also occurring:


    XMLHttpRequest can not load http: // localhost: 8080 / pentaho / plugin / pentaho-cdf / api / resources / js / compressed / lib / underscore / underscore.js. In 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.


    I believe it's a CORS issue, but i'm already include the tag below in my settings.xml:


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

    Does anyone know what kind of error this is?

  13. #13
    Join Date
    Nov 2011
    Posts
    1,229

    Default

    Can you try adding that tag to pentaho-cdf-dd/settings.xml as well?
    Pedro Vale
    --
    CTools Product Development
    http://www.webdetails.pt

  14. #14
    Join Date
    Oct 2016
    Posts
    12

    Default

    yeah! i added the tag in pentaho-cdf-dd/settings.xml and pentaho-cdf/settings.xml


  15. #15
    Join Date
    Aug 2013
    Posts
    100

    Default

    Have you resolved your problem or still you are facing some issues?

  16. #16
    Join Date
    Oct 2016
    Posts
    12

    Default

    Quote Originally Posted by Sumit_Bansal View Post
    Have you resolved your problem or still you are facing some issues?
    no..;(

    please, look the problem below:

    Name:  Captura de tela de 2017-01-12 16-29-26.jpg
Views: 353
Size:  29.2 KB

    The HTML code for test:
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
    
    
            <script src="scripts/require.js"></script>
            <script type="text/javascript" src="http://localhost:8080/pentaho/plugin/pentaho-cdf-dd/api/renderer/cde-embed.js"></script>
    
    
        </head>
        <body>
            <script type="text/javascript">
                require(['http://localhost:8080/pentaho/plugin/pentaho-cdf-dd/api/renderer/getDashboard?path=/public/Receitas/Dashboards/receitas.wcdf'], 
                    function(SampleDash) {
                        var sampleDash = new SampleDash("content1");
                        sampleDash.render();
                    }
                );         
            </script>
    
    
    
    
            <div id="content1"></div>
        </body>
    </html>
    The image above is low quality, so follow the errors:

    XMLHttpRequest cannot load http://localhost:8080/pentaho/plugin...ne/backbone.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    cde-embed.html:1 XMLHttpRequest cannot load http://localhost:8080/pentaho/plugin...y-impromptu.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    cde-embed.html:1 XMLHttpRequest cannot load http://localhost:8080/pentaho/plugin...ery.blockUI.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    cde-embed.html:1 XMLHttpRequest cannot load http://localhost:8080/pentaho/plugin...b/xmla/Xmla.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    cde-embed.html:1 XMLHttpRequest cannot load http://localhost:8080/pentaho/plugin...queryParser.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    cde-embed.html:1 XMLHttpRequest cannot load http://localhost:8080/pentaho/plugin....properties.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    cde-embed.html:1 XMLHttpRequest cannot load http://localhost:8080/pentaho/plugin...osen.jquery.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    cde-embed.html:1 XMLHttpRequest cannot load http://localhost:8080/pentaho/plugin...multiselect.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    cde-embed.html:1 XMLHttpRequest cannot load http://localhost:8080/pentaho/plugin...ct2/select2.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    Xmla.js:4 Uncaught ReferenceError: Xmla is not defined(…)(anonymous function) @ Xmla.js:4execCb @ require.js:1693check @ require.js:881enable @ require.js:1173enable @ require.js:1554(anonymous function) @ require.js:1158(anonymous function) @ require.js:134each @ require.js:59enable @ require.js:1110init @ require.js:786(anonymous function) @ require.js:1457
    cdf.jquery.i18n.js:1 Uncaught TypeError: Cannot read property 'properties' of undefined(…)(anonymous function) @ cdf.jquery.i18n.js:1execCb @ require.js:1693check @ require.js:881(anonymous function) @ require.js:1136(anonymous function) @ require.js:134(anonymous function) @ require.js:1186each @ require.js:59emit @ require.js:1185check @ require.js:936enable @ require.js:1173init @ require.js:786(anonymous function) @ require.js:979(anonymous function) @ require.js:134(anonymous function) @ require.js:1186each @ require.js:59emit @ require.js:1185check @ require.js:936enable @ require.js:1173init @ require.js:786(anonymous function) @ require.js:1011(anonymous function) @ require.js:134execCb @ require.js:1693check @ require.js:881enable @ require.js:1173init @ require.js:786(anonymous function) @ require.js:1457
    cde-embed.html:1 XMLHttpRequest cannot load http://localhost:8080/pentaho/plugin...y/jquery.ui.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
    Last edited by r4ph21; 01-12-2017 at 05:29 PM.

  17. #17
    Join Date
    Sep 2015
    Posts
    12

    Default

    Configuring the server
    To setup the pentaho server do the following:
    1) In server's pentaho-solutions/system folder edit pentaho-cdf/settings.xml and pentaho-cdf-dd/settings.xml and set:
    HTML Code:
    <allow-cross-domain-resources>true</allow-cross-domain-resources>
    2) Start/Restart the server

    Testing (using Python)
    Setup your remote HTML page using an embedded CDE dashboard:
    1) Go to a local directory in your filesystem and create an HTML file named embedded.html with the following content:
    HTML Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <script type="text/javascript" src="http://localhost:8080/pentaho/plugin/pentaho-cdf-dd/api/renderer/cde-embed.js"></script>
      </head>
      <body>
        <script type="text/javascript">
          //require(['http://localhost:8080/pentaho/plugin/pentaho-cdf-dd/api/renderer/getDashboard?path=/public/plugin-samples/pentaho-cdf-dd/pentaho-cdf-dd-require/embeddedSample/dashboard/sample.wcdf'],
          require(['dash!/public/plugin-samples/pentaho-cdf-dd/pentaho-cdf-dd-require/embeddedSample/dashboard/sample.wcdf'],
            function(SampleDash) {
              var sampleDash = new SampleDash("content1");
              sampleDash.render();
            }
          );
        </script>
        <div id="content1"></div>
      </body>
    </html>
    note: no extra require.js files are needed, all dependencies are included via the (...)/cde-embed.js endpoint.
    2) In the same folder start a python HTTP server by executing
    Code:
    python -m SimpleHTTPServer 8070

    3) Open your browser with the URL: http://localhost:8070/embedded.html

    This works in my machine, does it work in yours? If it doesn't please reply with the errors you see in the browser console and/or the server log using this setup.
    If you have the tail command available, you can output the server logs to the terminal window by executing:
    Code:
    tail -f tomcat/logs/catalina.out tomcat/logs/pentaho.log &
    Last edited by afjorge; 01-17-2017 at 12:49 PM.

  18. #18
    Join Date
    Oct 2016
    Posts
    12

    Default

    Very Thanks, It's worked here! thank you! But can you tell me how don't show the login/password window that appears when the my web application tries to access pentaho?

  19. #19
    Join Date
    Sep 2015
    Posts
    12

    Default

    This is a big security issue because you are making your username and password visible in your HTML but your can:
    1) Edit the pentaho server file pentaho-solutions/system/security.properties and set:
    Code:
    requestParameterAuthenticationEnabled=true
    2) In your embedded HTML add the username and password while accessing the embedded.js endpoint:
    HTML Code:
    <script type="text/javascript" src="http://localhost:8080/pentaho/plugin/pentaho-cdf-dd/api/renderer/cde-embed.js?userid=admin&password=password"></script>
    note: There is a known issue when using HTTPS in embedded scenarios, the fix was done but will probably only be available in the 7.1 release.

    Please at least use a user with less privileges than the admin user (e.g. Suzy)

  20. #20
    Join Date
    Oct 2016
    Posts
    12

    Default

    afjorge,
    thanks again bro!

    Actually, I have a problem of passing the user/password in the URL in version 7.0, even activating the flag mentioned above. So I'll use version 6.1 until version 7.1 is available. Could you pass the number of the JIRA bug?


    Is there another way secure to connect my webapp with pentaho? I read about SSO (link), but I don't like the idea of using another tool.


    Thank you.

  21. #21
    Join Date
    Sep 2015
    Posts
    12

    Default

    Remember to restart the server after editing the security.properties file (this also applies to any other configuration files, such as the previously mentioned settings.xml).
    The HTTPS issue is http://jira.pentaho.com/browse/CDF-949. I tested it in a recent 7.1-SNAPSHOT and it seems fixed now (how to HTTPS reference: https://help.pentaho.com/Documentati..._with_SSL/000).
    Sorry I can't help you with SSO at the moment.

  22. #22
    Join Date
    Oct 2016
    Posts
    12

    Default

    It's worked to me. Thanks for all help afjorge!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2019 Hitachi Vantara Corporation. All Rights Reserved.