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

(Eric) #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);
(TmR) #9

I was looking for something similar to this and was helpful. What is the best way to create the list if the second iteration of the list needs assets at a lower level but as children of the assets in list 1?

I’ve been trying with assets listings and nesting the second list but the second asset listing needs to be nested within page contents of the first one and as a result list_current_asset_id doesn’t work. If I nest within the type_format, I can only seem to print the items together and not as separate lists.

Structure

List 1

  • Item 1 name
  • Item 2 name
  • Item 3 name

List 2

  • Item content of item 1 from list 1
  • Item contents of item 2 from list 1
  • Item contents of item 3 from list 1
(Bart Banda) #10

You could use SSJS and the asset children keyword to get up to 2 levels of children.
For example:

%frontend_asset_asset_children^as_asset:asset_children%

That will get you the asset children of the frontend asset, and then the children of each of those children. You can then use the ^as_asset and chain modifiers to get more data than just the ID, for example ^as_asset:asset_name,asset_url% etc…