Styles not working in custom forms

Scenario:
I am sure this worked in MOSS 2007. Applying OOTB styles gives perfect look and feel for custom forms. But when I applied OOTB styles in SP2010 Visual Web part , I didn't get the right styles.

Solution:
After few comparison I realized SharePoint loads different style sheet files on different pages. So for a custom form to get the same styles as OOTB forms, there was a missing stylesheet.
Add the following statement in your Visual Webpart to fix it.

Code:

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/forms.css" />

SharePoint TextArea Auto resize

Scenario:
Client wanted to have all the multi-line text-boxes to adjust width automatically like Facebook.

And I love SharePoint for its great flexibility where you can use all great jQuery plugin's of the world within SharePoint ( with small tweaks )

Solution:
I have used the Elastic project , jQuery plugin.
You can download files here Elastic

Code:

<script type="text/javascript" src="/_layouts/ClientFolder/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/_layouts/ClientFolder/jquery.elastic.source.js"></script>

<script type="text/javascript">
    _spBodyOnLoadFunctionNames.push("AdjustTextArea");

    function AdjustTextArea() {

        jQuery.noConflict();

        jQuery('textarea').elastic();
        jQuery('textarea').trigger('update');

    }
</script>

<asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Rows="6" Width="100%" />

Found a Bug:
As I was trying to use it with SP2010, I applied a CssClass="ms-long" and got a weird behavior of text box restricting to show only 29-30 lines. So removed it.

Hiding ribbon except for admin

Scenario:
Client wanted to hide the ribbon from everyone except admin.

Solution:
1) Open your SharePoint master page
2) Add the following style in head section

<style type="text/css">
#s4-ribbonrow { display : none; } 
</style>

3) Now find the start of the "s4-ribbonrow" tag and add following block before this:

<Sharepoint:SPSecurityTrimmedControl ID="SPSecurityTrimmedControl2" runat="server" PermissionsString="AddAndCustomizePages">
    <style type="text/css">
        #s4-ribbonrow { display : block; }
    </script>
</Sharepoint:SPSecurityTrimmedControl>

4) Save the new master page and publish it.

Article:
Similar article ( Thanks nilesh ) Hide ribbon , Hide/Show Codeplex project

Customizing XsltListView webpart look and feel

Scenario:
SharePoint 2010 introduces a new webpart XsltListView webpart. It is suppose to me new and enhanced version of DataView webpart with the convience of ListView Webpart.

Unfortunatly it is not.. Customizing Xslt is a pain. After spending good amount of hours, I was able to make it work the way I wanted.

I FEEL the OOTB XSLT for this webpart IS A BIG DESIGN MISTAKE made by Microsoft SharePoint team. Not at all scalable.

Steps:
1. Create a new webpart page

2. Add webpart for the existing list/library you want to customize look and feel.

3. Exit Editing

4. Edit Webpart to add more columns to the view specially the one's you need in your final output.

5. Open the page in design mode now using SPD 2010

6. Click on webpart , you will see new Ribbon Tabs 'Design'

7. Click on 'Customize Xslt' > 'Customize Entire View'. Once you do that and switch to code view, you will see a new node with stylesheet information added to the webpart

8. Search for 'mode="Item"' keyword , this is the main template which will drive rendering of each row

9. With in this template , search for <xsl:for-each select="$Fields" > tag. This is the loop which will make call to other templates to render each field.

10. Delete or Hide the loop statement fully and add your own HTML before this to render the view. I will recommend using SPD to fields/value.

11. Remember to check the changes/output in browser when you make the change.

12. As we have already deleted the Xslt For-each loop. We can delete all the field templates generated automatically. But sometime this is tricky, so no harm in keeping them also.

13. Once you are satisfied with the output, copy the stylesheet into a new file, mylistview.xslt and save it some plac, like a document library.

14. Now you can create a new page and add the List/Library webpart as we did in step 2.

15. Edit webpart and in Miscellaneous section XSL Link textbox , link the XSLT file and save settings.

Advantages:
1. Customization just like we had in DataView
2. Much smaller ( in size ) XSLT file
3. Ribbon Context Tabs will work with the webpart.

Displaying webparts under custom group

Scenario:
We had whole bunch of webparts developed and wanted to locate them easily in Add a Webpart dialogue , so wanted to display them in their own custom group name.

Solution:
While uploading web parts using Module tag, you can also specify group name like this.



