SharePoint CSS and JavaScript Examples

Here we will discuss few SharePoint CSS examples and a few SharePoint javascript examples.

We will see below SharePoint css and javascript examples:

• SharePoint hide approve/reject button
• Redirect to a different page after adding new list items in SharePoint
• SharePoint hide edit item ribbon
• Color code SharePoint list rows
• SharePoint list open attachments in a new tab
• Assign value to RichTextbox field using JavaScript in SharePoint 2013
• CSS best practices for SharePoint
• How to display current date in SharePoint Page using JavaScript
• Display web part page in a modal dialog box using JavaScript in SharePoint
• javascript get weather

We can use the same SharePoint CSS example and SharePoint JavaScript examples in SharePoint 2013/2016/2019 also.

SharePoint CSS Examples

Below are a few SharePoint CSS examples:

SharePoint hide approve/reject button

In this section, we will discuss how to hide the approve/reject button in SharePoint from the ribbon in SharePoint Online/2013/2016.

Below is the CSS code which you can add using a script editor web part, in page where you have to hide the approve/reject button. Maybe in AllItems, EditForm page in SharePoint.

By default, in the SharePoint list you can see the Approve/Reject button like below:

<style type="text/css">    
a[id="Ribbon.ListItem.Workflow.Moderate-Large"]  
{  
display:none;  
}              
</style>

Once you insert the code, you can see the Approve/Reject button will disappear from the ribbon in the SharePoint list.

SharePoint hide edit item ribbon

Now, we will see how can we hide edit item from ribbon in the SharePoint list. The code will work in SharePoint Online/2013/2016.

Below is the SharePoint CSS code which you can add inside a script editor page in SharePoint list.

<style type="text/css">    
a[id="Ribbon.ListForm.Display.Manage.EditItem-Large"]  
{  
display:none;  
}              
</style> 

Color code SharePoint list rows

Now this SharePoint CSS example, we will see color code SharePoint list rows. We will see how to give alternate row color in the SharePoint list.

<style type="text/css">  
  
