Tip: Fix List Issues After Migration 2010 -> 2013

Once again, faced with issue after issue. There was a SharePoint intranet that was migrated from SP2010 to SP2013. There was a list in the intranet, containing crucial information that should be easily searched. However, there was no list search available. Also, none of the columns were site columns. So I set out to create a search page for the list data. Everything runs cool if you just try to search with data in the title field (or author). However, there were some other fields including data to search wih.

Piece of cake, I thought to myself, disregarding the fact that most of the time the pieces of cake are tough to chew when it comes to SharePoint. I created some site columns and added them to the list, positioning them next to the original ones, with the intention to simply open the list in quick edit mode and copy values from list columns to site columns. Easy enough!

However, the list being a custom list originating in SP2010, the quick view was unavailable. I contemplated on exporting the data to Excel, modifying it there and creating a new list using that sheet. Before attempting that, I decided to google just a bit in hopes of finding a solution. And I did, hurray for Saludeen Rajack!

Since I had already tried most of the tricks in the blog post, in vain, I crossed my fingers and opened the list page for editing, opened list web properties and added clienttemplates.js to the JS Link property of the web part (at the very bottom of the Miscellaneous section).

And lo and behold! First of all, the list search box appeared at the top of the list and secondly, the quick edit button became active. 

Now I could proceed with my plans properly.

Tip: Targeting a specific SharePoint site with global CSS

Just a little css tip, that came out handy today. Generally, with a global css (say, an alternate style sheet that is deployed throughout the site collection), you don't even attempt targeting some specific site, but go with the global styles instead. Today, however, I was struggling to display the titlerow (logo and navigation) in the enterprise search center without having it become visible in the dialogs as well.

Some Microsoft logic it is, I guess, that the search center by default hides the site collection navigation using the same class as the dialogs, the .ms-dialogHidden. And as anyone working with SharePoint CSS knows, the sites have no IDs in the body tag so that you could e.g. tell your css to display the navigation in search site but not in the dialogs. None, except for the action attribute in the form tag.

I guess it never was as big of an issue before, since I never thought of it before, but indeed, in a site collection already populated with sites, you can target one specific site by using the attribute selector for form tag in your css rule, for the form action contains the relative address of the site in it + in SharePoint, the whole page is always inside of that form tag. So here's the rule for un-hiding the titlerow for this specific search center, just as an example:

form[action*="searchcenter"] #s4-titlerow.ms-dialogHidden {

    display: block !important;

}

And, yey, the dialogs remain untouched and furthermore, there is no need to impelemnt page level css on each and every search center page.

Tip: Page Layout Content Type Language Resource

Just a short note. I have been using the Page Layout string as the ContentType value for page layouts in the Elements.xml manifest, when creating new page layouts within a UI package Quite many of my customers, however, prefer their sites in Finnish. The Finnish equivalent is "Sivun asettelu" and usually this works fine, but not always. The better practice however (and a must in a multilingual environment) is to use the resource-string as the value for ContentType:

<Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />

SP2013 Branding Tip: Keeping the Dialogs Neat

In SharePoint 2010 there was that special class for hiding elements from showing up and screwing the layout of dialogs: the .s4-notdlg class. In SharePoint 2013 the equivalent is .ms-dialogHidden. So, simply add this class for whichever elements you don't want popping up in the dialogs.

As important as it is to hide certain elements (such as navigation, searchbox, etc.) from the dialogs, there are elements you should not and cannot hide, but that can cause problems when the web page design (e.g. min/max widths and heights) are suddenly implemented in the dialogs too. For this, SharePoint 2010 didn't have any absolute and really good way of fixing. But SharePoint 2013 does. 

Use the class .ms-dialog as the parent class for any rules you want to use for certain elements when appearing in the dialog. For example:

.ms-dialog #titlerow{

min-width: 0; /*as opposed to e.g. a setting of min-width of 800px*/

} 

It still isn't perfect, but much better than before.

Tip of the Day: Intellisense for MasterPages

How ignorant can you sometimes feel? All the time while working with SharePoint 2010 MasterPages and PageLayouts in VisualStudio, for two years now, I have been cussing the lack of intellisense on those pages on a regural basis. I have even complained about this out loud and asked advice from others - never finding or getting any solution to this.

Then, only last Friday, I was helping out a guy who is relatively new to SharePoint branding and development etc. and had been trying out this and that in VisualStudio to help him get along - and avot! He had found the solution to the problem. Maybe it is old stuff to you already, but it was a life-saver for me!

In the Solution Explorer, right-click on the MasterPage/PageLayout file missing intellisense, select View Markup. That does it, pals!

Tip: Easy Way to Make Relative Links in Masterpage

Ever been frustrated because of how difficult if not impossible it is to fix in masterpages relative links within a Site Collection that actually work throughout the Site Collection? The solution is really quite simple (though not real pretty inside the html): use asp:Literal for href value.

For example:

Or use the SharePoint Link Button, which is a bit prettier, eg.

Tip: Hide QuickLaunch On Single Page With CEWP

Usually when a SharePoint-site is branded, the visibility of left navigation / QuickLaunch is determined in a various set of master pages and/or in page layouts. However, if you want to hide the left navigation on any given page, without changing the master page or page layout, this can be aquired easily enough by inserting some hidden html code on the page inside a hidden Content Editor Web Part.

1. First you need to insert a Content Editor Web Part on your page, anywhere you want to - remember, it will be hidden!
2. Click to dit the web part
3. Convert the webpart into XHTML on the ribbon, Format text tab, HTML-menu:
   
4. Then in the same menu, click Edit HTML Source
5. Insert the following code into the editor:
   
6. Click OK
7. In the Web Part properties, set Chrome type to None to hide the webpart on the page.

And that's it. This is of course always removable, simply edit the page again and you will see the hidden web part and be able to close or delete it from the page.