1

I have a search results display template for a video library. Each video has a category (DiscussionCategory), a Chapter (CustomDTListChapter) a section (CustomDTListSection) and the title itself. My control has a set of images for each category, once an image is clicked a list of chapters are displayed for that category (static ul).

Images

      <div class="vidCatIcons">
                    <a href="#" class="icon"><img src="./././3/SiteAssets/Instructional%20Videos/images/home/slider/onenote-icon.png" class="onenote" id="OneNote" alt="slider image" ><!--4--></a> 
 </div>

Chapters

                    <!-- Word -->
                    <li class="li_word" style="display:none;"><a href="#sections" id="1- GETTING ACQUAINTED WITH WORD" class="showChap">CHAPTER  1: GETTING ACQUAINTED WITH WORD</a></li>
                    <li class="li_word" style="display:none;"><a href="#sections" id="2- CREATING BASIC DOCUMENTS" class="showChap">CHAPTER  2: CREATING BASIC DOCUMENTS</a></li>

enter image description here

With this list of chapters, if one is clicked it should display the sections and title (item template) for each chapter. enter image description here

I have my setting for the display template search results to display 50 items, however I only get the first 50 items, it will not iterate through the list to find the results matching the chapter selected.

Item Template

    var thisChap = $getItemValue(ctx, "CustomDTListChapter");
    var thisSec = $getItemValue(ctx, "CustomDTListSection");
    var thisTitle = $getItemValue(ctx, "Title");
    var thisPath = $getItemValue(ctx, "Path");

    AddPostRenderCallback(ctx, function () {

        $(".showChap").click(function(){
            $(".chapters").hide();
            $(".sections").show();
            thisID = this.id;   //Get ID of Chapter Clicked


            if(thisChap == thisID) {     //Check if Chapter Clicked ID matches an item chapter from the list
                $(".sections").append("<li><a href='" + thisPath + "'>" + thisSec + " - " + thisTitle + "</a></li>");
            }
        });
    });


    _#-->


    <div id="Item_Chapters">
    </div><!-- End Item_Chapters -->


<!--#_ 
    } 
_#-->
</div><!-- End Item Videos -->

Control Template

<ul class="sections">
                <div class="RenderedItems"> _#= ctx.RenderGroups(ctx) =#_ </div>
            </ul>
  • Would it be possible to use {page.Myfield} to filter by the Chapter and that way only the sections related to that chapter is displayed? if so, does anyone know how to use that in a display template or use it in the Query to where it waits for the chapter to be selected before it filters? – SpGurlz Jul 7 '16 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.