table.ms-formtable tr:nth-child(even) {background: #d3d3d3;}  
table.ms-formtable tr:nth-child(odd) {background: #e1eaf4;}  
table td.ms-formlabel,td.ms-formbody {font-weight: bold}  
table td .ms-standardheader {font-weight: bold}  
  
</style>

The above code, you can add inside a script editor web part. And you can see how the alternate row color will appear like below:

CSS best practices for SharePoint

Below are some CSS best practices to follow while using SharePoint.

Validation:
Validating your CSS is always important. This is to make sure that your CSS is error-free and is interpreted the right way in all browsers.
You can also validate through http://jigsaw.w3.org/css-validator/ URL.

Comments:
Commenting code is always a best practice while working with any language. So it is always advertisable to give a comment in CSS. You can comment like below:
/this is css style comment/

Naming:
Naming is very much important. Naming classes according to their function rather than what they will look like is a best practice and the name should be meaningful.

Compression:
It is a best practice to remove the white space from your .css fi les before you put the fi les in production. Smaller .css fi les will make your site load faster in the browser. You can use a CSS compressor like the one at the following URL to automatically remove the white space for you: http://cleancss.com.

SharePoint designer helps us to create custom CSS files.

SharePoint JavaScript Examples

Let us see a few SharePoint javascript examples.

Redirect to a different page after adding new list items in SharePoint

Now, we will see how to Redirect to a different page after adding new list items in SharePoint. The code will work in SharePoint Online/2013/2016, but the code will not work in Modern SharePoint Sites.

Below is the JavaScript code which you can add inside a script editor web part page.

<script  type="text/javascript" src="/sites/Test/Reports/Shared%20Documents/jquery-1.11.1.min.js"></script>  
  
<input type="button" value="Edit Item" id="editItem" onclick="MoveToViewPage()" />  
  
<script type="text/javascript">  
// get the item id parameter from the URL  
function urlParam (name){  
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);  
  
    return results[1] || 0;  
}  
  
function MoveToViewPage()  
{    
    window.location.href = "/sites/Test/Reports/Lists/Testing%20Environment/EditForm.aspx?ID=" + urlParam('ID') + "&Source=" + "/sites/Test/Reports/Lists/Testing%20Environment/DispForm.aspx?ID=" + urlParam('ID');  
}    
</script>

SharePoint list open attachments in a new tab

Now, in this section, we will decide how to open SharePoint list attachments in a new tab in SharePoint Online/2013/2016. We can Open list attachments in a new tab in the SharePoint list by using the below JavaScript code which you can add inside a script editor web part.

<script type="text/javascript" src="/sites/Test/Reports/Shared%20Documents/jquery-latest.js"></script>  
  
<script type="text/javascript">  
  
$(document).ready(function(){  
                $("table#idAttachmentsTable a").mousedown(function () {  
                var url=$(this).attr('href');  
                window.open(url);  
});  
});  
</script>  

Assign value to RichTextbox field using JavaScript in SharePoint 2013

Now we will see, how to assign a default value to a rich text box field using javascript in SharePoint 2013. And the form where we have the Rich text box is an InfoPath customized form.

Our InfoPath form is there inside a site page. And we have put one button ion the page and click on that button we wanted to put some default value to a rich textbox using javascript.

Once the form is customized the richtextbox becomes a <div> when you will check that in the view source. Here the id we got is from the view source of the page.

Add one script editor webpart and write the below code. Once you click on the submit then the text will appear in the Rich textbox.

<input type='button' id='123′ value='Click Me' onclick="updateListItem();"/>

<script language="javascript" type="text/javascript">
function updateListItem() {
document.getElementById(“ctl00_ctl30_g_412fea2a_5a21_4cf7_acbd_c9231e395d67_FormControl0_V1_I1_RTC8_RTI4_RT1_newRichText").innerHTML = ‘<b>Very bad day</b>';
}
</script>

This is not a great post but I just wanted to put since I was trying to set the value by using the .Value property but .innerHTML worked for me. Just note the letter case here also.

How to display current date in SharePoint Page using JavaScript

Here we will discuss how to display current date and time using javascript and jQuery in SharePoint page. We can use JavaScript/jQuery code inside a content editor web part. If you want show current date and time in SharePoint 2013/2016 page, then you can embed the code inside a script editor web part.

Here we will append today’s date in the SharePoint page using jQuery like “weekday, YYYY/MM/dd”.

For this follow below steps to display current date in SharePoint Page using JavaScript.

Edit the SharePoint page and then Add a Content Editor Web Part like below:

Now edit that Web Part and click on Click here to add new content.

After this On Ribbon under editing tools click on HTML after this On Ribbon under editing tools click on HTML Source under Format Text shown in fig.

After this one popup window is open, under this window add the following code.

<script src="/JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function strpad00(s) {
s = s + ";
if (s.length === 1) s = '0' + s;
return s;
}

$(document).ready(function () {
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var now = new Date();
var n = weekday[now.getDay()];
var currentDate = now.getFullYear() + "/" + strpad00(now.getMonth() + 1) + "/" + strpad00(now.getDate());
$('.s4-pagedescription').append("<div style='float:right'>" + n + "," + currentDate + "</div>");
});

</script>

Now Save the page and the date will appear like below:

This is how we can display today’s date in SharePoint page using JavaScript.

Display web part page in a modal dialog box using JavaScript in SharePoint

Let us see how to display web part page inside a dialog box using JavaScript in SharePoint Online or SharePoint 2013/2016.

Here we will use the JavaScript and SP.UI.ModalDialog to display a web part page in the modal dialog box in SharePoint.

Remember the page should be a web part page, it will not work for wiki pages in SharePoint.

We can use the code inside a script editor web part or inside a content editor web part in a web part page in SharePoint.

<script type="text/javascript">
function OpenDialog(dialogUrl, dialogTitle) {
var options = {
url: dialogUrl,
title: dialogTitle
};
SP.UI.ModalDialog.showModalDialog(options);
}
</script>

<a href="#" onclick="OpenDialog('https://tsinfo.sharepoint.com/sites/TSInfoClassic/SitePages/Test.aspx','My Dialog Box');">Show Modal Dialog</a>

Now when you click on the above link then Test web part page will open as a dialog box. It will appear like below:

This is how to display web part page in a modal dialog box using JavaScript in SharePoint Online or SharePoint 2013/2016.

Retrieve workflow id by using jsom in SharePoint online

Let us see how to retrieve workflow id from a list using JavaScript object model code (jsom) in SharePoint online. Here we have a list in our SharePoint Online site and into that list, we have attached a few list workflows. By using, the below code we are going to retrieve the id of the workflow whose name is “Archiving”.

In this particular example, I have added the below code inside a script editor web part which I have added inside a web part page.

<input type="button" id="btnSubmit" value="Get Workflow ID" /><br/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
bindButtonClick();
});
function bindButtonClick() {
$("#btnSubmit").on("click", function () {
getWorkflowId();
});
}

