Mobility: Custom Mobile Panel (SharePoint 2013)

The IT Leader's Guide to Multicloud Readiness

This guide provides practical key insights and important factors to consider to make informed decisions in your multicloud journey.

Download the Guide

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.

3. When the page renders, the panel does not respect the web part zones in the markup of the mobile panel and renders the web parts in other zones when the page is viewed in the channels that the panel does not target.
Solution:
To resolve the issues we need to implement a new custom mobile panel. The problem lies with the current implementation, it does not render anything if the current device channel does not match the configured device channel in the mobile panel. But that won’t work when web part zones are added and web parts are added to the zones. When this is the case, if the web part manager does not find the zone, then it places the web part in any of the available zones. (This behavior can also be observed when you switch page layouts which have zones whose ID’s don’t match.)
Solution Outline:
1. Check if the current device channel matches any of the device channels configured for the mobile panel. If the device channel matches, then you add the children to the control hierarchy else go to step 2.
2. While parsing the child controls, the code should check if the control is a Web Part Zone and if so, add it to the control hierarchy but set the visibility of the control to false.
3. If the page is edit mode then the set the panels grouping text, so that the user knows which device channels this panel targets.
When the new custom mobile panel is added to the page layout the authoring experience changes and you can see that web part zones now work in the panels.
Changed Experience:

In the screen shot above, both panels (targeting iPad and Default channels) are shown to the user when the page is in edit mode.
To even further improve the authoring experience, when you use jQuery UI tabs and custom mobile panels, it can dramatically change how to author content for different devices/channels.
Default Channel: Layout with three columns.

Published and viewed in the Default channel:

Tablet: Two columns for reduced device width.

Published and viewed using the Tablet channel:

Smart Phone: Zones one below the other.

Published and viewed in the Phone Channel:

Now the content author can work on the same page to add content to all the channels at the same time by just switching the tabs. Since you can add web part zones to the new custom mobile panel, you can have the flexibility in your page layouts and let the authors decide how the content is rendered.
I will blog about how to implement the custom panel in detail in my following posts.