Skip to main content

Cloud

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.

Thoughts on “Mobility: Mobile Panels in SharePoint 2013”

  1. Pingback: Mobile devices and SharePoint 2013 – Part II: Device channels and the SharePoint page model » Christian Heindel – IT Solutions & Consulting

  2. Pingback: Mobility: Custom Mobile Panel (SharePoint 2013) | Microsoft Enterprise Technologies

  3. Pingback: What's New in SharePoint 2013? Let's ask the experts... | Microsoft Enterprise Technologies

  4. The post was very helpful, thanks. Another quick workaround for web part zones issue is to use the “Page Content” field control wrapped in Mobile Panel targeted for mobile devices. So we would not depend on web parts(content editor specifically) for mobile rendering.
    I will look forward for your article on custom mobile panels.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Amol Ajgaonkar

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram