Microsoft

Blog Categories

Subscribe to RSS feed

Archives

Posts by this author: RSS

SharePointFest Chicago Presentations

I presented at the SharePointFest Chicago in October 2013. During my presentations, I mentioned that I would upload my PowerPoint presentations.

Session 1: Search Customizations

This session covered customizations for search in SharePoint 2013.SharePoint Chicago

1. Display Templates

2. Server side search web parts.

3. Boosting and segmentation

Here is the link : http://www.slideshare.net/perficientinc/search-customizations

Session 2: Public Websites in SharePoint 2013

In this session I spoke about all the considerations and options one has while creating a public web site in SharePoint 2013. I covered some of the quirks of SharePoint 2013 and workarounds.

Here is the link to the PowerPoint presentation : http://www.slideshare.net/perficientinc/creating-public-facing-websites-with-sharepoint-2013

SharePoint 2013 – Search not displaying all results

Scenario: While building a search based application in SharePoint 2013, I observed a behavior which I thought was quirky. A page on a publishing site had a Search Results web part and a Content by Search web part. While configuring them, I set them to have the same query and result source.

Expected result would’ve been the exact same result set and count. But for some reason, the Content By Search web part was returning all the pages as expected but the search results web part was only returning a subset of it. What was even quirkier was that the search preview on the search results web part would display all the results.

I initially thought that some pages might not have been published and hence search results web part would not display them, but that was not the case. I started to debug what was being returned to the browser. I looked at the objects that the search results returned and did not find anything there. Starting to analyze the data, I realized all the pages that were not showing up had some content that was similar, even though they were unique pages the content had a similar tone to it. I think in the earlier versions of the Search Result Web Parts, the user had an option to “Trim Duplicates” which is no longer present in the SharePoint 2013 Search Result Web Part’s properties.

Digging a bit deeper, I found a way to set the Trim Duplicates to false.

 

1. Export the Search Results Web Part from your page.

2. Open the .webpart file in your favorite editor.

3. Search for “Trim Duplicates”, you will find it as part of the DataProviderJSON property.

4. Set the Trim Duplicates property to False.

5. Upload the web part.

6. Add the web part to your page.

 

image

 

SharePoint will exclude content that it thinks is similar. Even though the pages have a unique name and the content might not be the same, if it has some content that is similar, then search will collapse them in the result set. I think the user should have the option in the user interface to turn off the “Trim Duplicates” setting.

Once the option is set, you will get the results that you would expect and the result set from a Content By Search web part will match the result set from a Search Result web part (i.e. if they configured to fire the same query).

Quick Tip: Display Templates and jQuery plugins in SharePoint 2013

Here is a good article on Display Templates and Result Sets in SharePoint 2013. jQuery comes to mind when you think of the most common framework people use to manipulate and display content on the client side. There are a huge number of plugins that transform your HTML structure into a visually appealing format. These plugins need to be invoked after the html has been loaded in DOM.

Display Templates work a little differently. The skeleton gets loaded in DOM and then when the search results are fetched, they are transformed into the HTML structure that the Item Template defines.

So, as a developer you need to know when to invoke your plugin. If you invoke your plugin before the content is rendered, the plugin won’t find any child elements and will not work as expected.

SharePoint 2013 provides an array called OnPostRender as part of the context. Any function that is added to this array will be invoked after the search results have been transformed using the Item Template.

In your List Display Template add the following in the first DIV under the BODY tag.

<!–#_

ctx.OnPostRender = [];

ctx.OnPostRender.push(function(){

/* invoke your plugin code here to ensure the plugin has the content to work against */

});

_#—>

You will need to use this to create carousels, jQuery Mobile transformations, accordions, etc.

SharePoint 2013: Task Management in My Sites

Scenario: In your organization you are using SharePoint to manage your projects. Tasks are created in each project site and assigned to you. To keep track of your tasks, you have to go each project site to view, edit those tasks. If you are involved in multiple projects then it can certainly become a time consuming task to manage all the tasks in all the project sites that you are assigned a task.

