Image Icon Menu Item Widget

Modern Development/Service Portal Widgets/Image icon Menu/README.md

@@ -0,0 +1,36 @@
+# contribution
+
+Developed a custom Service Portal widget named "Image Icon Menu" to display Quick Links.
+This widget features icon-based navigation for key actions such as "Rewards & Recognition" and "Knowledge Article Creation". 
+
+
+Function:
+-----------
+
+The widget displays a customizable image-based icon menu with links to various resources like "Rewards & Recognition" or "Knowledge Article Creation." Menu items are dynamically populated based on configuration.
+
+Widget Structure:
+--------------------
+
+The widget is composed of the following components:
+
+HTML template for structure - Dynamically renders up to 2 menu items, each showing: An image (img), A title (span), A hyperlink which Opens the target link.
+
+CSS for styling - Applies flexbox to align icons and titles, Uses brand color (#01b8f2) and bold font for titles.
+
+Client-side script for interactive behavior
+
+Server-side script for backend data handling.Populates data object with:
+
+Header image and title.
+
+Titles, images, URLs, and targets for up to 2 menu items, based on widget options.
+
+
+
+
+
+
+
+
+

Modern Development/Service Portal Widgets/Image icon Menu/Server.js

@@ -0,0 +1,42 @@
+//Serverside code for Menu Item -
+
+
+
+(function() {
+
+
+    var userID = gs.getUserID(); //Logged in user 
+    var gr = new GlideRecord('sn_hr_core_profile');
+    gr.addQuery('user', userID);
+    gr.query();
+
+    if (gr.next()) {
+        data.saltype = gr.getValue('employee_class').toString();
+        console.log(data.saltype);
+    }
+
+    // Widget Header Stuff
+
+    data.imgImage = options.header_image;
+    data.imgTitle = options.header_title;
+
+    // Menu Item 1
+
+    data.item_1_TITLE = options.item_1_title;
+    data.item_1_IMG = options.item_1_img;
+    data.item_1_URL = options.item_1_url;
+    data.item_1_TARGET = options.item_1_target;
+
+
+    // Menu Item 2
+
+    data.item_2_TITLE = options.item_2_title;
+    data.item_2_IMG = options.item_2_img;
+    data.item_2_URL = options.item_2_url;
+    data.item_2_TARGET = options.item_2_target;
+
+
+
+})();
+
+

Modern Development/Service Portal Widgets/Image icon Menu/client.js

@@ -0,0 +1,4 @@
+api.controller=function() {
+  /* widget controller */
+  var c = this;
+};

Modern Development/Service Portal Widgets/Image icon Menu/iconWidgetinstance.js

@@ -0,0 +1,53 @@
+{
+      "header_image": {
+            "value": "image_icon.png",
+            "displayValue": "image_icon.png"
+      },
+      "header_title": {
+            "value": "Quick Links",
+            "displayValue": "Quick Links"
+      },
+
+
+      "item_1_title": {
+            "value": "Request Knowledge Articles",
+            "displayValue": "Request Knowledge Articles"
+      },
+      "item_1_img": {
+            "value": "request_ka_icon.png",
+            "displayValue": "request_ka_icon.png"
+      },
+      "item_1_url": {
+            "value": "?id=sc_cat_item&sys_id=657498bf1b00c5d0fd4899f4bd4bcb1e",
+            "displayValue": "?id=sc_cat_item&sys_id=657498bf1b00c5d0fd4899f4bd4bcb1e"
+      },
+
+
+      "item_1_target": {
+            "value": "_blank",
+            "displayValue": "_blank"
+      },
+      "item_2_target": {
+            "value": "_blank",
+            "displayValue": "_blank"
+      },
+
+
+
+      "item_2_title": {                                                       
+            "value": "Rewards & Recognitions",
+            "displayValue": "Rewards & Recognitions"
+      },
+      "item_2_img": {
+            "value": "achv_icon.png",
+            "displayValue": "achv_icon.png"
+      },
+      "item_2_url": {
+            "value": "https://xyz.achievers.com/recent_activity",
+            "displayValue": "https://xyz.achievers.com/recent_activity"
+
+    },
+
+
+
+}

Modern Development/Service Portal Widgets/Image icon Menu/iconmenu.css

@@ -0,0 +1,20 @@
+.header-image, .image-icon-item {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+  margin-right: 1rem;
+}
+
+.header-title {
+  font-size: 20px;
+}
+
+a.list-group-item {
+  display: flex;
+  align-items: center;
+}
+
+.image-icon-title {
+  color: #01b8f2;
+  font-weight: bold;
+}

Modern Development/Service Portal Widgets/Image icon Menu/iconmenu.html

@@ -0,0 +1,25 @@
+<div class="panel b panel-default">
+  <div class="panel-heading">
+    <h4 style="margin-top: 0; margin-bottom: 0;">
+      <span ng-if="::data.imgTitle">
+        <img ng-src="{{data.imgImage}}" class="header-image" />
+      </span>
+      <span class="header-title">{{data.imgTitle || "Image Icon Menu"}}</span>
+    </h4>
+  </div>
+  <div class="list-group">
+    <a class="list-group-item no-border" href="{{data.item_1_URL}}" target="{{data.item_1_TARGET}}">
+      <img ng-src="{{data.item_1_IMG}}" class="image-icon-item" />
+      <span class="image-icon-title">{{data.item_1_TITLE}}</span>
+    </a>
+
+
+    <a class="list-group-item no-border" href="{{data.item_2_URL}}" target="{{data.item_2_TARGET}}">
+      <img ng-src="{{data.item_2_IMG}}" class="image-icon-item" />
+      <span class="image-icon-title">{{data.item_2_TITLE}}</span>
+    </a>
+
+
+  </div>
+</div>
+