Double listing asset listings


(Douglas (@finnatic at @waikato)) #1

I’m working on a couple of asset listings which need to have the assets listed twice - 1) a listing of the assets by title / asset name and then 2) details of the assets.

Does anyone have a smart, efficient design pattern for doing listings like this?

My initial five-minute-that-may-have-been longer solution was to clone the asset listing strip it back to the names and embed that back into the original listing which was outputting the details.

I’ve wondered if it’s something that would be more effective with a SSJS solution, where I can built up the two sections of the page as the SSJS loops through the assets to list.


(Tbaatar) #2

You could use SSJS with paint layout to create the secondary listing. If performance (milliseconds) is not a huge issue double listing would suffice.


(John gill) #3

I ran into this recently, and considered three options to avoid duplicating the Asset Listing without resorting to client side JS.

1. SSJS

Use the listing to collect an array of AssetIDs, then iterate over it twice.

Default Format

<script runat="server">
items.push("%asset_assetid%")
</script>

Page Contents

<script runat="server">
var items = [];
</script>

%asset_listing%

<ul>
<script runat="server">
items.forEach(function(e) {
    print("<li>%globals_asset_name:" + e + "%</li>")
})
</script>
</ul>

<ul>
<script runat="server">
items.forEach(function(e) {
    print("<h2>%globals_asset_name:" + e + "%</h2>")
    print("<h2>%globals_asset_contents_raw:" + e + "%</h2>")
})
</script>
</ul>

2. Flexbox order

Use the order CSS property with flexbox to render the contents in a different order to the markup.

Default Format

<div class="list1">%asset_name%</div>
<div class="list2">
    <h2>%asset_name%</h2>
    %asset_contents_raw%
</div>

Page Contents

<style>
    .list1 {
        background: lemonchiffon;
        order:1;
    }
    
    .list2 {
        background: lavender;
        order:2;
    }
    .container {
        display:flex;
        flex-direction: column;
    }
</style>
<div class="container">
%asset_listing%
</div>

3. Conditional keyword to print two versions of the same listing

Set up the listing to take a parameter to control which version it prints, then include the asset listing twice

Default Format

%begin_nested_get_variant^eq:2%
<div class="list2">
    <h2>%asset_name%</h2>
    %asset_contents_raw%
</div>
%else_nested%
<div class="list1">%asset_name%</div>
%end_nested%

A page somewhere you want to embed the double listing

%globals_asset_contents_raw:786%
%globals_asset_contents_raw:786^with_get:variant=2%

Personally I prefer #3 - the flexbox order thing is a bit hackish, and really ties your hands on what you can do with the markup. The SSJS is the most obvious, but it’s a shame to have to do all your markup inside a print() statement and worrying about string escaping etc.


(John gill) #4

I just realised that #3 might be dangerous - Asset Listings seem to interact oddly with one of the caches, and depending on your version you can end up with the first version of the asset listing rendered twice because it doesn’t correctly distinguish based on the with_get parameter.

It’s a pain to debug because it doesn’t surface while you’re logged in and bypassing the caches. Probably safer to avoid #3. :frowning:


(Douglas (@finnatic at @waikato)) #5

SSJS is the most tempting here - I’m wondering if using paint layouts and the globals keyword that pushes an asset through a layout might be a way to avoid having the layout stuck in the SSJS e.g.

%globals_asset_contents_paint_layout_id_<paint_layout_id>:<assetid>%


(Edinkin) #6

Sorry guys, but I am curious to understand what this page would look like? What is the situation where you need to list same assets twice on one page?


(Douglas (@finnatic at @waikato)) #7

Our local usage is likely to be to collapse a long list of data into a smaller display section, either using a tabbed display or similar to show / hide selected panels of content - which needs a listing of the data headings and a listing of the data content.


(Bart Banda) #8

I’d first create an SSJS object with your asset data using something like .

var assets = %asset_children^as_asset:asset_data^empty:[]%

Then use SSJS functions to print those assets in multiple places in different ways.

printAssetsInTabs(assets);
...
printAssetsInAccordions(assets);