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:

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:

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

Mobile Panel 1: Target the default channel.

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

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.