Servicenow portal widget customization

[Community Alums]

I want to create a widget which will show me the tiles of active incident and closed incident ,i saw post in community that create tab with the same functioanlity but my frontend is different i am not able to call the widget from the html part 

My html:

<sp-panel>
<!-- Tile Container -->
<div class="tile-container">

<!-- Active Requests Tile -->
<div class="tile" ng-click="toggleView('active')" ng-class="{'active-tile': currentView === 'active'}">
<h3>Active Requests</h3>
<p>View all active requests that you opened or that were opened on your behalf.</p>
</div>

<!-- Closed Requests Tile -->
<div class="tile" ng-click="toggleView('closed')" ng-class="{'active-tile': currentView === 'closed'}">
<h3>Closed Requests</h3>
<p>View all closed requests that you opened or that were opened on your behalf.</p>
</div>

</div>

<!-- Display content based on the selected view -->
<div class="widget-content" ng-if="currentView === 'active'">
<sp-widget widget="data.all_active"></sp-widget>
</div>

<div class="widget-content" ng-if="currentView === 'closed'">
<sp-widget widget="data.all_closed"></sp-widget>
</div>

</sp-panel>

on click of different tiles different widget or different list will

[Ravi Gaurav · Accepted solution]

Hi @Community Alums 

Ensure that the widget references in your <sp-widget> tags match the objects in your server script's data.

<sp-panel>
<!-- Tile Container -->
<div class="tile-container">
<!-- Active Requests Tile -->
<div class="tile" ng-click="toggleView('active')" ng-class="{'active-tile': currentView === 'active'}">
<h3>Active Requests</h3>
<p>View all active requests that you opened or that were opened on your behalf.</p>
</div>

<!-- Closed Requests Tile -->
<div class="tile" ng-click="toggleView('closed')" ng-class="{'active-tile': currentView === 'closed'}">
<h3>Closed Requests</h3>
<p>View all closed requests that you opened or that were opened on your behalf.</p>
</div>
</div>

<!-- Display content based on the selected view -->
<div class="widget-content" ng-if="currentView === 'active'">
<!-- Ensure 'data.active_widget' is properly configured in your server script -->
<sp-widget widget="data.active_widget"></sp-widget>
</div>

<div class="widget-content" ng-if="currentView === 'closed'">
<!-- Ensure 'data.closed_widget' is properly configured in your server script -->
<sp-widget widget="data.closed_widget"></sp-widget>
</div>
</sp-panel>

and Add a corresponding client controller to manage the currentView variable and handle view toggling:

function($scope) {
$scope.currentView = 'active'; // Default view

$scope.toggleView = function(view) {
$scope.currentView = view;
};
}

and Define the widgets in your server script to match the widget attribute in your HTML. For example:

(function() {
data.active_widget = $sp.getWidget('widget_id_for_active_incidents', {
// Pass any additional parameters if needed
});

data.closed_widget = $sp.getWidget('widget_id_for_closed_incidents', {
// Pass any additional parameters if needed
});
})();

The above data is from the recent question asked on Community