SharePoint 2013 Device Channel custom UI component

Reading Time: 2 minutes

In my experience on SharePoint 2013, with the device channel I saw a gap in editing mode of the page.

To fill this gap I have created a custom component UI with jQuery that allowing to switch across the device channel panel.

This new feature of the device channel into SharePoint, allow to display the page created ad hoc for a specific device.

This is possible because comes showed the device channel panel that contains the specific html markup for the device as set into site settings -> device channel, for understanding more see the link on MSDN.

There is a requirement for realizing this sample, is necessary to create a device channel mobile and a class for doing the override and permit the display of both device channel panels in editing mode for example as the following figure:

SharePoint Device Channel

I have posted on CodePlex and MSDN gallery my free farm solution that you can download in the following link:

https://sp2013demodevicechannelswitch.codeplex.com/

https://code.msdn.microsoft.com/SharePoint-2013-Device-aa12ca36

and in this link I have posted on Github a javascript file that creates a jQuery component in the SharePoint page:

https://github.com/giuleon/spDeviceChannelPanelSwitch

Final result is: