diff --git a/Modern Development/Service Portal Widgets/Image icon Menu/Image Menu List.png b/Modern Development/Service Portal Widgets/Image icon Menu/Image Menu List.png new file mode 100644 index 0000000000..74d8d3de54 Binary files /dev/null and b/Modern Development/Service Portal Widgets/Image icon Menu/Image Menu List.png differ diff --git a/Modern Development/Service Portal Widgets/Image icon Menu/Page content.png b/Modern Development/Service Portal Widgets/Image icon Menu/Page content.png new file mode 100644 index 0000000000..32b27ae2f8 Binary files /dev/null and b/Modern Development/Service Portal Widgets/Image icon Menu/Page content.png differ diff --git a/Modern Development/Service Portal Widgets/Image icon Menu/README.md b/Modern Development/Service Portal Widgets/Image icon Menu/README.md new file mode 100644 index 0000000000..5d4723f753 --- /dev/null +++ b/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. + + + + + + + + + diff --git a/Modern Development/Service Portal Widgets/Image icon Menu/Server.js b/Modern Development/Service Portal Widgets/Image icon Menu/Server.js new file mode 100644 index 0000000000..e6636fcda1 --- /dev/null +++ b/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; + + + +})(); + + diff --git a/Modern Development/Service Portal Widgets/Image icon Menu/client.js b/Modern Development/Service Portal Widgets/Image icon Menu/client.js new file mode 100644 index 0000000000..916047aeed --- /dev/null +++ b/Modern Development/Service Portal Widgets/Image icon Menu/client.js @@ -0,0 +1,4 @@ +api.controller=function() { + /* widget controller */ + var c = this; +}; diff --git a/Modern Development/Service Portal Widgets/Image icon Menu/iconWidgetinstance.js b/Modern Development/Service Portal Widgets/Image icon Menu/iconWidgetinstance.js new file mode 100644 index 0000000000..eb1f9292c5 --- /dev/null +++ b/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" + + }, + + + +} diff --git a/Modern Development/Service Portal Widgets/Image icon Menu/iconmenu.css b/Modern Development/Service Portal Widgets/Image icon Menu/iconmenu.css new file mode 100644 index 0000000000..97db23f1ba --- /dev/null +++ b/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; +} diff --git a/Modern Development/Service Portal Widgets/Image icon Menu/iconmenu.html b/Modern Development/Service Portal Widgets/Image icon Menu/iconmenu.html new file mode 100644 index 0000000000..d5dd3a47c7 --- /dev/null +++ b/Modern Development/Service Portal Widgets/Image icon Menu/iconmenu.html @@ -0,0 +1,25 @@ +
+
+

+ + + + {{data.imgTitle || "Image Icon Menu"}} +

+
+
+ + + {{data.item_1_TITLE}} + + + + + + {{data.item_2_TITLE}} + + + +
+
+ diff --git a/Modern Development/Service Portal Widgets/Image icon Menu/image4.png b/Modern Development/Service Portal Widgets/Image icon Menu/image4.png new file mode 100644 index 0000000000..aa81d120df Binary files /dev/null and b/Modern Development/Service Portal Widgets/Image icon Menu/image4.png differ