Custom404 page (#2348)

* Add custom 404 HTML page structure

* Add custom 404 page suggestion script

This script retrieves the first three characters of the page_id from the URL and suggests valid related pages based on that.

* Create css.js

* Add README for custom 404 widget

Added usage instructions and use case for custom 404 widget.

Author: raghavs046

Modern Development/Service Portal Widgets/custom404/HTML.js

@@ -0,0 +1,10 @@
+<div>
+  <h1 class="heading-message">${This page could not be found. Based on your search we have found below valid pages}</h1>
+  <div class="page-container"> <!-- Container to show valid pages.-->
+    <ul>
+      <li ng-repeat="item in data.pageArr">  <!-- List to show valid pages.-->
+        <a href = {{item.url}} target="_blank">{{item.name}}</a>
+      </li>
+    </ul>
+  </div>
+</div>

Modern Development/Service Portal Widgets/custom404/README.md

@@ -0,0 +1,15 @@
+**How to use**
+1. Add this widget to new portal page.
+2. Add the page in "sp_portal" record in 404 field.
+
+**Use Case**
+1. Some organizations do not want to show OOB 404 page having game but want to show the suggestions with correct pages.
+
+**Result**
+1. This code will search the 3 letters of page_id from URL and will suggest correct pages.
+2. The correct links will open the pages in next tab.
+
+   <img width="959" height="413" alt="404" src="https://github.com/user-attachments/assets/2480ba26-4ea3-4e12-baf8-bbf89fec548a" />
+
+
+   

Modern Development/Service Portal Widgets/custom404/css.js

@@ -0,0 +1,15 @@
+.heading-message{
+  color:red;
+}
+.page-container{
+  display: flex;
+  justify-content: space-evenly;
+  flex-direction:cloumn;
+}
+ul{ 
+  padding: 2rem;
+  list-style-type: disclosure-closed;
+}
+li{
+  padding:1rem;
+}

Modern Development/Service Portal Widgets/custom404/server.js

@@ -0,0 +1,20 @@
+(function() {
+    /*
+	This script will get the 3 characters of page_id from url and suggest valid pages.
+     */
+    data.pageArr = []; // array to store related pages
+    var pageId = $sp.getParameter('id').toString(); // get page id from url
+    // get 3 letters of page id
+    if (pageId && pageId.length() > 3)
+        pageId = pageId.substring(0, 3);
+
+    var relatedPages = new GlideRecord('sp_page');
+    relatedPages.addEncodedQuery('idLIKE' + pageId);
+    relatedPages.query();
+    while (relatedPages.next()) {
+        var tempList = {}; // temporary object.
+        tempList.name = relatedPages.getValue('title');
+        tempList.url = '/' + $sp.getValue('url_suffix') + '?id=' + relatedPages.getValue('id');
+        data.pageArr.push(tempList); // add related suggested pages to array
+    }
+})();