Modify 'Recent & Popular Items' widget to show custom lists

[Bruler1230]

Hello,

On my service portal, i would like to have a widget that is tabbed like the Recent & Popular Items widget, except show My Requests, Popular knowledge articles, Wishlist items, etc. instead of recent items and popular items. Does anyone have any ideas on how i could modify this widget to work this way? Or any other ideas? I know this could potentially be a lot of work so i am setting my expectations low. But any help towards this goal is appreciated. 

Thanks!

[Justin77]

Sorry for delayed response!  Yes, if you provide the HTML and CSS I can tell you where to change certain styles.

[Bruler1230]

Here you go....basically, i want to be able to change the color of the 'active' tab, as well as the inactive tabs. And possibly the hover over color. Right now, the active tab is white, and the inactive tabs are using the steelblue color that i defined.

thanks

<div class="panel panel-default">
  
  <div ng-if="data.tabs.length == 0">
    <nav class="navbar navbar-light bg-light" style="margin-bottom:0px">
      <p class="navbar-text text-center" style="float:none;">
        No data to display.
      </p>
    </nav>
  </div>
  
  <div ng-if="data.tabs.length > 0">
    
    <ul role="tablist" class="nav nav-tabs" >
      <li role="presentation" class="nav-item" ng-class='{active:tab.id == data.tab}' ng-repeat="tab in data.tabs">
        <a role="tab" class="nav-link" ng-click="c.setTab(tab)" data-toggle="tab">
          {{tab.label}}
        </a>
      </li>
    </ul>

    <div class="tab-content">
      <div role="tabpanel" id="{{tab.id}}" class="tab-pane" ng-class='{active:tab.id == data.tab}' ng-repeat="tab in data.tabs">
        <div class="form-group row">
          <div ng-class="{'col-md-9':tab.enable_search == true, 'col-md-12':tab.enable_search == false}">
            <div class="instructions" ng-if="tab.show_instructions" ng-bind-html="tab.instructions"></div>  
          </div>
          <div class="col-md-3" ng-if="tab.enable_search == true">
            <div class="input-group input-group-rounded p-x-sm p-t-xs">
              <input type="text" class="form-control" placeholder="{{tab.placeholder}}" ng-model="c.data.query" ng-keyup="$event.keyCode == 13 ? c.search(tab) : null"/>
              <span class="input-group-btn">
                <button name="search" type="submit" class="btn btn-info btn-search" ng-click="c.search(tab)">
                  <span class="glyphicon glyphicon-search"></span>
                </button>
              </span>
            </div>
          </div>
        </div>

        <div class="panel-body b-t" ng-if="tab.filters.length > 0">
          <div role="group" class="btn-group" aria-label="Filters">
            <button type="button" class="btn btn-default" ng-class='{active: filter.active}' ng-click="c.setFilter(tab, filter.condition)" ng-repeat="filter in tab.filters">
              {{filter.label}}
            </button>
          </div>
        </div>

        <div ng-if="!loadingData">
          <sp-widget widget="tab._widget"></sp-widget>  
        </div>
        
      	<div class="alert alert-info alert-loadingData" ng-if="loadingData">
          <fa name="spinner" spin="true"></fa> ${Loading data}...
        </div>

      </div>
    </div>

  </div>
  
</div>

.panel {
margin-bottom: 0px;
}

.instructions {
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}

.alert-loadingData {
margin: 1rem; 
}

.p-x-sm {
padding-right: 10px;
padding-left: 10px;
}

.p-t-xs {
padding-top: 4px;
}

.nav-link {
color: white;
}

.nav-item {
background-color: steelblue;

}


.nav-tabs {
color: black;
}

[Justin77]

So to change the styles of the active tab, your CSS selector will be: "li.active" so your CSS will be:

li.active {
 background: pink;
}

and to modify the hover, you use ".nav-item:hover", so the CSS will be:

.nav-item:hover {
 background: pink;
}

[supriya2]

Hi,

I have a requirement similar.Can you share your server side script.

My requirement is to show all categories in tabs and display catalog items below based on the category selected.

Please help.