Display Incident details on potal

[1_DipikaD]

I have a requirement that incidents whose category is software need to display those details on portal.

Please guide me how can I achieve this .

Also I have created a button on portal called incident details. When i click on that button it should display those incident details.

@Ankur Bawiskar

[ritu_saluja]

Hello @1_DipikaD,

You can do this in 2 steps:
1. Create a widget
for widget server script you can use this code:

(function() {
var incidentGR = new GlideRecord('incident');
incidentGR.addQuery('category', 'Software'); // Filter by category Software
incidentGR.query();

var incidents = [];
while (incidentGR.next()) {
incidents.push({
number: incidentGR.number,
short_description: incidentGR.short_description,
description: incidentGR.description,
state: incidentGR.state,
priority: incidentGR.priority
});
}

data.incidents = incidents;
})();

client script for widget: // Client-side script (AngularJS)
$scope.incidents = data.incidents;

widget html:

<div ng-repeat="incident in incidents">
<div class="incident-details">
<h3>{{incident.number}} - {{incident.short_description}}</h3>
<p><strong>Description:</strong> {{incident.description}}</p>
<p><strong>State:</strong> {{incident.state}}</p>
<p><strong>Priority:</strong> {{incident.priority}}</p>
</div>
</div>

Step 2: Add a button
1. create a button on the portal page: <button ng-click="showIncidentDetails()">Incident Details</button>

2. To show the incident details when button is clicked write in widget client script: $scope.showIncidentDetails = function() {
// Fetch or display the incident details when the button is clicked
$scope.incidentsVisible = true; // Controls visibility
};

in widget html:

<div ng-if="incidentsVisible">
<div ng-repeat="incident in incidents">
<div class="incident-details">
<h3>{{incident.number}} - {{incident.short_description}}</h3>
<p><strong>Description:</strong> {{incident.description}}</p>
<p><strong>State:</strong> {{incident.state}}</p>
<p><strong>Priority:</strong> {{incident.priority}}</p>
</div>
</div>
</div>

3. Publish the page and the widget with new button

Please let me know if you need further help or mark my solution as accepted/helpful if it helps you