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

[Sundaram0713]

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 

[sundaram080713]

hello,

To achieve this behavior with your widgets, you can use client-side communication between the Community Content Feed and Community Leaderboard widgets. Here's a step-by-step approach:

1. Community Content Feed Widget:

In the Community Content Feed widget, add logic to detect the selected forum from the dropdown. Based on whether the selected forum is a parent or sub-parent, trigger an event to communicate with the Community Leaderboard widget.

• Client Script for Community Content Feed:

api.controller = function($scope) {
    $scope.onForumChange = function(selectedForum) {
        let isParentForum = selectedForum.isParent; // Assuming your forum data has an 'isParent' property

        // Trigger custom event to communicate with Community Leaderboard widget
        const event = new CustomEvent("toggleLeaderboard", {
            detail: { visible: !isParentForum }  // Hide if it's a parent, show if it's a sub-parent
        });
        window.dispatchEvent(event);
    };
};​

In the HTML, make sure to call onForumChange when the dropdown value changes:

<select ng-model="selectedForum" ng-change="onForumChange(selectedForum)">
    <option value="" ng-repeat="forum in forums">{{forum.name}}</option>
</select>

2. Community Leaderboard Widget:

In the Community Leaderboard widget, listen for the custom event triggered by the Community Content Feed widget and show/hide the leaderboard accordingly.

• Client Script for Community Leaderboard:
  
  

api.controller = function($scope) {
    // Listen for the custom event from the Community Content Feed widget
    window.addEventListener("toggleLeaderboard", function(event) {
        const leaderboard = document.getElementById("community-leaderboard");
        leaderboard.style.display = event.detail.visible ? "block" : "none"; // Show or hide based on event data
    });
};
​

3. Same Scope and Page:

Since both widgets are on the same page and in the same scope, this approach works with client-side events, avoiding the need for server-side communication.

By using this event-based communication, you can dynamically show or hide the Community Leaderboard widget based on the user's selection in the Community Content Feed widget.

[sundaram080713 · Accepted solution]

To meet the requirement, the modification involves making the **Community Content Feed** widget and the **Community LeaderBoard** widget interact with each other using AngularJS's `$rootScope` or `$scope` events. The goal is to control the visibility of the leaderboard based on the selected forum (parent or subforum) in the dropdown of the content feed.

---

### Explanation of the Approach:
To fulfill the functionality, changes will be made to both the **Community Content Feed** and the **Community LeaderBoard** widgets so that they communicate and toggle the visibility of the leaderboard. This will be achieved by using AngularJS events, which allow the widgets to send and receive messages about which forum is selected.

### **1. Changes in the "Copy of Community Content Feed" Widget:**
- **Purpose**: The "Copy of Community Content Feed" widget will emit an event whenever the forum selection changes.
- If a **parent forum** is selected, the event will hide the leaderboard.
- If a **subforum** is selected, the event will show the leaderboard.

- **Code Explanation**:
In the `client_script` of this widget, a watcher will be added to monitor the forum selection. Based on the selected forum, the watcher will emit an event to either hide or show the leaderboard.

```javascript
$scope.$watch('c.selectedFilters.forum', function(newValue, oldValue) {
if (newValue) {
// If the selected forum is a parent forum (level 0), hide the leaderboard
if (newValue.level === 0) {
$rootScope.$broadcast('toggleLeaderboard', { showLeaderboard: false });
} else {
// If a subforum is selected, show the leaderboard
$rootScope.$broadcast('toggleLeaderboard', { showLeaderboard: true });
}
}
});
```
- **Detailed Explanation**:
- `$scope.$watch`: This watches the forum selection (`c.selectedFilters.forum`).
- If a **parent forum** is selected (where `level === 0`), the event `toggleLeaderboard` is emitted with `showLeaderboard: false`, hiding the leaderboard.
- If a **subforum** is selected, the event `toggleLeaderboard` is emitted with `showLeaderboard: true`, making the leaderboard visible.

### **2. Changes in the "Community LeaderBoard" Widget:**
- **Purpose**: The "Community LeaderBoard" widget will listen for the event emitted by the content feed widget and toggle its visibility accordingly.

- **Code Explanation**:
In the `client_script` of the "Community LeaderBoard" widget, an event listener is added to act on the `toggleLeaderboard` event and control the leaderboard's visibility.

```javascript
function($rootScope) {
var c = this;

// Initially hide the leaderboard
c.isLeaderboardVisible = false;

// Listen for the event to show/hide the leaderboard
$rootScope.$on('toggleLeaderboard', function(event, data) {
c.isLeaderboardVisible = data.showLeaderboard;
});
}
```
- **Detailed Explanation**:
- **Initial state**: The leaderboard is hidden when the page loads (`c.isLeaderboardVisible = false`).
- **Event listener**: `$rootScope.$on('toggleLeaderboard', ...)` listens for the event sent from the content feed widget.
- When the event is received, the `c.isLeaderboardVisible` value is updated based on the event data (`data.showLeaderboard`).

### **3. HTML Modification in the "Community LeaderBoard" Widget:**
- To ensure the leaderboard is only visible when `c.isLeaderboardVisible` is true, wrap the HTML content with an `ng-if` directive.

```html
<div ng-if="c.isLeaderboardVisible">
<div aria-label="{{c.gm_header}}" class="gm_leaderboard panel panel-default csm-widget widget2">
<!-- Leaderboard content -->
</div>
</div>
```
- **Explanation**:
- The `ng-if` directive ensures that the leaderboard HTML content is only rendered when `c.isLeaderboardVisible` is true, effectively hiding or showing the leaderboard based on the event triggered.

---

### Summary of How the Changes Work Together:
1. **In the "Copy of Community Content Feed" widget**:
- A watcher monitors the forum selection.
- If a **parent forum** is selected, it emits an event to hide the leaderboard.
- If a **subforum** is selected, it emits an event to show the leaderboard.

2. **In the "Community LeaderBoard" widget**:
- It listens for the event emitted by the content feed widget.
- Depending on the event (show or hide), it toggles the leaderboard’s visibility.

In this way, both widgets communicate efficiently, ensuring that the leaderboard visibility dynamically adjusts based on the user’s forum selection in the content feed.