8 Replies Latest reply: Jan 9, 2018 4:13 AM by Emil Rånge RSS

    How to render Export to Image after getData has finished

    Emil Rånge

      I have made an extension that get data from backend

      (Like this: backendApi.getData( requestPages ))

       

      When I export to Image I do not see any data. Most likely because paint returns before backend have respond with data.

       

       

      I think the solution to this is to use "finished rendering" some how.

      (last part in this link)

      https://help.qlik.com/en-US/sense-developer/3.1/Subsystems/Extensions/Content/Howtos/extensions-enable-export.htm

       

       

      I do not understand how to use it:

      paint : function() { return qlik.Promise.resolve(); }

      (qlik is not defined)

       

      How do I find variable qlik? If I find it, will it work? I guess the getData callback must tell that the extension has finished rendering...

        • Re: How to render Export to Image after getData has finished
          Emil Rånge

          I found varibale 'qlik', I just had to write

          define( ["js/qlik"],function(qlik){

          at the top.

           

          Still the problem is that I get a blank page when export to image and quite still sure I has to do with that the paint method returns before the backend calls are done. I have tried to add :

          return qlik.Promise.resolve();

          in paint method and it still does not work.

           

          The thing is that I have many backend calls that call other backend calls (that draw extension) and it would be great if I could just call some kind of callback when the draw of the extension is complete.

           

          ...

          I will return with an example code of the problem since I think it is hard to understand the issue.

            • Re: How to render Export to Image after getData has finished
              Emil Rånge

              Here is the code:

                var requestPages = [{

                  qTop: 0,

                  qLeft: 0,

                  qWidth: 1,

                  qHeight: 10

                }];

               

               

                this.backendApi.getData( requestPages ).then( function ( dataPages ) {

                  $element.empty();

                  var matrix = dataPages[0].qMatrix;

                  var ul = document.createElement("UL");

                  $element.append(ul);

                  for(var i=0; i<matrix.length; i++) {

                    var li = document.createElement("LI");

                    li.append(document.createTextNode(matrix[i][0].qText));

                    ul.append(li);

                  }

                })

               

               

                return qlik.Promise.resolve();

               

              I can see the data.

               

              But when I export to image I just see a blank page. How can I make sure the image is being exported after html been created.

            • Re: How to render Export to Image after getData has finished
              Emil Rånge

              I found a solution for this some weeks ago. I post answer here in case someone else is in need of solution.

               

              call resolve when extension is a state ready for export like this.

                  paint: function ( $element, layout ) {

                        return new Promise(function(resolve,reject) {

               

               

              Also a short timeout just before resolve is good since I had some issues see the data that were draw on extension just before resolve().

              setTimeout(function(){ resolve(); }, 100);

                • Re: How to render Export to Image after getData has finished
                  ed fa

                  Hi,

                   

                  I am facing now with the same issue. I have some animations and other similar stuff in the extension. Same problem like you had. I tried with this piece of code that you written, but without success.

                  Can you please give me a more detailed example how you did this?

                    • Re: How to render Export to Image after getData has finished
                      Emil Rånge

                      Animations? How long are your animations?

                      Try increase the timeout before call reslove. (second parameter in setTimeout)

                       

                      I do not have the code anymore but it was not more complex than this:

                      paint: function ( $element, layout )

                      {

                        return new Promise(function(resolve,reject)

                        {

                          // append html element to $element

                          setTimeout(function(){ resolve(); }, 100);

                        }

                      }

                       

                      Can you give me an example of your code?

                        • Re: How to render Export to Image after getData has finished
                          Edim Fazlić

                           

                          let settings = {

                           

                             svgContainer: {

                             element: $element.get(0),

                             width: $element.width(),

                             height: $element.height(),

                             id: layout.qInfo.qId

                            },

                             font: {

                             fontFamily: layout.settings.fontFamily,

                             fontSize: layout.settings.fontSize,

                             fontColor: layout.settings.fontColor

                            },

                             fontTooltip: {

                             fontSize: layout.tooltipSettings.fontSizeTooltip,

                             fontFamily: layout.tooltipSettings.fontFamilyTooltip,

                             fontColor: layout.tooltipSettings.fontColorTooltip

                            },

                             animationEnabled: layout.settings.animationEnabled,

                             autoScaling: layout.scaling.autoScaling,

                             colors: {

                             backgroundColor: layout.settings.backgroundColor,

                             hoverBarColor: layout.barSettings.hoverBarColor,

                            firstBarColor: layout.barSettings.firstBarColor,

                             secondBarColor: layout.barSettings.secondBarColor,

                             thirdBarColor: layout.barSettings.thirdBarColor,

                            };

                          extension = new TestExtensionC(settings);

                           

                             TestExtensionCUtil.prepareData(dataRows, settings, extension);

                             extension.display().then(function () {

                             layout.allowExport = true; // support: { export: function (layout) { return layout.allowExport; } },

                             return qlik.Promise.resolve();

                            });

                           

                          In settings.svgContainer.element goes the whole HTML, this is in fact $element. The duration of the animation is max 2 seconds. All the code is in the extension.display() method which returns a promise, and resolves it after the animation is done. I tried also the same thing with setTimeout, without using the Promise, but without success. I also posted a new question regarding this topic: Qlik sense export.

                           

                          P.S: I posted this question from a temporarily account, because in that moment I couldn't login to my account.

                            • Re: How to render Export to Image after getData has finished
                              Emil Rånge

                              is it in when you call return qlik.Promise.resolve() the animation is done? try call resolve() there instead or  setTimeout(function(){ resolve(); }, 100);

                               

                              Make sure that resolve actual refere to the parameter found in the Promise callback

                               

                              paint: function ( $element, layout )

                              {

                                return new Promise(function(resolve,reject)


                              ( I believe qlik.Promise and Promise works as equally good in most cases)