How to manage the visibility of the Community Leaderboard widget from the Community Content Feed wid

[sundaram080713]

Hello everyone,

I'm new to ServiceNow and would appreciate some guidance.

I have two widgets within the Communities scope: the Community Leaderboard widget and the Community Content Feed widget. Based on my requirements, I need to hide the Community Leaderboard when a Parent Forum is selected from the Related Forum dropdown in the Community Content Feed widget. Conversely, when a Sub-Parent Forum is selected, I want the Community Leaderboard to be displayed.

Both widgets are on the same page, placed side by side, and within the same scope.

Could anyone assist me with how to achieve this?

Please help me to solve this.

Thank you 

[Sundaram0713]

Hello,
same here facing the same issue, please let me know if you get answer.

thank you 

[Sundaram0713 · Accepted solution]

To achieve this requirement, we can modify both the Community Content Feed widget and the Community LeaderBoard widget to communicate with each other. The idea is to use AngularJS's $rootScope or $scope events to manage the visibility of the leaderboard based on the selected forum (parent or subforum) in the dropdown.

Steps to implement:

1. Modify the "Copy of Community Content Feed" Widget:

   • When a parent forum is selected, emit an event to hide the leaderboard.
   • When a subforum is selected, emit an event to show the leaderboard.

2. Modify the "Community LeaderBoard" Widget:

   • Listen for the event emitted by the content feed widget to show or hide the leaderboard.

---

1. Modify the "Copy of Community Content Feed" Widget

We'll update the select dropdown event handler in the Community Content Feed widget to emit an event to show/hide the leaderboard based on the selected forum.

In the client_script of the "Copy of Community Content Feed" widget, modify the part of the forum dropdown logic:

$scope.$watch('c.selectedFilters.forum', function(newValue, oldValue) {
    if (newValue) {
        // Check if the selected forum is a parent or subforum
        if (newValue.level === 0) {
            // Parent forum selected, emit event to hide leaderboard
            $rootScope.$broadcast('toggleLeaderboard', { showLeaderboard: false });
        } else {
            // Subforum selected, emit event to show leaderboard
            $rootScope.$broadcast('toggleLeaderboard', { showLeaderboard: true });
        }
    }
});

This modification checks the forum level and broadcasts an event using $rootScope to show or hide the leaderboard widget based on the selected forum.

---

2. Modify the "Community LeaderBoard" Widget

In the Community LeaderBoard widget, listen for the event emitted by the content feed widget and toggle the visibility of the leaderboard.

In the client_script of the "Community LeaderBoard" widget, add the following code:

$rootScope.$on('toggleLeaderboard', function(event, data) {
    // Show or hide the leaderboard based on the emitted event
    c.isLeaderboardVisible = data.showLeaderboard;
});

Now, in the HTML (template) part of the "Community LeaderBoard" widget, add a condition to show or hide the leaderboard:

<div ng-if="c.isLeaderboardVisible">
  <div aria-label="{{c.gm_header}}" id="widget2" ng-if="c.data.gm_display_enabled=='true' && !c.data.disableWidget" class="gm_leaderboard panel panel-default csm-widget widget2">
    <div class="panel-heading">
      <h2 class="panel-title">
        <div class="leaderboard-header">
          <span ng-bind="::c.gm_main_header"></span>
        </div>
        <div class="leaderboard-sub-header">
          <span ng-bind="c.gm_header"></span>
        </div>
      </h2>          
    </div>
    <div class="panel-body">
      <!-- Leaderboard Filters (timeframe, etc.) -->
      <gm-leaderboard-filters ng-if="c.filters.gm_time_frame.length > 1" filterdata="c.filters" on-timeframe-change="c.onTimeFrameChange($val)"></gm-leaderboard-filters>

      <!-- Leaderboard Table -->
      <gm-leaderboard-table ng-if="c.table.rowData.length > 0" tabledata="c.table" subject="::c.data.i18n.subject" messages="::c.data.i18n"></gm-leaderboard-table>

      <!-- No leaderboard data message -->
      <div class="emptytable" ng-if="c.table.rowData.length == 0">
        <div class="emptytablemsg">
          <span ng-bind="::c.data.i18n.noleaderboardData"></span>
          <span ng-bind="::c.data.i18n.context"></span>
        </div>
      </div>

      <!-- Button to view the full leaderboard page -->
      <button ng-if="c.showViewLeaderboardPageBtn" class="btn btn-default leadeboardpagelink" ng-click="c.navtoleaderboardPage()">
        <span ng-bind="::c.data.i18n.leaderboardpagebtn"></span>
      </button>
    </div>
  </div>