Code:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/" >
  <Module Name="WebParts" List="113" Url="_catalogs/wp">
    <File Path="WebPart1.webpart" Url="WebPart1.webpart" Type="GhostableInLibrary" >
      <Property Name="Group" Value="Bogus" />
    </File>
  </Module>
</Elements>

Sharepoint login Sign In button icon

Scenario:
Client wanted to have a better Sign In image. Out of box Sign In link sucks.

Solution:
Small java script did it the trick.



Code:

<script type="text/javascript" >

function newSignInImage()
{

var div = document.getElementById('ctl00_PlaceHolderGlobalNavigation_IdWelcome_ExplicitLogin');

div.parentNode.innerHTML = "<A id='a' style='DISPLAY: block;padding-right:5px' href='/_layouts/Authenticate.aspx?Source=/' ><img border=0 src='/images/Nav_SignIn.gif' alt='signinimage'/>";

}

_spBodyOnLoadFunctionNames.push("newSignInImage");
 
</script>

Line graph for Tasks list

Scenario:
Showing graphical representation of Tasks list.

Solution:


Whats different about this one from so many you already saw on web , is that you dont need to change anything, just import to your webpart gallery and it will connect to your Task list :-)

Tasks list Line-graph webpart <-- Import it and use it , no change required.

Article:
Yaroslav Pentsarskyy’s SharePoint and .NET adventures

Follow me on Twitter

Tip for creating master page using sharepoint designer

Scenario:
I haven't explored Sharepoint Designer that much in past, in-spite of the fact that its offers great webparts and editing functionality. On top of it , its free now. So while working on a new master page using SPD , I discovered 2 new things.

Tip 1:
SPD offers special toolbar for Master page for easy management

-- SPD > View Menu > Toolbars > Master Page

now its very easy to find any Content Placeholder

Tip 2:
Also another option SPD offers is to list all the Content Placeholders

-- SPD > Format > Master Page > Manage Content Region

Dataview Webpart displaying multiple file icons

Scenario:
Let me try, if I can explain this requirement. We had a document library and users had files in two different format XLS and PDF with same name.

Now they wanted to display one line for each file name with two icons representing these two files ( one XLS and another PDF ). Yes , right client is client.

Solution:
DataView Webpart is one famous weapon for these tough situations and yes SPD also.
We used a DataView webpart and added following extra header and data column.


XSL Column Header:

<!--DocIcon-->
<TH nowrap="" scope="col" class="ms-vh2">
  <xsl:call-template name="dvt.headerfield" ddwrt:atomic="1" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
      <xsl:with-param name="fieldname">@DocIcon</xsl:with-param>
      <xsl:with-param name="fieldtitle">CSV</xsl:with-param>
      <xsl:with-param name="displayname">CSV</xsl:with-param>
      <xsl:with-param name="sortable">0</xsl:with-param>
      <xsl:with-param name="fieldtype">Text</xsl:with-param>
     </xsl:call-template>
</TH>

XSLT Column Data:

