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>
Improve this question
1
  • 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, 2016 at 16:32

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.