Filter Tabs on end user page

Tracy DeLaCroix asked on December 4, 2019 02:57

Hello!

I am trying to get the same functionality as this page https://www.clarionmedical.com/en-CA/Events

With the tab menu showing the different division and filtering based on the Division Name.

I have the new events in folders but I can't figure out how to get it to reference the folder name as the "division name" for the tabs

This is the code I am using in Content Before and After

<ul class="tabs row align-center hide-for-small-only events-tabs" data-tabs="4h379e-tabs" id="eventsTabList" >

<li class="tabs-title is-active" role="presentation">

  <a href="#eventsDataRpt" onclick=ShowHideDivisionEvent('');

  aria-selected="true" role="tab" aria-controls="view-all" id="view-all-label">{$ViewAll$}</a></li>

</ul>

I can't insert the screen shot of the tree. But, I want it to pick the "Division Name" in the Event and Use the tabs to filter them. And I want the tab namess to pull from the folder names the events are in (or I can code it manually but I need to help getting started.) Any help would be greatly appreciated. I have gotten very lost in the templates, page types, transformations etc... I am spinning!

filter tabs folder

Recent Answers

Brenden Kehren answered on December 4, 2019 15:37

In this case, the simple way is to set up several repeaters on your page template.

One which retrieves the "folders" and their names to generate the tab index. Set the index ID to the DataIndex.

Then setup another repeater with a path specific to the first folder.

Then setup another repeater with a path specific to the second folder.

Etc, etc.

It may not be the most efficient but it's the quickest and could be efficient if you set up caching on those web parts.

2 votesVote for this answer Mark as a Correct answer