Is it possible to make a list within a list in 2sxc?

Question

DNN 9.3.2 / 2sxc 10.25.2

Using 2sxc Content and c# Razor templates, I'm able to create a content type with some fields and enable the list mode on the template so that I can have a list of items and manage it. This is great because it lets me have one (1) 2sxc Content module on the page and list out as much content as I need.

However, in many cases, I need a "list within a list" so that I can have a repeating list of content within a repeating list of content and manage the design through the template instead of relying on my Content Editors to write HTML. See screenshot for an example.

In this design, I have 1 module that has "List" enabled and in that module I have 3 items called "Spotlights" which are just Content items. But then in each "Spotlight", there is a list of "PRE-CONFERENCE SESSIONS" which each have a title, link, and specific style (colour) for each item. In this setup, I simply made the "PRE-CONFERENCE SESSIONS" section a DNN Editor (tinymce) and then manually edit the HTML to make the FontAwesome caret and assign a CSS class to style each accordingly (each colour is important as it indicates the type of session). This method works but is cumbersome and involves me as a developer to maintain the list as the Content Editors don't know HTML.

I know that I can break this 1 module apart into 3 modules where each Spotlight is the Header content, and then the PRE-CONFERENCE SESSIONS links are the content item, but I was hoping to keep everything contained in 1 module for ease of maintenance. I also run into other scenarios in design where a sort of "sub" (or nested) list content would be really useful.

Is it possible to do this in 2sxc? Or is there a better way of achieving this?

Answer 1

I've done something similar to this where I created an Bootstrap Accordion and then also had a nested Bootstrap Accordion within that. Here's an example, maybe it'll help. https://www.crawfordinsurancegroup.com/commercial-insurance expand the Target Markets Accordion and you'll see a nested one within it.

I used the concept of Content-Blocks for this. In the main Accordion, I added another field called AccordionItem and made it an Entity Type and the Input Type as ContentBlocks. This give you the ability to select another 2sxc entity within your content, https://www.screencast.com/t/iwCn2zmH8H

In your template, you can add a foreach to loop through the content items and render them

 @foreach(var cb in AsDynamic(Content.AccordionItem)){
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingOne">

                                <a role="button" data-toggle="collapse" data-parent="#accordion-@(Dnn.Module.ModuleID)" href="#collapse-@cb.EntityId" aria-expanded="true" aria-controls="collapseOne">
                                    <strong>@cb.Title</strong> 
                                </a>
                                <div class="panel-title"></div>
                                </div>


                                <div id="collapse-@cb.EntityId" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                                    <div class="panel-body">
                                        @Html.Raw(cb.Content) 
                                    </div>
                                </div>
                            </div>

                        }

So in my example, I'm creating new Bootstrap accordions. You can reference the fields that are part of the nested entity (cb in my case) and output them in the template as you need them. Hope this helps.