<!--DocIcon-->
   <TD Class="{$IDAG3PVE}">
    <xsl:variable name="PDFPATH" select="concat(substring-before(@FileRef,'xls'),'pdf')"></xsl:variable>
    <xsl:variable name="FieldIDA1QZMH">
     <xsl:choose>
      <xsl:when test="@IsCheckedoutToLocal=''"></xsl:when>
      <xsl:otherwise><A HREF="{ddwrt:URLLookup('', 'IsCheckedoutToLocal', string(@ID))}"><xsl:value-of select="@IsCheckedoutToLocal" /></A></xsl:otherwise>
     </xsl:choose>
    </xsl:variable>
    <xsl:choose>
     <xsl:when test="@FSObjType='1'">
      <xsl:choose>
       <xsl:when test="ddwrt:GetVar('RecursiveView')='1'"><IMG BORDER="0" alt="Folder: {@FileLeafRef}" SRC="/_layouts/images/folder.gif" /></xsl:when>
       <xsl:otherwise>
        <xsl:variable name="SetVarIDAOMZMH"><xsl:value-of select="$PagePath" />?RootFolder=<xsl:value-of select="@FileRef" />&FolderCTID=<xsl:value-of select="@ContentTypeId" /></xsl:variable>
        <xsl:value-of select="ddwrt:SetVar('UnencodedFilterLink', string($SetVarIDAOMZMH))" />
        <A TABINDEX="-1" HREF="{ddwrt:GetVar('UnencodedFilterLink')}" onclick="javascript:EnterFolder('{ddwrt:GetVar('UnencodedFilterLink')}');javascript:return false;"><IMG BORDER="0" alt="Folder: {@FileLeafRef}" title="Folder: {@FileLeafRef}" SRC="/_layouts/images/folder.gif" /></A>
       </xsl:otherwise>
      </xsl:choose>
     </xsl:when>
     <xsl:otherwise><A TABINDEX="-1" HREF="{$PDFPATH}" onclick="return DispEx(this,event,'','','','','{ddwrt:ListProperty("DefaultItemOpen")}','{ddwrt:MapToControl("", string())}','{@HTML_x0020_File_x0020_Type}','','{ddwrt:GetUserID('CheckoutUser')}','{$Userid}','{ddwrt:ListProperty("ForceCheckout")}','{$FieldIDA1QZMH}','{ddwrt:CurrentRights()}')">
      <xsl:choose>
       <xsl:when test="@CheckoutUser=''"><IMG BORDER="0" ALT="{@Title}" title="{@Title}" SRC="/_layouts/images/XLS16.gif" /></xsl:when>
       <xsl:otherwise><IMG BORDER="0" ALT="{@Title}" title="{@Title}" SRC="/_layouts/images/XLS16.gif" /></xsl:otherwise>
      </xsl:choose>
      </A></xsl:otherwise>
    </xsl:choose>
</TD>

Issues:
1. Works only for only Document Library, can be enhanced for Link list also.
2. The way we wrote the XSLT transformation variable PDFFILEPATH. Users need to upload only XLS file and he will get link for PDF. ( Simple file name replacement function ).
3. This solution doesn't really check if that PDF file exist or not.

Changing look and feel for Webpart header

Scenario:
I wanted to change look and feel for Webpart header to use my favorite font Calibri :-)

Solution:
Insert the following CSS in the page header or may be using a Content Editor Webpart

Code:

<style>

.ms-WPBorder{
border-right:#6C1717 1px solid;
border-left:#6C1717 1px solid;
border-top:none;
border-bottom:#6C1717 1px solid;
}

.ms-PartSpacingVertical, .ms-PartSpacingHorizontal{
padding-top:10px;
}

.ms-WPHeader{
Color:#FFF;
background-image:none;
background-color:#6C1717;
}

.ms-WPTitle a:hover {
font-weight:normal;
font-size:18px;
font-family:Calibri,Arial,Helvetica,sans-serif;
text-decoration:none;
margin-left:8px;
Color:#FFF;
}

.ms-WPTitle span {
font-weight:normal;
font-size:16px;
font-family:Calibri,Arial,Helvetica,sans-serif;
text-decoration:none;
margin-left:8px;
Color:#FFF;
}

</style>

Changing master page using feature receiver

Scenario:
This is very common requierment and while doing my class, I was asked about changing the master page from Feature receiver.

Solution:
Assuming you have already uplaoded the newDefault.master to site collection Master Page Gallery, create a Scope=Web level feature receiver that will set the new master page.

Code:

 public override void FeatureActivated(SPFeatureReceiverProperties properties) {
    SPWeb web = properties.Feature.Parent as SPWeb;
  web.MasterUrl = web.MasterUrl.Substring(0, web.MasterUrl.LastIndexOf('/')+1) + "new.master";
  web.CustomMasterUrl =  web.CustomMasterUrl.Substring(0,web.CustomMasterUrl.LastIndexOf('/')+1) + "new.master";
  web.Update();  
}

public override void FeatureDeactivating(SPFeatureReceiverProperties properties){
  SPWeb web = properties.Feature.Parent as SPWeb;
  web.MasterUrl = web.MasterUrl.Substring(0, web.MasterUrl.LastIndexOf('/')+1)  + "default.master";
  web.CustomMasterUrl = web.CustomMasterUrl.Substring(0,web.CustomMasterUrl.LastIndexOf('/')+1) + "default.master";
 web.Update();  
}

Applying theme to all the sub-webs

Scenario:
Applying theme to all the subwebs.

Solution:
A theme is applied at the site scope and is not inherited by child Webs within the site collection. Because of their scoping, themes modify the appearance of all pages within the root Web, including the Site Settings pages. This code sets the Theme for all Webs within a site collection.

Code:

