Input type = number, remove the arrow at the end

Input type = number, remove the arrow at the end

Example:

Without class

With class

<style> .no-arrow::-webkit-outer-spin-button, .no-arrow::-webkit-inner-spin-button { -webkit-appearance: none; } </style> <input type="number" /> <input type="number" class="no-arrow" />

Online status when working from home !! with Python Script

Run this program and your cursor will move regularly enough to keep your online status when working from home!

//install PIP, you need to type into the terminal

curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
python get-pip.py

pip --version

// Is used to control the mouse and keyboard.

pip install pyautogui

//Code to move mouse every 2 second of sleep.. moveRel(x,y) -- move by pixel

import pyautogui;

import time;

while True:

    pyautogui.moveRel(0, 10)

    time.sleep(2)

Sharepoint Online: Read user profile details.

Read current login user profile details in Sharepoint Online.

function getUserProfile(){ var urlString = _spPageContextInfo.webAbsoluteUrl + "/_api/sp.userprofiles.peoplemanager/GetMyProperties"; var call = $.ajax({ url: urlString, type: "GET", dataType: "json", headers: { Accept: "application/json;odata=verbose" } }); call.done(function (data,textStatus, jqXHR){ var Name = data.d.DisplayName; var email = data.d.Email; var oneUrl = data.d.PersonalUrl; var imgUrl = data.d.PictureUrl; var jobTitle = data.d.Title; var profUrl = data.d.UserUrl; }); call.fail(function (jqXHR,textStatus,errorThrown){ alert("Error retrieving Tasks: " + jqXHR.responseText); }); }//getUserProfile

Application lifecycle management (ALM) of SPFx Client Side Web Part

 

Dropdown list with multi-select checkbox

 

JavaScript

let checkList = document.getElementById('ddList1'); checkList.getElementsByClassName('anchor')[0].onclick = function(evt) { if (checkList.classList.contains('visible')) checkList.classList.remove('visible'); else checkList.classList.add('visible'); }

CSS Style

.dropdown-check-list { display: inline-block; } .dropdown-check-list .anchor { position: relative; cursor: pointer; display: inline-block; padding: 5px 50px 5px 10px; border: 1px solid #ccc; } .dropdown-check-list .anchor:after { position: absolute; content: ""; border-left: 2px solid black; border-top: 2px solid black; padding: 5px; right: 10px; top: 20%; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .dropdown-check-list .anchor:active:after { right: 8px; top: 21%; } .dropdown-check-list ul.items { padding: 2px; display: none; margin: 0; border: 1px solid #ccc; border-top: none; } .dropdown-check-list ul.items li { list-style: none; } .dropdown-check-list.visible .anchor { color: #0094ff; } .dropdown-check-list.visible .items { display: block; }

HTML

<div id="ddList1" class="dropdown-check-list" tabindex="100"> <span class="anchor">Select Items</span> <ul class="items"> <li><input type="checkbox" />Item 1</li> <li><input type="checkbox" />Item 2</li> <li><input type="checkbox" />Item 3</li> <li><input type="checkbox" />Item 4</li> <li><input type="checkbox" />Item 5</li> <li><input type="checkbox" />Item 6</li> <li><input type="checkbox" />Item 7</li> </ul> </div>

Style hr tag with CSS

The HTML <hr> tag represents a Horizontal-rule and its miles used for web page smash thru line. It creates a horizontal line, which makes a person recognize that there's a quit of the web page or a sentence smash.
We also can layout the hr (horizontal-rule) tag to create an appealing user interface.

Following are the 2 CSS style for reference

Style 1:

---

hr.style-1 { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gradient(left, #ccc, #333, #ccc); background-image: -o-linear-gradient(left, #ccc, #333, #ccc); }

Style 2:

---

hr.style-2 { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

Style 3:

---

hr.style-3 { height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } hr.style-3:before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; }

SharePoint REST API with fetch().then() and Ajax()

Using ajax

$.ajax({ url: "https://mysite.sharepoint.com/_api/web/lists/getbytitle('list')/items(" + id + ")", method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: function (data) { console.log(data.d.results); } });

Using fetch() and then()

payload = { method: 'GET', headers: { "Accept": "application/json; odata=verbose" }, credentials: 'same-origin' // or credentials: 'include' } fetch("https://mysite.sharepoint.com/_api/Web/Lists/GetByTitle('list')/items?$select=ID,Title", payload) .then(response => response.json()) .then((data)=>{ console.log(data.d.results) })