function getWorkflowId() {
SP.SOD.executeFunc("sp.js", "SP.ClientContext", function () {
SP.SOD.registerSod(‘sp.workflowservices.js’, SP.Utilities.Utility.getLayoutsPageUrl(‘sp.workflowservices.js’));
SP.SOD.executeFunc(‘sp.workflowservices.js’, "SP.WorkflowServices.WorkflowServicesManager", function () {
context = SP.ClientContext.get_current();
web = context.get_web();
workflowServicesManager = new SP.WorkflowServices.WorkflowServicesManager(context, web);

var subs = workflowServicesManager.getWorkflowSubscriptionService().enumerateSubscriptionsByList(‘4C384857-8AEF-484E-8163-FED3592E15A4’);
context.load(subs);
context.executeQueryAsync(function () {
var subEnumerator = subs.getEnumerator();
while (subEnumerator.moveNext()) {
var sub = subEnumerator.get_current();
if (sub.get_name() == ‘Archiving’) {
var templateId = ‘Workflow id: ‘+sub.get_id();
alert(templateId)
return;
}
}
},
function (sender, args) {
alert(args.get_message());
});
});
});
}
</script>

Once you Save the code and click on the button, it will display the workflow id inside an alert box like below:

This is how to retrieve workflow id by using jsom in SharePoint online Office 365.

jquery get query string in SharePoint

This SharePoint jQuery tutorial explains, how to get query string values in SharePoint 2013 using JavaScript or jQuery. We can get the query string value inside the page by using JS request utility which we can put inside a SharePoint 2013 script editor inside the page.

The request is a utility which helps to get information from a URL. We can get information like File Name, Path Name & QueryString value from the URL.

var filename= JSRequest.FileName;
var pathname = JSRequest.PathName;
var parValue= JSRequest.QueryString["par1"];

To get the values like above first we need to initialize the request like below:

JSRequest.EnsureSetup();

Here is an example where we are trying to get the query string and other information by using JSRequest.

We put the below code in a script editor web part in NewForm.aspx (Edit the page and then click on Insert Web part and then from the Category select Script editor web part under media and content category).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<SCRIPT type=text/javascript>
jQuery(document).ready(function() {
JSRequest.EnsureSetup();
var itemId = JSRequest.QueryString["Itemuid"];
alert ('Item ID: '+itemId);
var fileName = JSRequest.FileName;
alert('File Name: '+fileName);
var pathName = JSRequest.PathName;
alert ('Path Name: '+pathName);
});
</SCRIPT>

The results will appear like below:

This is how we can get query string parameter in SharePoint.

How to get dropdown text in jquery

Let us see, how we can get drop down list selected value and selected text using jQuery. I was having a requirement to get the dropdown selected text and selected value in my SharePoint online site.

Here I have put the code inside a script editor web part to get dropdown selected value using jquery in SharePoint Online.

Here I have a dropdown list which has 3 values like:

• USA
• UK
• Canada

By using jQuery we will retrieve the selected value and text of the dropdown list.

Select Country
<select id="ddlCountry">
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">Canada</option>
</select>
<input type="button" id = "btnSelectDropDownValue" value="Retrieve Dropdown Value" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSelectDropDownValue").click(function () {
var selectedText = $("#ddlCountry").find("option:selected").text();
alert (selectedText);
var selectedValue = $("#ddlCountry").val();
alert (selectedValue);
});
});
</script>

Once you click on the button it will show you the dropdown selected value and selected text in an alert box. You can see the output like below:

This code we can use to get dropdown selected value using jQuery.

javascript calendar picker

Date Picker in SharePoint will allow us to select a date from the calendar control. In this example, we will put an input box and whenever a user clicks on the input box, the date picker will appear and the user should be able to select a date from the date picker.

Add Date Picker in SharePoint using JavaScript

Open the SharePoint site and open the web part page. Edit the page, then Add a Script Editor web part from the Media and Content Category and place the below code. Now save the page.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<script>
$(function() {
$( "#fromdatepicker" ).datepicker();
});
$(function() {
$("#btnSubmit").click(function() {
var startDate = $("#fromdatepicker").datepicker("getDate");
startDate = startDate.getFullYear()+"-"+(startDate.getMonth()+1)+"-"+startDate.getDate();

alert(startDate);
});
});
</script>

Select a Date: <input type="text" id="fromdatepicker"/>
<input type="button" id="btnSubmit" value="Get Date">

Now when you click on the button, it will display the date in the alert box.

Add date picker in SharePoint 2013 using JavaScript

Let us see, how to add a date picker in SharePoint page using the SharePoint javascript object model. Here in this post, we will see how the date validation work means like the start date should not be greater than the end date. And also End should not be less than the start date.

Write the below code using the script editor web part on a web part page in SharePoint 2013/2016/Online.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<script>
$(document).ready(function() {

$( "#fromdatepicker" ).datepicker({
onClose: function( selectedDate ) {
$( "#todatepicker" ).datepicker( "option", "minDate", selectedDate );
}
});

$( "#todatepicker" ).datepicker({
onClose: function( selectedDate ) {
$( "#fromdatepicker" ).datepicker( "option", "maxDate", selectedDate );
}
});

});
</script>
From Date: <input type="text" id="fromdatepicker" />
To Date: <input type="text" id="todatepicker" />
<input type=’button’ value=’Export Data to Excel’ onclick="retrieveListItems();"/>

<script language="javascript" type="text/javascript">
function retrieveListItems() {
var startDate = $("#fromdatepicker").datepicker("getDate");
var endDate = $("#todatepicker").datepicker("getDate");
alert(startDate);
alert(endDate);
}
</script>

This is an example of javascript calendar picker.

Get Middle East prayer timing using JavaScript

I have created a simple webpart to get QATAR local paryer timing using JavaScript code in SharePoint.

Get timing using JavaScript Code in SharePoint

Step 1: Open the SharePoint Online site where you want to display the time. and then add a script editor web part into the web part page.

