Is there any way to divide one result from PocketQuery on multiple tabs?

[BB GG]

Hi, I need help (: 

my company uses PocketQuery. I created six really simple "selects". Each of them I put into six tabs on one page. Each of them uses the same table, just different columns. 
The problem is that time of loading the page is too long, up to 1 minute. The queries are just "selects" without generating any big data - just from table with ready to read data. The table has just about 80 rows. 

I read about additive "Cache for Confluence", but maybe there is a way to do one select with all data from the table and then divide them into each tab? 

[Sven Schatter _Lively Apps_ · Accepted solution]

Hi @BB GG,

Yes, there is! Thanks to Templates, you can basically do anything with PocketQuery that you could do on a normal website. No additional apps required. :)

This is for example a Template that renders 2 tabs, and then calls the "default template" which renders a table in the first tab, and also another template on the second tab (which could render your $result differently):

$webResourceManager.requireResourcesForContext("com.atlassian.auiplugin:tabs")

<div class="aui-tabs horizontal-tabs">
  <ul class="tabs-menu">
    <li class="menu-item active-tab">
      <a href="#tabs-example-first">Tab 1</a>
    </li>
    <li class="menu-item">
      <a href="#tabs-example-second">Tab 2</a>
    </li>
  </ul>

  <div class="tabs-pane active-pane" id="tabs-example-first">
    <h2>This is tab 1</h2>

    ## Inside here, call things like $PocketQuery.template()
    ## Or $PocketQuery.renderPocketQueryMacro()
    <div>$PocketQuery.template("default")</div>
  </div>

  <div class="tabs-pane" id="tabs-example-second">
    <h2>This is tab 2</h2>

    ## Inside here, call things like $PocketQuery.template()
    ## Or $PocketQuery.renderPocketQueryMacro()
    <div>$PocketQuery.template("dab6316a-f02c-42b4-b9a8-33fbdce52744")</div>
  </div>
</div>

Here's what that looks like:

If you have any questions, let me know. :)

Cheers,
Sven

[BB GG]

Thank you @Sven Schatter _Lively Apps_, it can be good way.
Please, read my example that I mentioned in my reply to Katerina. 
Will it be good idea to make an "invisible tab" with all columns (select * from theTable) and then operate on $result in other visible tabs? 
Maybe you have better idea? Is it possible to get specific columns from $result and put them simply into a table?

[Sven Schatter _Lively Apps_]

Hi @BB GG,

Sorry for taking so long to respond! The last days have been quite busy for me as we launched 2 new apps on the Marketplace. :)

Getting back to your question, yes, you can use this exactly to do what you described below. This is going to be a long answer as I will need to paste you lot of code, but it's really not that complicated. Consider a simple result like this:

I now create 2 PocketQuery Templates that only render certain columns out of the $result. For example:

Template 1: Only Content ID + Title

<table class="aui confluenceTable pocketquery-table">
<thead>
  <tr>
    <th class="confluenceTh">Content ID</th>
    <th class="confluenceTh">Title</th>
  </tr>
</thead>

<tbody>
  #foreach ($row in $result)
  <tr>
    <td class="confluenceTd">$row.get("contentid")</td>
    <td class="confluenceTd">$row.get("title")</td>
  </tr>
  #end
</tbody>
</table>

Template 2: Only Content Type + Version

... same thing as above
just using "contenttype" and "version"
instead of "contentid" and "title"

Now we need a third Template that calls the other two and renders the tab navigation:

$webResourceManager.requireResourcesForContext("com.atlassian.auiplugin:tabs")

<div class="aui-tabs horizontal-tabs">
  <ul class="tabs-menu">
    <li class="menu-item active-tab">
      <a href="#tabs-example-first">Everything (Default Template)</a>
    </li>
    <li class="menu-item">
      <a href="#tabs-example-second">Template 1</a>
    </li>
    <li class="menu-item">
      <a href="#tabs-example-second">Template 2</a>
    </li>
  </ul>

  <div class="tabs-pane active-pane" id="tabs-example-first">
    <h2>This will display the complete result table</h2>
    <div>$PocketQuery.template("default")</div>
  </div>

  <div class="tabs-pane" id="tabs-example-second">
    <h2>This will only display the content id & title</h2>
    <div>$PocketQuery.template("<INSERT ID OF TEMPLATE 1>")</div>
  </div>

  <div class="tabs-pane" id="tabs-example-second">
    <h2>This will only display the content type & version</h2>
    <div>$PocketQuery.template("<INSERT ID OF TEMPALTE 2>")</div>
  </div>
</div>

This is the Template you want to assign to your Query. Do not forget to replace the IDs inside the $PocketQuery.template calls! :) 

The final result should look like this:

And for all of that, you only sent one single Query to your Datasource!

Let me know if this helps. :)

Cheers,
Sven

[BB GG]

Hi @Sven Schatter _Lively Apps_ 

I have been quite busy too :) 

You're awesome, thank you! You helped me a lot. :))

[Katerina Kovriga _Stiltsoft_]

Hi @BB GG ,

Maybe you use the Table Filter and Charts for Confluence app in your company?

Its Table Filter macro may come in handy for your case: create several filter views based on your "selects" (you'll work only with the one table) and save the filter URLs.

Then you'll be able to create buttons (links) for every "select" but using only one source table.

[BB GG]

Thank you for your answer but your idea will be good for dividing rows, not columns. I need to divide it on several columns, different columns in each tab but from the same table.

For example: 

I have table with columns: name | surname | age | height 

I need to make a page with tabs:

- tab_Strings where will be the table with name and surname only 

- tab_Numbers where will be the table with age and height only 

In general I have a table with about 50 columns and 80 rows. 
I try to divide the 50 columns into smaller "category parts" like the String and Numbers. That's why I have the idea with getting data from one table for several tabs. Now I have 6 tabs and 6 queries, what is inefficient.