Create an icon overlay for Sharepoint OOB filetype icon

Whenever we upload the document in document library. The document will be added and based on the type of the document, an icon will appear under the type field. Lets say if you upload ' .zip' file, compressed folder icon will be appear and if we upload any of the office file type document, Respective office document file icon will appear.

Apart from this, In SharePoint 2010.There is an IconOverlay property in SPListItem. It will be helpful in creating the overlay for the type Icon.

The practical uses of these property are

1. we can set a common overlay icon for the particular content type. User can identify the file type of the document as well as the content type by seeing the icon under type field. It improves the usability.

2. We can set this property for the documents whose content are interrelated ,so that user can identify by viewing the icon.

So the next question will be, How to implement this?

Step 1: Copy the image ( which you are plan to set as a overlay image ) e.g. plus.gif and paste it in an Images folder under layouts in SharePoint hive or other way is to create a Images mapped folder in vs2010 SharePoint project and deploy.

Step 2: Now programmatically set the value for icon overlay property to the name of the file you copied to images folder .For example refer the code below.

using (SPSite site = new SPSite("http://localhost"))

{

using (SPWeb web = site.OpenWeb())

{

SPList list = web.Lists["Shared Documents"];

foreach(SPListItem item in list.Items)

{

item.IconOverlay = "Plus.gif";

item.Update();

}

}

}

Sharepoint 2013 useful links

Microsoft officially announced SharePoint 2013 and office 2013.Here are some of the useful links regarding SharePoint 2013.

Installation Guide

·SharePoint 2013 Requirements – http://technet.microsoft.com/en-us/library/cc262485(office.15).aspx

·How to install SharePoint 2013 – http://www.ericharlan.com/Moss_SharePoint_2007_Blog/how-to-install-sharepoint-2013-a220.html

IT Pro Resources

·SharePoint 2013 TechNet Library – http://technet.microsoft.com/en-us/library/cc303422(v=office.15)

·SharePoint 2013: presentation: IT pro training – http://www.microsoft.com/en-us/download/details.aspx?id=30361

·SharePoint 2013 IT pro Videos – http://technet.microsoft.com/en-US/sharepoint/fp123606

·SharePoint 2013 Preview Forum for IT Professionals – http://social.msdn.microsoft.com/Forums/en-US/sharepointitpropreview/threads

·Downloadable eBook: Deployment guide for SharePoint 2013 Preview – http://www.microsoft.com/en-us/download/details.aspx?id=30384

Developer Resources

·SharePoint 2013 MSDN Library – http://msdn.microsoft.com/en-us/library/jj162979(v=office.15)

·SharePoint 2013 for developers – http://msdn.microsoft.com/en-us/sharepoint/default.aspx

·SharePoint 2013 New Features and Capabilities – http://msdn.microsoft.com/en-US/sharepoint/fp123576

·SharePoint 2013 Developer Training Videos – http://msdn.microsoft.com/en-US/office/apps/fp123626

·Building Apps for SP2013 and Office – http://msdn.microsoft.com/en-us/office/apps/fp160950

·Setting up team development infrastructure for SharePoint 2013 development – http://www.bing.com/videos/watch/video/setting-up-team-development-infrastructure-for-sharepoint-2013-development/10tcd4al4

·SharePoint 2013 Preview Forum for Developers – http://social.msdn.microsoft.com/Forums/en-US/sharepointdevpreview/threads

·Developing Apps Forum for SharePoint – http://social.msdn.microsoft.com/Forums/en-US/appsforsharepoint/threads

·Choose the Right API for SharePoint 2013 Preview – http://msdn.microsoft.com/en-us/library/jj164060(v=office.15).aspx

Style for Sharepoint 2010 people editor field

Whenever we are using a people editor in SharePoint 2010 visual webpart or in an application page, the people editor would render without a border or there are some business cases where people editor border should be in a different colour. For those scenarios you can make use of the below css.

 <styletype="text/css">

.ms-inputuserfield

{

font-size: 8pt;

font-family: Verdana,sans-serif;

}

div.ms-inputuserfield a

{

color: #000000;

text-decoration: none;

font-weight: normal;

font-style: normal;

}

div.ms-inputuserfield

{

border: 1pxsolid #a5a5a5;

position: relative;

padding-left: 1px;

padding-top: 2px;

}

</style>

 Then set the People Editor cssClass attribute with ms-inputuserfield

<SharePoint:PeopleEditorrunat="server"ID="peUser1"AutoPostBack="false"AllowEmpty="true"

SelectionSet="User"BorderWidth="0px" PlaceButtonsUnderEntityEditor="true"Rows="1"AllowTypeIn="True"MaximumHeight="3"

EnableBrowse="True"Width="200px"CssClass="ms-inputuserfield"/>