Step 2: Add the below JavaScript code in your project.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<script>  
    var canvas;  
    var ctx;  
    var radius;  
    $(document).ready(function () {  
        canvas = document.getElementById("canvas");  
        ctx = canvas.getContext("2d");  
        radius = canvas.height / 2;  
        ctx.translate(radius, radius);  
        radius = radius * 0.90  
        setInterval(drawClock, 1000);          
    });  
  
    function drawClock() {  
        drawFace(ctx, radius);  
        drawNumbers(ctx, radius);  
        drawTime(ctx, radius);  
    }  
  
    function drawFace(ctx, radius) {  
        var grad;  
        ctx.beginPath();  
        ctx.arc(0, 0, radius, 0, 2 * Math.PI);  
        ctx.fillStyle = 'white';  
        ctx.fill();  
        grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);  
        grad.addColorStop(0, '#333');  
        grad.addColorStop(0.5, 'white');  
        grad.addColorStop(1, '#333');  
        ctx.strokeStyle = grad;  
        ctx.lineWidth = radius * 0.1;  
        ctx.stroke();  
        ctx.beginPath();  
        ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);  
        ctx.fillStyle = '#333';  
        ctx.fill();  
    }  
  
    function drawNumbers(ctx, radius) {  
        var ang;  
        var num;  
        ctx.font = radius * 0.15 + "px arial";  
        ctx.textBaseline = "middle";  
        ctx.textAlign = "center";  
        for (num = 1; num < 13; num++) {  
            ang = num * Math.PI / 6;  
            ctx.rotate(ang);  
            ctx.translate(0, -radius * 0.85);  
            ctx.rotate(-ang);  
            ctx.fillText(num.toString(), 0, 0);  
            ctx.rotate(ang);  
            ctx.translate(0, radius * 0.85);  
            ctx.rotate(-ang);  
        }  
    }  
  
    function drawTime(ctx, radius) {  
        var now = new Date();  
        var hour = now.getHours();  
        var minute = now.getMinutes();  
        var second = now.getSeconds();  
        //hour  
        hour = hour % 12;  
        hour = (hour * Math.PI / 6) +  
            (minute * Math.PI / (6 * 60)) +  
            (second * Math.PI / (360 * 60));  
        drawHand(ctx, hour, radius * 0.5, radius * 0.07);  
        //minute  
        minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));  
        drawHand(ctx, minute, radius * 0.8, radius * 0.07);  
        // second  
        second = (second * Math.PI / 30);  
        drawHand(ctx, second, radius * 0.9, radius * 0.02);  
    }  
  
    function drawHand(ctx, pos, length, width) {  
        ctx.beginPath();  
        ctx.lineWidth = width;  
        ctx.lineCap = "round";  
        ctx.moveTo(0, 0);  
        ctx.rotate(pos);  
        ctx.lineTo(0, -length);  
        ctx.stroke();  
        ctx.rotate(-pos);  
    }  
</script>  
  
<script>  
  
    $(document).ready(function () {  
        var settings = {  
            "async": true,  
            "crossDomain": true,  
            "url": "https://aladhan.p.mashape.com/timingsByCity?city=Doha&country=Qatar",  
            "method": "GET",  
            "headers": {  
                "x-mashape-key": "4seB9mx5g0mshrkpLviV9IsQKRYNp1cZ9n8jsn70KjeMIgrBxm"  
            }  
        }  
  
        $.ajax(settings).done(function (response) {  
            console.log(response);  
            //var responseObj = JSON.parse(response);  
            var d = new Date();  
            var n = d.getHours();  
            var m = d.getMinutes();  
            m = m / 60;  
            n = n+m;  
            if (n < 6) {  
                $('.prayer_laber ').text("Fajr");  
                $('.prayer_timing').text(response.data.timings.Fajr);  
            }  
            else if (n < 11 && n > 6) {  
                $('.prayer_laber').text("Dhuhr");  
                $('.prayer_timing').text(response.data.timings.Dhuhr);  
            }  
            else if (n < 14 && n > 11) {  
                $('.prayer_laber').text("Asr");  
                $('.prayer_timing').text(response.data.timings.Asr);  
            }  
            else if (n < 16 && n > 14) {  
                $('.prayer_laber').text("Maghrib");  
                $('.prayer_timing').text(response.data.timings.Maghrib);  
            }  
            else if (n < 20 && n > 16) {  
                $('.prayer_laber').text("Isha");  
                $('.prayer_timing').text(response.data.timings.Isha);  
            }  
        });  
    });  
</script>  

The output will appear like below:

This is how to get middle east prayer timing JavaScript code.

JavaScript get weather