</div>

Final Notes:

• When a parent forum is selected, the leaderboard will be hidden.
• When a subforum is selected, the leaderboard will be visible again.
• The widgets communicate using AngularJS's $rootScope events.

These modifications should achieve the desired functionality for toggling the leaderboard based on forum selection. 

Let's go over the changes in a very simple and easy-to-understand way. We're making two widgets (Community LeaderBoard and Copy of Community Content Feed) communicate with each other so that the leaderboard can be hidden or shown based on what forum is selected in the content feed.

1. Changes in "Community LeaderBoard" Widget

What’s the goal here?

We want the leaderboard to show or hide based on what the user selects in the Copy of Community Content Feed widget (parent forum or subforum).

What did we change?

• We made the leaderboard widget listen for a message from the content feed widget.
• When the message says "hide", the leaderboard will disappear.
• When the message says "show", the leaderboard will become visible.

Here's the new code added to the Community LeaderBoard widget's client script:

function($rootScope) { var c = this; // Initially, the leaderboard is hidden c.isLeaderboardVisible = false; // Listen for a message from the Copy of Community Content Feed widget $rootScope.$on('toggleLeaderboard', function(event, data) { c.isLeaderboardVisible = data.showLeaderboard; // Show or hide the leaderboard based on the message }); }


function($rootScope) {
var c = this;

// Initially, the leaderboard is hidden
c.isLeaderboardVisible = false;

// Listen for a message from the Copy of Community Content Feed widget
$rootScope.$on('toggleLeaderboard', function(event, data) {
c.isLeaderboardVisible = data.showLeaderboard; // Show or hide the leaderboard based on the message
});
}

Simple Explanation:

1. What happens when the page loads?

   • At first, the leaderboard is hidden (c.isLeaderboardVisible = false).

2. What happens when the user selects a forum?

   • The Community LeaderBoard listens for an event called toggleLeaderboard.
   • If the event says "showLeaderboard: true", the leaderboard becomes visible.
   • If it says "showLeaderboard: false", the leaderboard stays hidden.

3. What does this mean?

   • The content feed widget sends a message (event) based on what forum is selected, and the leaderboard widget listens to that message to decide whether to show or hide itself.

The change in the HTML (template) of Community LeaderBoard:

<div ng-if="c.isLeaderboardVisible">
<!-- This part stays the same, it just wraps everything inside the ng-if to hide/show it -->
<div aria-label="{{c.gm_header}}" class="gm_leaderboard panel panel-default csm-widget widget2">
<!-- Your leaderboard content here -->
</div>
</div>

• ng-if="c.isLeaderboardVisible": This means the leaderboard only appears if c.isLeaderboardVisible is true. If it's false, the leaderboard is hidden.

---

2. Changes in "Copy of Community Content Feed" Widget

What’s the goal here?

When the user selects a parent forum, we want to hide the leaderboard. When the user selects a subforum, we want to show the leaderboard.

What did we change?

• We added a watcher in the content feed widget that looks at what forum is selected.
• When a parent forum is selected, we send a message to hide the leaderboard.
• When a subforum is selected, we send a message to show the leaderboard.

Here's the new code added to the Copy of Community Content Feed widget's client script:

$scope.$watch('c.selectedFilters.forum', function(newValue, oldValue) {
if (newValue) {
// If a parent forum is selected, hide the leaderboard
if (newValue.level === 0) {
$rootScope.$broadcast('toggleLeaderboard', { showLeaderboard: false });
} 
// If a subforum is selected, show the leaderboard
else {
$rootScope.$broadcast('toggleLeaderboard', { showLeaderboard: true });
}
}
});

Simple Explanation:

1. What does the watcher do?

   • It watches what forum is selected in the content feed widget.
   • It checks if the selected forum is a parent or a subforum.

2. If a parent forum is selected:

   • The watcher sends a message saying "hide the leaderboard" (showLeaderboard: false).

3. If a subforum is selected:

   • The watcher sends a message saying "show the leaderboard" (showLeaderboard: true).

---

Summary of How Everything Works Together:

1. In the "Copy of Community Content Feed" widget:

   • A watcher keeps an eye on which forum is selected.
   • If the user selects a parent forum, it tells the leaderboard to hide.
   • If the user selects a subforum, it tells the leaderboard to show.

2. In the "Community LeaderBoard" widget:

   • It listens for these messages (events) from the content feed widget.
   • When it gets the message to hide, the leaderboard disappears.
   • When it gets the message to show, the leaderboard appears.

In this way, the content feed widget controls whether the leaderboard is visible or hidden, based on the user's selection of parent or subforum.