Gravatar for swamcts@gmail.com

Question by swamcts, Mar 1, 2017 1:41 PM

how can i set pecific tab as default

Hi,

Currently , we are using javascript UI framework to display search page. Here we are having 3 tab of result, including "ALL",Sitecore","People", always "ALL" tab selected by default. But we want by default "sitecore" tab.

How to set default Tab instead of "All" Tab ?

Thanks Swami

Gravatar for gminero@coveo.com

Comment by gminero, Mar 3, 2017 2:57 PM

@swamcts were you able to manage?

2 Replies
Gravatar for gminero@coveo.com

Answer by gminero, Mar 1, 2017 2:59 PM

Hi Swami,

you can achieve this by referencing the attribute 'data-id' and remove the 'coveo-selected' class and add it to the target data-id of the tab you would like selected by default using Jquery as follows:

  $(document).ready(function(){
         $("[data-id='currentlyselectedtab']").removeClass('coveo-selected');
         $("[data-id='sitecoretab']").addClass('coveo-selected');
   });

you can always refer to Jquery's api documentation here,

Otherwise, you can always reorder and place the tab first under the cove-tab-section:

  <div class="coveo-tab-section">
    <a class="CoveoTab" data-id="sitecoretab" data-caption="Sitecore" data-expression="@SomeDataExpression">
    </a>
    <a class="CoveoTab" data-id="alltab" data-caption="All" data-expression="@SomeDataExpression">
    </a>
    <a class="CoveoTab" data-id="othertab" data-caption="Other" data-expression="@SomeDataExpression">
    </a>
  </div>
Gravatar for swamcts@gmail.com

Comment by swamcts, Mar 7, 2017 11:59 AM

Hi , Thanks for the response.

Ordering the tab is fine, but we don't want order but by default it should selected.

Something like below, but its not working for me.

 $(document).ready(function(){
     $("[data-id='currentlyselectedtab']").removeClass('coveo-selected');
     $("[data-id='sitecoretab']").addClass('coveo-selected');
 });
Gravatar for flguillemette@coveo.com

Answer by François Lachance-Guillemette, Mar 7, 2017 12:22 PM

According to the coveo-search-ui documentation, there is a select() method on the tab component.

To get the component instance, you need to execute the following code:

var tabIdToSelect = "YOUR TAB ID HERE";
var myTabInstance = Coveo.get(document.getElementById(tabIdToSelect), Coveo.Tab);
myTabInstance.select();

Execute this when loading the page and it should work.

You can also change the initial state just after the search interface is fully loaded using an event:

var tabIdToSelect = "YOUR TAB ID HERE";
var searchInterfaceId = "YOUR_SEARCH_INTERFACE_ID";
var searchInterface = document.getElementById(searchInterfaceId);
searchInterface.addEventListener("afterInitialization", function() {
      Coveo.state(searchInterface, "t", tabIdToSelect);
});
Ask a question