4 Replies Latest reply on Sep 15, 2020 4:45 AM by Laurent Matheo

    How to embed smart report into DWPA using Helix Innovation Studio

    Christine Bowen
      Share This:

      Hello community,

       

      I am looking to show a Smart Report in DWPA using a custom page and a Helix Innovation Studio page.  I can successfully embed a Smart Report into a SharePoint page.  And I can successfully add a custom page to DWPA using a Helix Innovation Studio using a custom application.  But I can't figure out how to push the necessary javascript for embedded reports, into a Helix Application. I need this report to be visible to users who won't have a AR license, so the embedded report is the only option that can work for my scenario.

       

      Has anyone in the community been able to make this work, or have suggestions on how to proceed?

       

      Thanks,

      Christine

        • 1. Re: How to embed smart report into DWPA using Helix Innovation Studio
          Laurent Matheo

          Full disclaimer, I am not really a fan of the authentication method that asks for a login and a password.

           

          Overall in all the methods you need to load a script in a page, like in here:

          Generating JavaScript for embedding a report or dashboard - Documentation for Remedy Smart Reporting 20.02 - BMC Documen…

           

          You cannot load a script in an Innovation Studio view OOTB, you would need to create a custom view component that would load this script, then drag and drop this view component in your view:

          Example of creating a custom view component - Documentation for BMC Helix Platform 20.02 - BMC Documentation

           

          I created a sample application with some examples of view components (and other components):

          GitHub - lmame/Sample-Library-Public: Sample Library Public

          And most of the examples have their videos (I am late on the latest examples...):

          Episode 01 - Intro, what is this about? - YouTube

           

          What I would do is create a View Component that would have the script in its html directive, as a test to see if this works.

          Then as second step you could have input parameters for the view component, like login, password, dashboardid / reportid, smart reporting baseurl. Then in the directive generate the correct url and dynamically load the script.

           

          The other solution I played around a bit for a component I cannot share for now (for, reasons...) was to load the Smart Reporting JsApi script and just use it:

          https://docs.bmc.com/docs/sr2002/calling-the-javascript-api-directly-from-your-own-script-908957025.html

           

          As you can see the component supported the other authentication type (token), but like I said, for some "reasons" I cannot share it yet here:

           

                                  var options = {};
          
          
                                  if (_config.dashboardUuid) {
                                      options.dashUUID = _config.dashboardUuid;
                                  } else if (_config.reportUuid) {
                                      options.reportUUID = _config.reportUuid;
                                  }
          
          
                                  options.elementId = $scope.containerId;
                                  // options.showFilters = 'false';
                                  // options.showExport = 'false';
          
          
                                  // For example:
                                  // options.username = 'Hannah@petramco.com@bmc';
                                  // options.password = 'xxxxx';
                                  // options.clientOrg= 'bmc_Petramco Inc';
          
          
                                  if (token) {
                                      options.token = token;
                                  } else {
                                      options.username = username;
                                      options.password = password;
                                  }
          
          
                                  options.clientOrg = clientOrg;
                                  reportingOptions = _.cloneDeep(options);
                                  console.log(JSON.stringify(options));
          
          
                                  if (_config.dashboardUuid) {
                                      yellowfin.loadDash(options);
                                  } else if (_config.reportUuid) {
                                     
          

           

           

          Fyi when I was playing with it I had a couple of issues on the environments I was testing them, you might not hit them but I prefer to talk about them.

          The first one is that when trying to load the JsApi file there were some redirection happening that led to the JsApi trying to load an http file rather than its https version, leading Chrome to block it due to "mixed content".

          So I had to copy the JsApi file locally, modify the baseUrl information in it to use https (something like that) and just put the new JsApi in my bundle.

          Else I guess you can just try to load it using a script in the directive html or try to load it dynamically like Google Maps:

          Sample-Library-Public/google-map.directive.js at master · lmame/Sample-Library-Public · GitHub

          $.getScript(googleMapsScriptUrl, function

           

          The other thing was that the first time the report / dashboard was loaded in the view, it would display a message "cannot connect to datasource" with a sad face.

          I don't know why it happened on my environment and for time reasons I did not want to bother, so I ended up just checking for the error, clean the div containing the report and reload the report:

                              function checkReportLoaded() {
                                  // Detecting the Smart Reporting div with class errorContainer.
                                  if (_.first($document.find('.' + $scope.containerId).find('.errorContainer'))) {
                                      console.error('LMA:: Error detected, trying to reload the report.');
                                      _.first($document.find('#' + $scope.containerId)).innerHTML = '';
                                      // We have to show the container or the report will not load.
          
          
                                      if (_config.dashboardUuid) {
                                          yellowfin.loadDash(reportingOptions);
                                      } else if (_config.reportUuid) {
                                          yellowfin.loadReport(reportingOptions);
                                      }
          
          
                                      return;
                                  }
          
          
                                  // Report is displayed properly?
                                  if (_.first($document.find('.' + $scope.containerId).find('.reportSection'))) {
                                      console.log('LMA:: Report loaded successfully?');
          
          
                                      return;
                                  }
          
          
                                  console.log('LMA:: Will check again if the report is successfully loaded later...');
                                  $timeout(checkReportLoaded, 200);
                              }
          

           

          The directive html was something like:

          <div id="{{containerId}}"
               class="{{containerId}}"></div>
          

           

          Hope that helps.

          • 2. Re: How to embed smart report into DWPA using Helix Innovation Studio
            Laurent Matheo

            Btw the user needs to have a password set in Smart Reporting, as stated I think in the docs if you are using the login / password approach.

            • 3. Re: How to embed smart report into DWPA using Helix Innovation Studio
              Christine Bowen

              Hi Laurent,

               

              Thank you for your assistance.  I was able to create a new view-component with my javascript in the directive.html file.  When I tried to load the page with the test javascript, It won't display anything on the page except for the header I added with the standard components.

               

              The page throws errors behind the scenes.  Along with a bunch of 404 errors, I see this: Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

              (anonymous) @ JsAPI?reportUUID=52dc9f63-b5cb-4e92-9d55-8da0f97e446f&username=XXXX&password=XX&clientOrg=XXXX:5

              My directive.html page is probably setup incorrectly.  Do I need more tags around the script itself?  Right now the only thing in that file is the script tag.

               

              <script src="https://smartreportingqa.XXXX.com/JsAPI?reportUUID=52dc9f63-b5cb-4e92-9d55-8da0f97e446f&width=auto&height=500&username=XXX&password=XXX&clientOrg=XXX" type="text/javascript"></script>

               

              Christine

              • 4. Re: How to embed smart report into DWPA using Helix Innovation Studio
                Laurent Matheo

                Ahhh yes I think I had this one indeed during my early tries, the script tries to do some document.write and it does not work in AngularJs.

                I think in this case what I did was using something like:

                baseUrl being the js script url.

                $.getScript(baseUrl, function () {
                    handleAuthentication();
                });
                

                 

                Pretty much what I did for Google Maps:

                Sample-Library-Public/google-map.directive.js at master · lmame/Sample-Library-Public · GitHub

                 

                Though in my case I did it just to load the yellowfin object and I was creating a report / dashboard passing the right options rather than passing them in the script url so I did not try your use case.

                Let's see if it helps.

                In my case after I had some mixed content issues.