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
• Hide content type field in edit form in SharePoint

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:

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:

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

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

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:

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

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:

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

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:

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:

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.

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”.

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

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:

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:

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

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.

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:

Hide content type field in edit form in SharePoint

In this SharePoint customization tutorial, we will discuss, how to hide the content type drop-down which comes in edit form inside SharePoint online task list. In the same way, we can hide content type field in edit form in SharePoint 2016 or SharePoint 2013.

Recently we were working in a visual studio 2015 workflow, where we have added the various custom content types into the task list in SharePoint.

If you are new to SharePoint visual studio workflow, you can check out Develop SharePoint workflows using visual studio as SharePoint hosted App.

By default whenever a task got created and a user wants to approve/reject the task from the edit form, the content type drop-down appears like below:

As per the requirement, we need to hide the content type drop-down from the task list edit form.

SharePoint hide content type field edit form

We can hide the content type by using the below jQuery code in the SharePoint list form.

Either we can put the code inside the Edit form task list or we can also put it inside the master page in SharePoint.

To put inside the page, Edit the page -> And then add a script editor web part. Inside the script editor web part, put the below code. Once you save the page and refresh it will hide the dropdown.

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function () {

$("select[id*='ContentTypeChoice']").closest('tr').hide();

});

</script>

Similarly, we can put the code inside a master page. But since when you put the code inside the master page, it might hide every list, so I had added one condition like below:

First retrieve the browser URL like :

var pageURL = $(location).attr("href");

Then if the URL contains the list URL then only it will hide.

if( pageURL.indexOf('/WorkflowTasks/') >= 0)
{
}

The full code is like below:

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function () {
var pageURL = $(location).attr("href");

if( pageURL.indexOf('/WorkflowTasks/') >= 0){

$("select[id*='ContentTypeChoice']").closest('tr').hide();
}

});

</script>

Once you put the above code inside the master page, it will hide the content type in the edit form in SharePoint.

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
• Hide content type field in edit form in SharePoint