// iterate all sites in the site collection
foreach (SPWeb webSite in MSDNSiteCollection.AllWebs)
{
  // apply the Lacquer theme
  webSite.ApplyTheme("Lacquer");

  // update the site
  webSite.Update();
}

Known Issues:
This will only apply the theme to already existing webs.If you create a new sub-web this will still get the default Theme.

Workaround to that is to create a new Feature at Scope=Site level and execute the above code at activation. That way whenever you create new subwebs.. just deactivate and reactivate the feature.

:-)

Graphs in SharePoint

Scenario:
You want to have some basic graphs within SharePoint

Solution:
You can use JavaScript , CSS and XSLT

Article:
http://nicholascook.net/demos/graph/ ( JavaScript and CSS )
http://blogs.msdn.com/sharepointdesigner/archive/2008/07/18/dataviews-visifire-silverlight-charting-power.aspx ( JavaScript and VisiFire )
http://blogs.msdn.com/sharepointdesigner/archive/2008/06/27/css-style-bar-graphs-using-data-views.aspx ( XSLT )

Modifying style for Content Query Webpart

Scenario:
With in Content Query Webpart you want to display a message text next to the items depending upon one of the other column value.

Explaination:
(A). Content Query Webpart uses templates defined in ItemStyle.xsl file to determine the layout and appearance of the Items, so add a new Item Style template to display the message from the required column.
(B). By Default Content Query Webpart exposes certain columns and we need to modify it to be able to pull any additional Columns ( Legal column in my case ).

Steps for (A):
1. Navigate to top level site collection
2. Click on all Items
3. Open "Style Library"
4. Open "XSL Style Sheets"
5. Check-out ItemStyle.xsl
6. Add the Template as given below
7. Check-in the ItemStyle.xsl

ItemStyle Template:

<xsl:template name="NewTemplate" match="Row[@Style='NewTemplate']" mode="itemstyle">
  <xsl:variable name="SafeLinkUrl">
   <xsl:call-template name="OuterTemplate.GetSafeLink">
    <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
   </xsl:call-template>
  </xsl:variable>

  <xsl:variable name="DisplayTitle">
   <xsl:call-template name="OuterTemplate.GetTitle">
    <xsl:with-param name="Title" select="@Title"/>
    <xsl:with-param name="Url" select="@LinkUrl"/>
   </xsl:call-template>
  </xsl:variable>

  <xsl:variable name="LinkTarget">
   <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
  </xsl:variable>

  <div id="linkitem" class="item">

   <div class="link-item">
    <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>

    <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}" >
     <xsl:value-of select="$DisplayTitle"/>
    </a>
 
    <xsl:if test="string-length(@Modified) != 0">
            <font color="red" size="1" >
                ( <i><xsl:value-of select="@Modified"/></i>  )
            </font>
   </xsl:if>
  
   </div>
  </div>
 </xsl:template>

Steps for (B):
1. Navigate to the site.
2. Edit the page.
3. Add a Content Query Webpart and click "Modify Shared Webpart".
4. Modify options to display items from document library having the "Modified" column.
5. Go to Presentation section and Select "NewTemplate" as ItemStyle.
6. Click 'OK'
7. Export the webpart now and save the file on your Desktop
8. Open the file with Visual Studio or Notepad
9. Search for "CommonViewFields" tag
9. Add the Modified column as shown

<property name="CommonViewFields" type="string" >Modified</property>

10. Save the file and exit
11.Import the new Webpart into SharePoint site
12.Drop it to any page and you can see the tagging.

Content Query Webpart is missing newly created itemstyle

Steps to re-produce :
1. Add a new ItemStyle for the Content Query Webpart into the ItemStyle.xsl file.
2. Navigate to the ContentQuery Webpart and Apply the newly added ItemStyle.
3. You should now be able to see the new ItemStyle for the ContentQuery Webpart.
4. Login with some other User Credentials and check the ContentQuery Webpart again.

Error : ItemStyle is missing ????

Reason:
This is because ItemStyle.xsl has been checked out to the Original User who made changes by adding the new ItemStyle and forget to checkin the file.

Resolution:
Simply re-login with the user credentials you have used to make changes to ItemStyle and Check-in the ItemStyle.xsl file.

Steps:
1. Login with the user credentials you have used to make changes to ItemStyle
2. Navigate to top-level site collection
3. Click on View All Items
4. Open the Style Library
5. Check-in the ItemStyle.xsl file