My assets - Service Portal Widget (#2030)

* Create my_assets.html

* Create my_assets.css

* Create my_assets_server_side.js

* Create README.md

Author: sumanthdosapati

Modern Development/Service Portal Widgets/My Assets/README.md

@@ -0,0 +1,22 @@
+# My Assets Widget
+
+## Overview
+Displays assets assigned to the logged-in user in a clean, responsive table.  
+Data is fetched from the `alm_asset` table using a secure server script.
+
+## Files
+- **HTML** – Defines the widget layout and table structure  
+- **Server Script** – Retrieves user-specific assets from `alm_asset`  
+- **CSS** – Adds modern, responsive styling
+
+## Features
+- Responsive table layout  
+- Record count badge  
+- Hover and gradient effects  
+- Empty state message  
+
+## Usage
+1. Navigate to **Service Portal > Widgets** in ServiceNow.  
+2. Create a new widget and paste the HTML, Server Script, Client Script, and CSS.  
+3. Save the widget and add it to your desired portal page.  
+4. The widget automatically displays assets assigned to the logged-in user.

Modern Development/Service Portal Widgets/My Assets/my_assets.css

@@ -0,0 +1,41 @@
+.my-assets-widget {
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
+  overflow: hidden;
+}
+
+.my-assets-widget .panel-heading {
+  background: linear-gradient(90deg, #0078d4, #005fa3);
+  color: #fff;
+  padding: 12px 16px;
+  font-weight: 500;
+}
+
+.my-assets-widget .panel-heading .badge {
+  background-color: #fff;
+  color: #005fa3;
+  font-weight: 600;
+}
+
+.my-assets-widget .table {
+  margin-bottom: 0;
+}
+
+.my-assets-widget .table-hover tbody tr:hover {
+  background-color: #f2f8ff;
+  cursor: pointer;
+}
+
+.my-assets-widget .asset-link {
+  font-weight: 500;
+  color: #0078d4;
+  text-decoration: none;
+}
+
+.my-assets-widget .asset-link:hover {
+  text-decoration: underline;
+}
+
+.my-assets-widget .panel-body.text-center {
+  padding: 30px;
+}

Modern Development/Service Portal Widgets/My Assets/my_assets.html

@@ -0,0 +1,45 @@
+<div class="panel panel-default my-assets-widget">
+  <div class="panel-heading d-flex justify-content-between align-items-center">
+    <h4 class="panel-title mb-0">
+      <i class="fa fa-desktop text-primary"></i> My Assets
+    </h4>
+    <span class="badge badge-primary">{{data.recordCount}} Asset(s)</span>
+  </div>
+
+  <div class="panel-body" ng-if="data.assets.length > 0">
+    <div class="table-responsive">
+      <table class="table table-hover table-striped">
+        <thead class="thead-dark">
+          <tr>
+            <th>Asset Name</th>
+            <th>Assigned To</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="asset in data.assets">
+            <td>
+              <i class="fa fa-laptop text-secondary"></i>
+              <a href="nav_to.do?uri=alm_hardware.do?sys_id={{asset.sysid}}" 
+                 class="asset-link">
+                 {{asset.display}}
+              </a>
+            </td>
+            <td>{{asset.assigned_to}}</td>
+            <td>
+              <a href="nav_to.do?uri=alm_hardware.do?sys_id={{asset.sysid}}" 
+                 class="btn btn-sm btn-outline-primary">
+                 <i class="fa fa-eye"></i> View
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="panel-body text-center text-muted" ng-if="data.assets.length == 0">
+    <i class="fa fa-info-circle fa-2x mb-2"></i>
+    <p>No assets assigned to you.</p>
+  </div>
+</div>

Modern Development/Service Portal Widgets/My Assets/my_assets_server_side.js

@@ -0,0 +1,19 @@
+(function() {
+  data.userID = gs.getUserID();
+  data.assets = [];
+
+  var gr = new GlideRecordSecure('alm_asset');
+  gr.addQuery('assigned_to', gs.getUserID());
+  gr.orderBy('display_name');
+  gr.query();
+
+  data.recordCount = gr.getRowCount();
+
+  while (gr.next()) {
+    data.assets.push({
+      display: gr.getDisplayValue('display_name'),
+      assigned_to: gr.getDisplayValue('assigned_to'),
+      sysid: gr.getUniqueValue()
+    });
+  }
+})();