Uber List Examples

In addition to the User Guide, many of the pages beneath this page are examples of Uber List in action.

The page list in the Sidebar on the right is an Uber List. The identity of the pages to be listed is generated using Magic Data. Each list element is formatted using a simple stack where Magic Data is again used to fill in the page specific information.

Each of the linked pages gives a slightly different example of Uber List in action.

In fact, Uber List with Magic Data is so flexible that all add-on pages on this site use the same sidebar Uber List, added to page type defaults and propagated through all 100 pages in the Add-Ons area of this site. (The number of pages is counted using Magic Data.)

Even the main Addons List listing page is an Uber List.

The Magic Data expression to generate the sidebar page list is:

PAGE PARENT_FROM_TOP 2 MERGE_INTO "addon_pages_list" 
LIST_PAGES 50  MERGE_INTO "addon_pages_list" 
REMOVE_FROM_LIST ( PAGE ) 
SORT_BY 
  PAGE_NAME 
END_SORT_BY
  • Line 1 locates a page 2 down from the top in the current path and notes it into a memory 'addon_pages_list'.
  • Line 2 then lists 50 pages beneath that and adds them to the same list. The list remains the 'current result', so we can keep using it.
  • Line 3 removes the current page from the list.
  • Lines 4-6 sort the list by page name.

Then for each list item a stack containing a single content block, shown here as HTML:

[% ORIGINAL_PAGE PAGE_LINK %]

[% ORIGINAL_PAGE PAGE_DESCRIPTION TRUNCATE_TO_WORD 150 %]... [% ORIGINAL_PAGE URL AS_NAMED_LINK " more." %]

As more developer documentation for concrete5.7 becomes available and time permits, I will be porting more of my addons. I have a lot of addons in the marketplace and it will take a while to update them all to 5.7.

Uber List is the ultimately flexible list block. Just one list capable of listing anything you want to list and formatting it however you like:

  • Pages.
  • Users.
  • Files.
  • Products.
  • Search results.
  • Form results and tabular data (using Magic Data Forms)
  • Anything there is a Magic Data symbol for.

Create, filter and order a list of items using a Magic Data expression. Then show the listed items using a stack or HTML snippet as a template, adapting the template to each item with inserts of Magic Data. The listed items can optionally be formatted by wrapping them in any content block template and further advanced item wrappers can be added from Magic Tipple.

  • Set item width and height.
  • Control overflow.
  • Float left or right.
  • Set margins and padding.

Uber List can paginate lists with too many options for transitions and effects to go into in detail. Have a look at some of the examples, then once you have Uber List installed you can enjoy experimenting.

Uber List can even clear up orphans so you don't end up with a lonely list item on a page by itself at the end. For long lists Uber List provides flexibly configured lazy-loading of list items for a fast user experience. 

Uber List includes many templates for displaying lists:

  • Equal height items.
  • CSS columns.
  • Ajax loading (requires Blocks By AJAX)
  • Remote setting - use Uber List to template items within a Page List block
  • Remote setting - use Uber List to template results from the core Search block!

See the documentation for more details about using Uber List.

If you want to dynamically sort, search and filter through an Uber List, Uber Filter provides the ultimate filtering extension for Uber List. You can see Uber Filter  in action powering this search page, a list driven by Uber List and filtered by Uber Filter .

This addon requires that Magic Data is already installed. You should also install Magic Data Symbols.

If you want to list eCommerce products, you will also need Magic Data Commerce.

The symbols available to Magic Data are growing all the time. With a little bit of php knowledge it is easy to add your own symbols to list other items and access the associated data.

See more addons by JohntheFish.

Last updated: over a year ago