SharePoint Pagination – Next 30 items


SCENARIO:

When there are more than 30 items(say, 50 or 100) in SharePoint list or library, it is difficult for users to scroll down the page and select the next set of items through Paging control. To overcome this, some developers prefer to change the item limit to 50 or 100 in modify view page. What if the list contains more than 100 items (imagine 2000 items). In Such cases, we cannot set item limit to 2000 as it will affect the page load performance.

General Position of Paging
General Position of Paging


SOLUTION:

We can move the paging control to the top inorder to navigate to the next 30 items immediately rather than scrolling down the page. To do so, insert the script editor webpart before the list webpart and paste the below code in it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#bottomPagingCellWPQ2").insertBefore("table.ms-listviewtable")
});
</script>


RESULT:

Paging control is moved to the top of the list
Paging control is moved to the top of the list

 

We can also bring the paging control at top and bottom positions using the below script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#bottomPagingCellWPQ2").clone().insertBefore("table.ms-listviewtable")
});
</script>


RESULT:

Paging control at top and bottom of the list
Paging control at top and bottom of the list

If this post is helpful to you, Please rate the article and provide your valuable feedback.

Advertisements

Hiding SharePoint 2007 Menus and navigations


In this article, let us see how to hide SharePoint 2007 menus and navigations using CSS and give a look as normal site.

SharePoint 2007 Menus and Navigations:

sharepoint-2007-menus-and-navigations

Hiding Site Action menus:

<style>
.ms-siteaction
{
display:none;
}
</style>

Hiding global breadcrumb:

<style>
.ms-globalbreadcrumb
{
display:none;
}
.ms-globalTitleArea
{
padding-top:5px;
padding-bottom:5px;
}
</style>

Hiding only left side of global breadcrumb:

<style>
.ms-globalleft
{
display:none;
}
</style>

Hiding Search Scope:

<style>
.ms-sbscopes
{
display:none;
}
</style>

Hiding all search options:

<style>
.ms-sbtable-ex
{
display:none;
}
</style>

 

After hiding Site actions, global left breadcrumb and search scope

 

search-scope-breadcrumb-and-siteaction
After hiding global breadcrumb, site actions and search scope.

 

after-hiding-menus
After Hiding Site Actions, global breadcrumb and all search options

 

Hiding navigation path(breadcrumb) in list forms:

<style>
.ms-titlearea
{
display:none;
}
/*To adjust the height and padding of the Page Title after hiding bread crumb*/
.ms-areaseparator
{
height:auto;
padding: 7px 0px 4px 7px;
}
</style>

Before hiding:

with-titleare

After hiding:

after-hiding-titlearea

To hide them using script:

<script>
$(document).ready(function()
{
$(".ms-siteaction").css("display","none");
$(".ms-globalbreadcrumb").css("display","none");
$(".ms-sbtable-ex").css("display","none");
$(".ms-titlearea").css("display","none");
});
</script>

 

To hide for all except developers, you can create a SharePoint group for developers and use the above code as discussed  here

Hiding quick launch in MOSS


In this article, let us see how to hide quick launch and blank area in list forms in MOSS site.

To hide quick launch in home page, you can use the below css:

.ms-quicklaunch
{
display:none;
}
.ms-navframe
{
display:none;
}
Before applying css
home-with-quick-launch
After applying css
home-without-quicklaunch

If you open list forms, you can see the blank space inspite of quick launch. Inorder to hide it, go with the below css:

.ms-navframe
{
display:none;
}
Before applying css:
form-with-blank-space
After applying css:
form-without-blank-space

Rename New Item link in SharePoint 2013


Let us see how to rename “New Item” link in SharePoint 2013 to custom text with respect to SharePoint list name. Say,  For example: If there is a Project list, we need to rename New Item to Add new Project. In such cases, you can follow the below steps:

  • Go to the desired page and edit it
  • Add a Script editor Web Part available under Media and Content Category
  • Copy and paste the below in the script editor web part.
<script src="../Scripts/jquery.min.js"></script>
<script>
_spBodyOnLoadFunctionNames.push("ChangeText");
function ChangeText()
{
document.getElementById("idHomePageNewItem").getElementsByTagName("span")[1].innerHTML="Add New Project";
}
</script>

Please do not forget to like or rate this article 😛

Customization of default SharePoint forms


If you wish to change the look and feel of default SharePoint list forms without using SharePoint Designer or infopath, go with the below steps:

  • Save the below code in a notepad and upload it in Site Assets
  • Go to the desired list and click on Add New Item
  • In New Form Page, click on Edit icon or click on Site Actions->Edit Page
  • Click on “Add a Web Part” hyperlink and select Media and Content->Content Editor->Add
  • Edit the web part and provide the url of the uploaded file in Content Link
  • Click Apply and stop editing the page
  • Repeat from step 3 for Display and Edit Forms

ADVANTAGE:

  • Code does not require modification whenever field is added to or removed from the form.

CODING:


<style>
/*Hide Quick Launch*/
#s4-leftpanel
{
display:none;
}
/*Move the content part to extreme left*/
.s4-ca
{
margin-left: 0px;
}
/*Rest of the below code are with respect to the form*/
.ms-formlabel
{
background:#C2D69A; /*Change the color code as per your wish*/
}
.ms-standardheader
{
color:black;
font-weight:bolder;
}
.ms-formbody
{
background:white;
}
BODY
{
color:black;
}
input[type=&quot;button&quot;]
{
background:#C2D69A;
color:black;
font-weight:bolder;
}
.ms-formtable
{
border-spacing:1px;
}
</style>

RESULT:

form