Let us see an example on javascript get weather or weather javascript code.

We can get current weather using JavaScript and display it on the SharePoint page. Here we will see how we can use OpenWeatherMap Weather API using JavaScript in SharePoint.

OpenWeatherMap is one of the leading digital weather information providers. The OpenWeatherMap API is free to use and it also has a paid version having more weather data and features.

OpenWeatherMap provides:

• Current weather for any geolocation
• 5-days/3 hour weather forecast
• 16-days/daily weather forecast
• Historical weather data for 6 years in the past
• Weather maps: Forecast, Historical, Current
• Relief maps
• Weather alerts
• UV index
• Network of weather stations

Get current weather javascript SharePoint

To get current weather using JavaScript SharePoint, check out the OpenWeatherMap guide to generate the API key which we will use to call.

In SharePoint, we can insert the code using a Script editor web part or a content editor web part inside a web part page.

Step 1: Open you SharePoint site and Add a Script Editor Web part in your web part page.

Step 2: Add the CSS and JavaScript file as a reference.

Step 3: Copy the below code

<script src="https://gist.github.com/lyuba/874368"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>  
<script type="text/javascript">  
    $(document).ready(function () {  
        var settings = {  
            "async": true,  
            "crossDomain": true,  
            "url": "https://api.openweathermap.org/data/2.5/weather?lat=25.2854&lon=51.5310&units=metric&appid=8419181060b4dc0a4080aca18bcd29b6",  
            "method": "GET",  
            "processData": false,  
            "contentType": false,  
            "mimeType": "multipart/form-data",  
        }  
        $.ajax(settings).done(function (response) {  
            console.log(response);  
            var data = JSON.parse(response);  
            var selector;  
            switch (data.weather[0].main) {  
                case 'Haze': $('.Windy').show(); selector = '.' + 'Windy' + '_';  
                    break;  
                case 'Cloudy': $('.Cloudy').show(); selector = '.' + data.weather[0].main + '_';  
                    break;  
                case 'Rain': $('.Rain').show(); selector = '.' + data.weather[0].main + '_';  
                    break;  
                case 'Windy': $('.Windy').show(); selector = '.' + data.weather[0].main + '_';  
                    break;  
                case 'Snow': $('.Snow').show(); selector = '.' + 'Cloudy' + '_';  
                    break;  
                case 'Mist': $('.Cloudy').show(); selector = '.' + 'Cloudy' + '_';  
                    break;  
                default: $('.Cloudy').show(); selector = '.' + data.weather[0].main + '_';  
            }  
            $(selector + 'temp').text(data.main.temp + "°");  
            $(selector + 'wind').text(data.wind.speed + "MPH");  
            $(selector + 'humidity').text(data.main.humidity + "%");  
            $(selector + 'pressure').text(data.main.pressure + "°");  
        })  
            .fail(function (response) {  
                console.log("error fecting wether data");  
  
            });  
  
    });  
</script>  
<!-- end script for weather-->

Step 4: Click on Save button and now you will get current weather in QATAR. in the SharePoint Page.

You can check the console (In Google Chrome More tools -> Developer Tools), and the output will appear like below:

This is how to get current weather using JavaScript in SharePoint Online/2013/2016/2019.

You may like following SharePoint list view tutorials:

• SharePoint jslink Examples
• SharePoint Customization Examples
• SharePoint modern list view customization example
• Create SharePoint list view
• How to hide document library in SharePoint Online
• SharePoint Online calendar web part
• How to add parent site navigation to subsite in SharePoint?

Here in this SharePoint CSS examples and SharePoint JavaScript Examples, we saw, how to hide approve/reject button from ribbon in SharePoint list. How to Redirect to a different page after adding new list items in SharePoint. How can we hide edit item ribbon in SharePoint list.

We also discussed Color code SharePoint list rows, how we can give alternative row colors in SharePoint list views. Finally, we discussed how we can open SharePoint list attachments in a new tab using JavaScript.