How to render Export to Image after getData has finished

[Anonymous]

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-enab...‌‌

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...

[Anonymous]

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.

[Anonymous]

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[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.

[Anonymous · Accepted solution]

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);

[Anonymous]

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?

[Anonymous]

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?

[edim_fazlic]

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.

[Anonymous]

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)