SharePoint Customization Examples

In this SharePoint customization tutorial, where you will see a lot of SharePoint customization examples.

  • How to hide new item button in SharePoint list
  • How to remove search box from SharePoint list
  • How to hide save button from sharepoint ribbon
  • How to remove time from sharepoint calendar view
  • sharepoint rename save button
  • sharepoint online hide browse and page tab
  • sharepoint hide approve/reject button
  • SharePoint online back to top button

SharePoint Customization Examples

Let us discuss a few SharePoint customization examples.

1. SharePoint list hide new item button

Let us see, how to hide new item button in SharePoint list.

By default in the list or SharePoint document library the +new item or edit this list link will appear like below:

SharePoint list hide new item button
SharePoint list hide new item button

We can hide new item or edit this list in SharePoint without using JavaScript or jQuery code.

Follow the below steps to hide new item or edit this list in sharepoint.

Open your SharePoint list or document library and then edit the page. And then edit the list web part properties like below:

sharepoint online list hide new item button
sharepoint online list hide new item button

Then in the properties box, select the Toolbar Type as No Toolbar as shown in the fig below:

hide add new item in sharepoint list view
how to hide new button in sharepoint online

Then click on OK and Stop editing the page, the links will disappear like below:

hide new item or edit this list in sharepoint 2013
hide new item or edit this list in sharepoint 2013

This way you can hide new item or edit this list in sharepoint 2013.

Read: sharepoint column formatting json examples

2. Remove search box from SharePoint list

Let us see, how to remove search box from sharepoint list.

Let us see, how to show or hide the small search box which appears in the list or document library in SharePoint 2013.

By using this search box you can search for items or documents from the particular list or document library. In the same way, we can hide search box from the list or document libraries in SharePoint 2016 or SharePoint Online.

By default the search box in a SharePoint list or library appears like below:

remove search box from sharepoint list
Show hide Search box in SharePoint 2013 list or document library

If you want to hide this search box, then edit the page and then edit the web part like below:

sharepoint 2016 hide search box
Show hide Search box in SharePoint 2013 list or document library

This will open the web part properties dialog box in the right-hand side. From there List views go to the Miscellaneous section. From there Uncheck the checkbox “Display search box” as shown in the fig below:

remove search box from sharepoint library
remove search box from sharepoint library

Click on OK and the search box will disappear like below:

remove search box from sharepoint list
remove search box from sharepoint list

This is how to hide the search box in the SharePoint 2013/2016/2019 or SharePoint Online list or document library.

3. Hide save button from SharePoint ribbon

Let us see how to hide save button from sharepoint ribbon.

We can hide the save button from the ribbon in SharePoint 2013 list form using JavaScript and CSS.

We have a SharePoint list where we have customized the input form using InfoPath. And in that customized InfoPath form we have a custom Save button and we are saving the item from the default data connection. This button also has some validation rules.

So we do not want any user to insert an item by clicking on the Ribbon Save button. They should only be able to save through our Submit button which was presented inside the InfoPath form.

You can disable the Save button from the InfoPath form submit properties. But we do not want to show the Save button at all. Be default the submit button appears like below:

hide save button from sharepoint ribbon
hide save button from sharepoint ribbon

We have written the JavaScript and CSS code to hide the Save button. For this Edit the page and then Insert a Script editor web part into it. Then write the below code inside the script editor web part and save the page.

<script type=”text/javascript”>
function hideEdit() {
var edit = document.getElementById(“Ribbon.ListForm.Edit.Commit.Publish-Large”);
edit.style.display = “none”;
}
_spBodyOnLoadFunctionNames.push(“hideEdit”);
</script>

Once you will Save the Save button will be hidden as shown in the fig below:

Hide Save button in New and Edit form in SharePoint 2013 list
hide save button from sharepoint ribbon

This is how to hide save button from SharePoint ribbon.

4. Remove time from sharepoint calendar view

Here we will discuss how to remove time from All Events view in Calendar list App in SharePoint 2013 online. In Calendar list, there is two columns name as Start Time & End Time and both are Date and Time column datatype.

By default when you create an event then it will appear like below where Start and End Time will have a value that contains the Date as well as Time. But according to one of my requirement user does not need the time, only they required the date.

Below is the SharePoint Online/2013 list which has the Start Time and End Time column.

remove time from sharepoint calendar view
remove time from sharepoint calendar view

There is no direct approach to remove the time from the inbuild columns. So I have created two new calculated columns for both Start Time and End Time.

Open your SharePoint Online calendar list, go to the list settings page, then Create the column to add the column.

Give a Name for the Column and then choose the Column type as Calculated Column and write the formula as:

=TEXT([Start Time],” MM/DD/YYYY”) and choose the Return Type as Date and Time. And then Choose the Date and Time Format as “Date Only”.

remove time from calendar view sharepoint 2013
remove time from calendar view sharepoint 2013

Similarly create another column for End Time as well. See fig below: The formula will be:
=TEXT([End Time],”MM/DD/YYYY”)

remove time from calendar view sharepoint online
remove time from calendar view sharepoint online

Now open the “All Events” view and deselect both “Start Time” & “End Time” columns. And select the two calculated columns that we have just created.

In my case, the column names are “Begin Time” and “Finish Time”.
Now when you open the “All Events” view you will be able to see only dates, not the time. see fig below:

SharePoint 2013 Online Remove Time from All Events Calendar view
SharePoint 2013 Online Remove Time from All Events Calendar view

This is how to remove time from SharePoint 2013 Online Calendar view.

5. SharePoint change save button to submit

Let us discuss, sharepoint rename save button or how to change save button to submit in SharePoint.

