SharePoint CSS and JavaScript Examples

Here we will discuss few SharePoint CSS examples. We will see, how to hide the approve/reject button from the SharePoint list view page ribbon, how to change the list save button to redirect the user to a different page using JavaScript in SharePoint. Also, we will discuss how to hide the edit item button in the SharePoint list.

We will also disucss how to change the color of row items in the SharePoint list view and how to open attachments in a new tab in SharePoint Online list. We can use the same SharePoint CSS example codes in SharePoint 2013/2016/2019 also.

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.

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 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:

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.

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.

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.

You may like following SharePoint list view tutorials:

• SharePoint List View Threshold: Your FAQs Answered
• Change the SharePoint List View into JQuery News Ticker Using JS Link CSR
• SharePoint 2013 jslink list view examples: Add header and footer to list view web part using JSLink in SharePoint Online/2013/2016
• Customize list view using jslink in SharePoint 2013/2016/Online
• SharePoint 2016 List View Auto Indexing Automatic Index Management
• Change width of list view column in SharePoint 2013 using SharePoint designer 2013
• Show paging at top in list view web part SharePoint 2013 Online using jQuery
• Steps to freeze header row for title in SharePoint 2013 List view or document Library on scrolling using jQuery
• Remove hyperlink from title column in SharePoint 2010 list view
• Change default list view style using CSS in SharePoint Online/2016/2013

Here in this SharePoint css 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 about 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.