In SharePoint 2013, there is a much better way of going about managing your tasks. When you go to your My Site in SharePoint 2013 there is a link on the left hand navigation menu called “Tasks”.

image

Clicking on this link will show you all the tasks that are assigned to you across all site collections. You, as a user can now just go to your My Site and manage all your tasks, make changes and create new ones. SharePoint also displays those tasks on a nice timeline. (more…)

Design Manager in SharePoint 2013: Easier Layouts and Master Pages

In all the previous releases, creating master pages and layouts was definitely not easy for a designer considering the technical aspects of it. The designers would have to understand SharePoint and what components are mandatory on the master page and how they render to make their designs come alive.

In SharePoint 2013, there is a new feature called Design Manager which will help to separate the design aspects from the technical requirements to create a master page. Designer does not need to know which components are necessary on a master page. The Design Manager assists in creating the master page from simple HTML, CSS files.  The designer now only has to worry about his design and convert that into HTML, CSS and Images. Once these artifacts are ready, the design manager can process these to generate a master page.

The process to create a master page is really simple:

1.       Create the layout that you want using the HTML editor of your choice.

2.       Create the CSS file that supports your design.

3.       Add the images that are a part of your design.

image (more…)

Catalogs and Search Driven Web Parts in SharePoint 2013

In all the previous versions of SharePoint, the traditional way of retrieving content was using CAML queries and displaying them using your custom UI or use one of the OOTB web parts like Content Query Web Parts or List web parts. Search was not used that often or effectively. When CAML queries are not created carefully, then can be pretty expensive in terms of resources. You can see SQL resources go up, huge SQL queries getting created. To avoid all of this and make the querying and rendering process a lot simpler and efficient, SharePoint 2013 introduces the Content By Search Web Parts.

Search Driven Web Parts:

In SharePoint 2013, all the content can now be surfaced using search.  The “Search driven “  web parts have their own Querying Builder user Interface which makes it very easy to select, filter and display the data that you want. The SDWP (Search Driven Web Parts) web parts will also show you a preview of the search results.

(more…)

Mobility: Custom Mobile Panel (SharePoint 2013)

In my previous blog post, I described how the mobile panels work and what their shortcomings are.

This blog will outline the solution that will solve the problems that the OOTB panel has.

Problem Definition:

The Out Of The Box mobile panel when added to the layout has the following issues:

1. To author content in the panel you have to add the markup in the layout inside the panel markup.

2. If you try and add a web part zone in the panel, then to add web parts to the zone you have to add the Device Channel query string parameter to the page and then edit the page.

(more…)

Mobility: Mobile Panels in SharePoint 2013

SharePoint 2013 has a new component called the Mobile Panel. The purpose of this panel is to enable the content authors to target different content to different device channels or render same content differently based on how the site is accessed. My earlier post on Mobility shows how to setup a device channel and explains why it is used.

Let’s take an example to clarify the purpose of the mobility panel. Assume that you have a device channel setup for a Windows Phone. Your products reporting page displays current inventory of your products in the following format for a user navigating to the site using a browser.

Content Format 1:

clip_image001
clip_image002

This format would not be convenient for the user when he visits the site using a phone. You want the user to consume the information in a different way.

Content Format 2:

clip_image004 clip_image005
clip_image006

To accomplish this you would add two mobile panels to your page layout.

Mobile Panel 1: Target the default channel.

Mobile Panel 2: Target the Phone Channel.

Now, on your page which is created using the above layout, you would add the web part to render the content in the Display Format 1 to Panel 1 and add the web part to render the Display Format 2 to Panel 2.

Now when the user visits the page using a Phone (setup through Device Channels), the Mobile Panel 1 will NOT be displayed, only the Mobile Panel 2 will be displayed.

The syntax for the Mobile Panel:

Add the following statement to the layout where ever you want the targeted content to appear.