Here we are trying to rename Save to Submit and Cancel to Go Back through the script in SharePoint list form.

Using JavaScript

Below, is the JavaScript code to rename the SharePoint list form, Save and Cancel button which you can put in a script editor web part in the list forms.

Edit the newForm.aspx or editForm.aspx SharePoint list form and insert a script editor web part or content editor web part and then add the below code.

<script type="text/javascript">
function changeButtonText()
{
var inputs = document.getElementsByTagName("input");
for(i = 0; i<inputs.length; i++)
{
if(inputs[i].type == "button" && inputs[i].value == "Save")
{
inputs[i].value = "Submit";
}
if(inputs[i].type == "button" && inputs[i].value == "Cancel")
{
inputs[i].value = "Go Back";
}
}
}
_spBodyOnLoadFunctionNames.push("changeButtonText()");
</script>

Using jQuery

Below is the jQuery code to rename the SharePoint list form the Save or Cancel button using jQuery in SharePoint 2013/2016/Online.

Edit the newForm.aspx or editForm.aspx SharePoint list form and insert a script editor web part or content editor web part and then add the below code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function()
{
$("input[value$='Save']").attr('value', "Submit");
$("input[value$='Cancel']").attr('value', "Go Back");
});
</script>

Now if you can see it will appear like below:

SharePoint change save button to submit
SharePoint change save button to submit

Here, we learned how to rename Save or Cancel button text on SharePoint 2013/2016/Online List Forms?

6. SharePoint online hide browse and page tab

Let us see, how to hide the BROWSE and PAGE tab which comes in the ribbon in the SharePoint Online office 365 site or SharePoint 2013/2016/2019.

By default the BROWSE and PAGE tab comes in the ribbon-like below:

sharepoint 2013 hide browse and page tab
sharepoint 2013 hide browse and page tab

SharePoint Online hide browse and page tab

We can hide the Browse and Page tab by simply using CSS in SharePoint.

Edit the page and then click on Add a web part and add a script editor web part from the Media and Content web part category.

In the script editor web part, add the below CSS.

<style type="text/css">
.ms-cui-tts {
display: none;
}
</style>

Once you save the page, you will not be able to see the BROWSE and PAGE tab like below:

sharepoint online hide browse and page tab
sharepoint online hide browse and page tab

This is how to hide the Browse and Page tab from the page using CSS in SharePoint Online or SharePoint 2013/2016/2019.

7. SharePoint hide approve/reject button

Let us see how to hide approve/reject button in SharePoint Online.

By default, the Approve/Reject button appears in the ribbon in list and libraries in SharePoint Online like below:

Let us try to hide the Approve/Reject button from the SharePoint list or library ribbon.

SharePoint hide approve/reject button
SharePoint hide approve/reject button

We can hide the ribbon button using CSS, for this we need an id and we can retrieve using any developer tool.

Below are few button ids like below for the different list, libraries or task forms.

Ribbon.Tasks.Workflow.Moderate-Large

Ribbon.ListItem.Workflow.Moderate-Small
Ribbon.ListItem.Workflow.Moderate-Large
Ribbon.ListItem.Workflow.Moderate-Medium

Ribbon.Documents.Workflow.Moderate-Small
Ribbon.Documents.Workflow.Moderate-Large
Ribbon.Documents.Workflow.Moderate-Medium

Ribbon.ListForm.Display.Manage.ApproveReject-Small
Ribbon.ListForm.Display.Manage.ApproveReject-Medium
Ribbon.ListForm.Display.Manage.ApproveReject-Large

Now to hide the buttons, we have to write CSS file. We can edit the page and add a script editor web part or a content editor web part and you can write the below code.

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

Based on the list or library, you can change the above id.

Also, you can add the CSS in a different file and refer it inside the master page. After this, the ribbon button will be hidden.

8. SharePoint online back to top button

Now, let us see an example of, sharepoint online back to top button.

We will add a link into a web part title in SharePoint Online or SharePoint 2013/2016/2019. Also, I will show how users can go to a particular section on click on that link in SharePoint 2013/2016 or SharePoint Online.

In this particular scenario, I have few web parts in a SharePoint Online web part page. Since there are many web parts in this page, users wanted to have a “Go to Top” link in each web part title section. When a user clicks on the Go to Top link, the user should navigate to the Top section of the page.

Here I have a top section like this and I have few web parts added into the page.

Below is the code which wyou can use inside a script editor web part or inside a content editor web part in your SharePoint Online site.

<span id="topsection">Top Section</span>
This is the top section, when user clicks on Go to Top button in the web part title link, then user will be navigate to this top section in SharePoint Online.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () { 

    var className='.ms-webpart-titleText';
    $(".ms-webpart-chrome-title span h2").each(function(inx){        
        var webPartTitle = $(this).text();
                
        //Check web part title
        if(webPartTitle.indexOf("Address")>=0)
        {    
$(this).prepend("<div class='small' style='cursor: pointer; display: inline-block;  float:right; text-align:center'><a href='#topsection'>Go to Top</a>  </div>") ;        
                       
        }
    });
});
</script>

Once you save the code and click on the Go to Top button in the Address web part, then it will navigate to the top section of the page like below:

sharepoint online back to top button
sharepoint online back to top button

In this SharePoint tutorial, we learned:

  • How to hide new item button in SharePoint list
  • How to remove search box from SharePoint list
  • Hide save button from sharepoint ribbon
  • Remove time from sharepoint calendar view 2013
  • sharepoint change save button to submit
  • Hide Browse and Page tab from page using CSS in SharePoint
  • sharepoint online back to top button
>