Sticky Notes Widget (#2502)

* Create READ Me.md

* Update and rename READ Me.md to README.md

* Add files via upload

* Add files via upload

* Update README.md

* Create HTML.html

* Create CSS-SCSS.css

* Create Client Script.js

* Create Server Side.js

* Update HTML.html

* Update Client Script.js

* Update Server Side.js

* Update README.md

Author: NayeemKaka

Modern Development/Service Portal Widgets/Sticky Notes/CSS-SCSS.css

@@ -0,0 +1,42 @@
+.sticky-notes-widget {
+  padding: 10px;
+}
+
+.sticky-note {
+  display: inline-block;
+  width: 220px;
+  min-height: 100px;
+  margin: 8px;
+  padding: 10px;
+  border-radius: 6px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  vertical-align: top;
+  font-size: 13px;
+  white-space: pre-wrap;
+}
+
+.note-toolbar {
+  text-align: right;
+  margin-bottom: 3px;
+}
+
+.note-content {
+  font-weight: 500;
+  color: #333;
+}
+
+.note-meta {
+  margin-top: 6px;
+  font-size: 11px;
+  color: #666;
+}
+
+.add-note-box {
+  margin-top: 20px;
+}
+
+.note-controls {
+  display: flex;
+  gap: 5px;
+  margin-top: 5px;
+}

Modern Development/Service Portal Widgets/Sticky Notes/Client Script.js

@@ -0,0 +1,19 @@
+api.controller=function($scope) {
+/* widget controller */
+var c = this;
+ c.add =function(){
+  c.data.action = "add";
+  c.server.update().then(function(){
+    c.data.action = undefined;
+	  c.data.newColor ="";
+    c.data.text = "";
+  })
+ }
+ c.remove =function(i){
+  c.data.i =i;
+  c.data.action = "remove";
+  c.server.update().then(function(){
+    c.data.action = undefined;
+  })
+ }
+}

Modern Development/Service Portal Widgets/Sticky Notes/HTML.html

@@ -0,0 +1,24 @@
+ <div class="container sticky-notes-widget">
+      <h4><i class="fa fa-sticky-note"></i> My Sticky Notes</h4> 
+  <div class="sticky-note" ng-repeat="n in c.data.notes track by n.sys_id"
+       ng-style="{'background-color': n.color}">
+    <div class="note-toolbar">
+      <button class="btn btn-xs btn-link text-danger" ng-click="c.remove(n.sys_id)">
+        <i class="fa fa-trash"></i>
+      </button>
+    </div>
+    <div class="note-content">{{n.text}}</div>
+    <div class="note-meta">{{n.created_on | date:'short'}}</div>
+  </div>
+     <div class="add-note-box">
+    <textarea ng-model="c.data.text" placeholder="Enter value..." class="form-control" />
+    <br>
+    <div class="note-controls">
+      <select ng-model="c.data.newColor" class="form-control input-sm">
+        <option value="#fff59d">Yellow</option>
+        <option value="#b3e5fc">Blue</option>
+        <option value="#c8e6c9">Green</option>
+        <option value="#f8bbd0">Pink</option>
+      </select>
+    <button class="btn btn-primary" ng-click="c.add()"><i class="fa fa-floppy-o"></i> Add </button>
+</div>

Modern Development/Service Portal Widgets/Sticky Notes/README.md

@@ -0,0 +1,14 @@
+## Sticky Notes Widget
+
+A Sticky Notes Widget allows users to create, view, delete and organize personal notes - just like physical sticky notes directly within Service Portal.
+
+## Pre-requisite 
+- Create new custom table Sticky Notes (u_sticky_notes)
+- Short Description - String (type)
+- Color - String (type)
+
+## Demo table
+![A test image](table.png)
+
+## Widget Output
+![A test image](demo.png)

Modern Development/Service Portal Widgets/Sticky Notes/Server Side.js

@@ -0,0 +1,34 @@
+(function() {
+if(input){
+  if (input.action == "add") {
+  	if(!input.text){
+		gs.addInfoMessage("Please enter value in text area");
+		return;
+	}
+	     var rec = new GlideRecord('u_sticky_notes'); 
+       rec.initialize();
+		   rec.u_short_description = input.text;
+			 rec.u_color = input.newColor;
+        rec.insert();
+	}
+  if (input.action == "remove") {
+	   var del = new GlideRecord('u_sticky_notes');
+        if (del.get(input.i)) {
+          del.deleteRecord();
+        }
+  }
+}
+	
+	var gr = new GlideRecord('u_sticky_notes');
+	gr.orderByDesc('sys_created_on');
+	gr.query();
+	data.notes = [];
+	while(gr.next()){
+		  data.notes.push({
+      sys_id: gr.getUniqueValue(),
+      text: gr.getValue("u_short_description"),
+      color: gr.getValue("u_color"),
+      created_on: gr.getDisplayValue("sys_created_on")
+    });
+	}
+})();