More than one Pocket Query Macros per page?

[Guenther Engeler]

Hi there

I'm pretty new in Pocket Query and I want to embed 4 different PQ-Macros on a page. The Macros have different Queries embedded.

If I save the page and want to see the results, only one (the last) macro will be displayed. Is there a limitation or do I have to check other things?

Thanks in advance for your help

Greets Günther

[Felix Grund (Scandio)]

Hi Guenther,

Sorry for the late reply! Does the problem still persist? This should normally work by default. Which version of PocketQuery and which version of Confluence are you using?

Best, Felix

[Jeroen van der Hoek]

Do you use javascript to build your table? 

Without dynamic loading you can just find the container div, to add your table, using this code:

 var pocketQueryDiv = AJS.$('script').last().parent();

For dynamic loading I found this hacky solution (Tested only in Pocket Query 3.2.0):

• Put an unused macroID parameter in the REST/SQL query. &xNUmacroID:macroID
• When adding the macro to a confluence page, make sure this parameter is filled with a unique value for every macro on the same page. 1,2,3.. etc
• In the template create a <div> with a unique id, with this macroID
• Build your table and use jQuery to find this div and add your table to the div.

Query:

getData?table=:table&xNUmacroID=:macroID

Template:

<div id="mymacro$queryParameters.macroID"></div>

<script type="text/javascript">

 var pocketQueryContainer = AJS.$("#mymacro$queryParameters.macroID").parent();
 
 var html = createTable($result.get(0).result);
 
 AJS.$(pocketQueryContainer).append(html);
 
 function createTable (data) {
   // ...
   return html;
 }
 
</script>  

 Connector:

function convert(json) { 
 return [ { "result": json } ];
}

I see that evey pocketquery macro contains a div with an id = pocketquery-result-#############, with the number being a timestamp. It could maybe be used to link a template to a pocketquerycontainer. But often two macro's have the same timestamp. And I also do not know how to get the right id in the template script. And how to find the right dataIndex for PocketQuery.getDynamicLoadData(dataIndex) ?

var dataIndex = container.data('index'); // is undefined in 3.2.0

Felix?

[Felix Grund (Scandio)]

Hi Jeroen,

Could you summarize for me what the problem is? I've seen many PocketQuery macros on one page (up to 50) and it has mostly worked without any issue. You shouldn't need JavaScript code in your template to make this work.

Best, Felix

[Jeroen van der Hoek]

-

[Jeroen van der Hoek]

-

[Jeroen van der Hoek]

-

[Jeroen van der Hoek]

Hi Felix,

I know, I'm just better with javascript than velocity script and it allows me to reuse some code. I use it for instance for combining columns, to format different value types and to add a search field.

So I've added this javascript script element to the Pocket Query template. The problem is that with the option "Load macro dynamically" on in combination with multiple pocketqueries on the same page, I don't know where to insert the table that I created in the script. Because with dynamic loading the parent of the script element is the div with id "full-height-container", while without dynamic loading the parent is the div with the class "pocketquery-result" inside it's pocket query container. That's why I use this workaround with a macroId. Maybe you have a cleaner solution?

And could you explain how to find the right dataIndex for the javascript function PocketQuery.getDynamicLoadData(dataIndex)? I need the data to execute the function PocketQuery.load({ container: container, data: data });.

[Felix Grund (Scandio)]

Hi Jeroen,

I think there is three points I want to answer:

1.) You can also reuse code with Velocity by including a template in another template with $PocketQuery.template("TemplateName"). That way you can implement a base template for reuse in other templates. But you can of course also work with JS if you prefer that.

2.) As I understand you are using a template creating a table with JS for the current query data in multiple queries. In that case, you'll have to get the container of the query for which the template is currently run. You should be able to do this:

AJS.bind('pocketquery.dynamicload.done', function(e, data) {
  var container = data.container;
  // container is now the div for the current query execution and you can render stuff in it
});

 3.) The dataIndex parameter for PocketQuery.getDynamicLoadData defines the index of the PQ macro on the page, starting with 0. For example, PocketQuery.getDynamicLoadData(2) will retrieve the dynamic load data for the 3rd macro on the page. Note that this only returns the metadata of the query and not the result.

Hope that helps!
Felix

[Jeroen van der Hoek]

Thanks Felix, that clears some things up, but about point 2: it seems that the "pocketquery.dynamicload.done"-event is caught by all rendered macros on the page ( With 2 macros the callback function is called 3 times. With 3 its called 6 times. ) So that doesn't help me to link the script to a container. But I think I found another solution based on matching the result in the container to the result in the script:

<div class="ivs-pocketquery-result" style="display:none;" ><![CDATA[$result.get(0).result//]]></div>

<script type="text/javascript" >

 var pocketQueryResult = $result.get(0).result;
 var results = AJS.$(".ivs-pocketquery-result");
 var pocketQueryContainer = "";

 for ( var i = 0; i < results.length; i++ ) {
 
   if (
     AJS.$("<div/>").html(pocketQueryResult).text() === AJS.$(results[i]).text()
     && !$(results[i]).hasClass("rendered")
   ) {
     pocketQueryContainer = $(results[i]).parent();
     $(results[i]).addClass("rendered");
     break;
   }
 
 }

 if ( !pocketQueryContainer.length ) {
   return;
 }

 // Create table
 // ....
 
</script>  

[Felix Grund (Scandio)]

I find it really strange that the listener is invoked twice for each macro. But it shouldn't be a big deal. Can't you just check if the container given as data.container is still empty and only then render your stuff? Like this:

$(data.container).is(':empty')

I'm glad you found a working solution but it really seems too complicated for the purpose in my opinion. 

[Jeroen van der Hoek]

Ofcourse

Code:

var pocketqueryResultDivs = AJS.$(".pocketquery-result");
var pocketQueryContainer;

// AJS.$.trim goes fubar in velocity.
var jqueryAlias = AJS.$;

// The find the .pocketquery-result with just whitespace in it.
for ( var i = 0; i < pocketqueryResultDivs.length; i++ ) {

  var div = $(".pocketquery-result").eq(i);

  if ( jqueryAlias.trim( div.html() ).length === 0 ) {
    
    pocketQueryContainer = div;
    break;

  }

}