Tuesday, December 22, 2015

Detrermine which worker process to attach to while debugging SharePoint Webparts

       1 comment
With number of webappliations on your farm and their respective application pools, it becomes difficult to find out which worker process to attach to when you want to debug your webpart.

I assume you know how to get the name of application pool from your web application.

  • Once you do, run cmd in admin mode.
  • change directory to c:\Windows\System\Inetsrv
  • and run appcmd list wp

This will list out the worker process running for all the web applications. In my case its the following:




Then in visual studio,
  • Set breakpoints
  • deploy your solution
  • click on debug 
  • then click on attach to process and find out the process with the id which is 4316 in my case.

Thursday, September 3, 2015

Office UI Fabric and SharePoint Add-ins

     ,  No comments
Microsoft has released first version of Office UI Fabric.  Check out the announcement blog post here : Introducing Office UI Fabric 

WHAT IS OFFICE UI FABRIC ?

 

Office UI Fabric is a responsive, mobile-first, front-end framework that enables you to create web experiences by using the Office Design Language. It is implemented with a set of fonts and with CSS classes that provide UI components, icons, animation, and the official Office color palette.

If you have experience working with bootstrap, you will find it a lot easier to work with office UI Fabric as well. It is built on the same lines and divides the page into a 12 column grid layout thereby making it responsive across devices. In addition to that you can now use the same icons, font, animation etc used in office.


HOW TO USE IT IN SHAREPOINT ADD INS?

 

  •  Since it is dependent on jquery , you would need to include it in your development project
  •  Include css and js files as per the components you want to use
and you are good to go.

You can find further details here : Fabric Docs
 

SHAREPOINT THEMES AND OFFICE UI FABRIC


To Use SharePoint themes, we have to make explicit calls to include host web css files in out project . I will soon post an article on how to go about that.
And every time the host web's theme is changed , add-in's theme is changed as well.

But its not true in case of office UI Fabric and add-in's theme doesn't change with the change of host web theme.

It is recommended not to mix the two.

Tuesday, December 3, 2013

Breadcrumb navigation in SharePoint 2013

     ,  10 comments


Here is a quick way to add bread crumb navigation to SharePoint 2013 . By default we can only see the current location . To get a navigation which drills down to parent site collection , i usually go with the following approach. 

ListSiteMapPath  creates a SiteMapPath control that renders as site map as a hierarchical set instead of nested un-ordered lists.


Both of the controls have the “SiteMapProvider” property. ListSiteMapPath has a property “SiteMapProviders” which means we can specify more than one  provider object with one ListSiteMapPath control. There are many providers for us to choose. Following articles describes it well http://www.ktskumar.com/blog/2008/04/sharepoint-navigation-providers-part-1/ :

• SPSiteMapProvider
• SPContentMapProvider
• SPXmlContentMapProvider
• CurrentNavSiteMapProvider
• CurrentNavSiteMapProviderNoEncode
• CombinedNavSiteMapProvider
• GlobalNavigation
• CurrentNavigation
• ExtendedSearchXmlContentMapProvider
• AdministrationQuickLaunchProvider
• SharedServicesQuickLaunchProvider
• PWASiteMapProvider
• GlobalNavSiteMapProvider
• SiteDirectoryCategoryProvider
• MySiteMapProvider
• MySiteLeftNavProvider
• MySiteSubNavProvider
• SPNavigationProvider


Add following code snippet to any content place holder in master page where we want breadcrumb navigation to appear, in my case i added it in "PlaceHolderPageTitleInTitleArea" .

<!--SPM:<SharePoint:ListSiteMapPath
                runat="server"
                SiteMapProviders="CurrentNavSiteMapProviderNoEncode"
                RenderCurrentNodeAsLink="false"
                PathSeparator=""
                CssClass="ms-breadcrumb"
                NodeStyle-CssClass="ms-breadcrumbNode"
                CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
                RootNodeStyle-CssClass="ms-breadcrumbRootNode"
                NodeImageOffsetX="0"
                NodeImageOffsetY="289"
                NodeImageWidth="16"
                NodeImageHeight="16"
                NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
                RTLNodeImageOffsetX="0"
                RTLNodeImageOffsetY="312"
                RTLNodeImageWidth="16"
                RTLNodeImageHeight="16"
                RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
                HideInteriorRootNodes="true"
                SkipLinkText=""/>-->
Adding above results in the following





Now, instead of i wanted as bread crumb separator. 
                NodeImageOffsetX="0"
                NodeImageOffsetY="289" change to 573
                NodeImageWidth="16" 
                NodeImageHeight="16" change to 10
                NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23" Image used for separator


Making above changes did the trick for me . After above changes our navigation is supposed to look like this.







Adding the following css aligns breadcrumb items in a horizontal menu 

.ms-breadcrumb li,ul {
 display: inline;  margin-left:-2.5em   
}




.ms-breadcrumb > li:first-child  > span:first-child{
display:none
}

Above hides image separator at the beginning 





Following css can be overridden to change the way we want our navigation to appear
               CssClass="ms-breadcrumb"
                NodeStyle-CssClass="ms-breadcrumbNode"
                CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
                RootNodeStyle-CssClass="ms-breadcrumbRootNode"