Fork me on GitHub
2sxc 8.9 for DNN 7 to 9
Website Builder, Content Manager, App-System: free and amazing - done your way
You are here: Home  >  Docs  >  Lists

Lists - Using Simple Lists of Content Items

Introduced in Version 03.00.00

2SexyContent is about creating nicely designed output - of one or more items. A list is needed, whenever you want multiple items (entities) of the same type, displayed after one another. This can repeat downwards (like a table or like designed list - like facebook entries) or sideways - for example three in a row and then the next row. To discover lists and see some screenshots, visit the discover-lists page. 

Enabling Lists on a Template

This is done in the template Settings. Just tick the "Enable List" in the template configuration for this template. 

When a list is used, the entire template - or parts of it - are repeated. This is how it works:

Repeating Templates in Tokens

If the template has a <repeat>-tag, it will only repeat the parts inside that section. For example:

  1. [Content:Title]

Using such a template with a List of two items would produce this for example:

  1. 2sic
  2. 2sxc

Now if you did not have the <repeat> tag, then the entire template is repeated. This can be desirable, but sometimes not. So this template:

  1. [Content:Title]

would produce this with 2 items - probably not what you wanted.

  1. 2sic
  1. 2sxc

Note that sometimes you have a list but don't want to repeat anything - this is usually the case, when you actually just have a bit of JavaScript and will just deliver the JSON to the client. In this case, just create an empty <repeat> tag to ensure the template isn't duplicated. You can find a demo here and the App to try it yourself here. , like this:

Helper-Tags for Token-Lists

Some functionality is very hard to do without code, so we added some helper tokens. They are the following:

  • [List:Count] – shows the amount of items in the List
  • [List:Index] – Shows the index number of the item that is being rendered (first item has index 0)
  • [List:Index1] - shows the index but starts with 1 - ideal for showing a row number or similar
  • [List:IsFirst] – is blank, or “First”. Very usefull for adding CSS-Classes like <div class=”SomeKindOfBox [List:IsFirst]“>
  • [List:IsLast] – same as above, but returns “Last” on the last item
  • [List:Alternator2] – returns 0 or 1 on each item, ideal for alternately coloring rows etc. like <tr class=”Row[List:Alternator2]“>
  • [List:Alternator3] – returns 0, 1 or 2. Usefull for lists that display 3 boxes side by side, maybe with a line between the box 1 and 2, and wrap after the third one.
  • [List:Alternator4] – same as above, just 0,1,2,3
  • [List:Alternator5] – same as above, just 0,1,2,3,4

Create inline Edit-Toolbars with Tokens

 

The [Content:Toolbar] still works - even with lists. So the way to do it is as follows:

  1. [Content:Title][Content:Toolbar]

this will then create edit buttons on each line. If you want to float the buttons, just make sure that the [Content:Toolbar] is close to the wrapping tag having a class sc-element. This would then be something like this:

  1. [Content:Toolbar] [Content:Title]

Repeating Templates in Razor

For Razor, just use standard C# mechanisms - specifically the foreach-loop. Here's a code example:

Category List unsorted

    @foreach(var e in List) { var Content = e.Content;
  • @Content.Toolbar @Content.Category
  • }

Note that you are looping through the List-object. Each returned thing is an Element containing a Content and a Presentation. You will also notice that this example already has a toolbar, which floats thanks to the sc-element class. You can see a live Razor-Lists with 2sxc and DNN demo here or download/experiment with this App

Tags for this feature

Error - needs admin to fix
2serve . 2invent . 2create is 2be.