Servicenow portal widget customization

abhi56 — Fri, 13 Dec 2024 05:44:13 GMT

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>

<div class="tile-container">


<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>

<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>

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

</sp-panel>

on click of different tiles different widget or different list will

Re: Servicenow portal widget customization

Ravi Gaurav — Fri, 13 Dec 2024 05:50:35 GMT

Hi @abhi56

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

<sp-panel>

<div class="tile-container">

<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>

<div class="widget-content" ng-if="currentView === 'active'">

<sp-widget widget="data.active_widget"></sp-widget>
</div>

<div class="widget-content" ng-if="currentView === 'closed'">

<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

question Servicenow portal widget customization in Developer forum

Servicenow portal widget customization

Re: Servicenow portal widget customization