<Publishing:MobilePanel runat="server" IncludedChannels="WindowsPhone" >

<div> Some content targeted towards Windows Phone </div>

</Publishing:MobilePanel>

The attribute called “IncludeChannels” allows the user to specify which channels the panel will target. You can specify multiple channels (Alias) separated by comma.

To test how the page looks, you can navigate to the page by adding the query string parameter “?DeviceChannel=deviceChannelAlias”. E.g. http://domain.com/pages/default.aspx?DeviceChannel=WindowsPhone

Problem Areas:

  • To add content you have to add the device channel query string parameter
  • Big one : Web Part Zone & Web Parts
    • Add the web part zone to the panel.
    • Add some web parts to the zone.
    • When you go to the page by specifying the DeviceChannel query string parameter then web part gets rendered in the right place.
    • Here is the catch- When you go to the page without the device channel parameter (view the page through different channel) the web part still gets rendered! Also, it shows up in another zone when you edit the page from a channel other than the one the panel targets.
  • This does not happen if you don’t have a web part zone in the panel, but add the markup directly in the panel. In this case, it works fine.

In my following posts, I will show you how you can fix this using a custom panel.

Mobility in SharePoint 2013 (Device Channels)

Mobility support has always been a sore point in the earlier versions of SharePoint. In the new version, mobility has a decent support OOTB. Now you can define channels for different user agents which can render a different page structure based on the user agent. Simply put, you can configure different Master Pages for different channels.

For e.g.: If you define a channel for a tablet, a Windows Phone, and an iPhone, you can create three separate master pages and assign them to the different channels. (Not mandatory, you can create a channel that targets more than one user agent string and assign a master page to that channel). So, different header, navigation, footer can be rendered depending on which channel is used to access the site. The channels though are not dependent on the device capabilities. They are dependent on the user agent string that the request contains. So now, you will have to add to the user agent settings for the channel whenever a new device/browser with a different agent string is identified.

To define your own device channel follow the steps outlined below:

1. Navigate to your publishing site.

2. Click on Site Actions (Icon)->Site Settings

3. Click on Device Channels.

clip_image001

4. Click on New Item.

clip_image002

This will create a device channel for you.

clip_image004

*Remember to click on the Active check box when you want to channel to be active and let SharePoint divert traffic to the configured channel.

SharePoint will go through the list of channels as per their order in the list. Hence the last channel should always be the Default channel. If the Default channel is the first one, no channel except the Default channel will be used.

Now that you have a channel, you can set a master page for that channel. This is how you would do it.

· Go to Site Settings

· Click on Master Page under Look and Feel

clip_image006

As you can see in the screen shot above, I have selected the “Phone” master page for the Windows Phone channel. Now when the user navigates to the site using a Windows Phone then the “Phone” master page will be used. This way you can control how the site renders when different devices access your site. (The Phone master page is a custom master page that I put together quickly just to demonstrate how the channels work.)

When I navigate to the site using my Windows Phone, I can see a different layout.

clip_image008 clip_image009

Tip: To test the look and feel of the site using different channels, navigate to the page you want to test by adding:

?DeviceChannel=DeviceChannelAlias “to the URL. The screen shot to the right (above) demonstrates how that works.

E.g. http://domain.com/?DeviceChannel=WindowsPhone

This is definitely an improvement over the previous versions. But is this enough for a complete mobile experience? Not at all. A lot of thought needs to be put into the layout and how the content will react to the change in device sizes using CSS Media queries, etc.

Another feature in SharePoint 2013 is the Mobile Panels. The Mobile Panels when added to your page layouts can target different channels. This means that the content in that panel will only render when site is browsed through the channel for which the Mobile Panel is configured for. This is pretty interesting as you can use this to target different content to different channels or same content rendered differently based on the channel.

In my following posts, I will cover how the Mobile Panels are used and configured and also an interesting enhancement that will help in making the authoring experience a little simpler.