Device channel panels and web parts walktrough

Hi guys, this an article i wanted to write one year ago about device channel panels in SharePoint 2013. I think you know what a device channel is, don't you?
"NO"
It's a new "exciting" SP2013 feature which could be considered as responsive web design alternative (or complement). It offers the possibility of defining different master pages, page layouts and (more important) site contents for different devices, mantaining the same website URL.
"Cool"
Wanna read more? Read official doc
http://msdn.microsoft.com/en-us/library/office/jj862343%28v=office.15%29.aspx ...and why don't read also this?
http://blog.mastykarz.nl/device-channels-sharepoint-2013/ If you wanna know more Google/Bing is your friend. I'm here to solve problems my dear.
 Problems? Have you found a problematic case?
Yeah.
If we want to load web parts as site content for different devices we have little problems. Let me show you this little bug .

A pratical example
Let's head Example 04 on the usual project (download latest version clicking here or from Download page), deploy and activate the feature Example 04. I created three device channels, but we will use just two of them during this little demo, named IE and FF: the first is a device channel for Internet Explorer browser, the second one is a device channel for Firefox browser.
I have used those device channel in order to keep it simple the most, in the real world you can detect devices using lots of user agent string combinations.
Let's create a DeviceChannelsArticlePage page with DeviceChannelArticle_Demo layout.
The content type extends Article page and has two fields: Internet Explorer field and Mozilla Firefox field.
In order to show contents conditionally, it's necessary to create fields that will be conditionally loaded. Fields will be wrapped in device channel panels, so it's like to say: "When you intercept this device, load those fields" and the page layouts become something like this

Now if we try to add HTML content using page layout everything works fine, let's try to do the same thing adding content editor webparts... so follow these steps

1. Edit page using Internet Explorer
2. Add a content editor web part and Save
3. Edit the same page using Mozilla Firefox
4. Add another content editor web part and Save
5. View page using Internet Explorer 

Step 1 & Step 2

Step 3 & Step 4

Step 5

And, even if Internet Explorer content is here with us, web part disappeared and... this is not properly the expected behaviour, yeah?
This is because even if you add several HTML fields in order to simulate web part zones, web parts are loaded in just one web part zone called WPZ. When you edit fields you are overwriting WPZ.
Let me explain the process better:

1. Edit page using Internet Explorer
2. Add a content editor web part and Save >> Web part is added to WPZ
3. Edit the same page using Mozilla Firefox >> Device channel panel don't let you see the previously added web part, this is a correct behaviour, since you don't see the previously added web part, WPZ thinks you have removed that one
4. Add another content editor web part and Save >> It's like adding a new web part to a empty WPZ
5. View page using Internet Explorer >> I think it's clear why you don't see anything in Internet Explorer

Solution(s)
Oh oh, and now? You have two possible solutions, the first one use OOB controls, the second one is a custom one.

OOB approach

Simply create a new page layout with this schema

Wrap device channel panels in a display mode panel, and duplicate the same fields placeholder (without device channel panels) in a edit mode panel.
This will let device channels to be used only for conditional web part display, instead fields editing will be done at single time, so WPZ will be erased no more.

 VLibs approach (applause)

Why use OOB device channel panel when you can use my overriden VLibs device channel panel?
The advantage is to keep page layout simple.

How it works?
Simply the control understand if you are editing or displaying the page and, if in edit mode, it ignores device channel recognition and shows the entire content.

For more code please download the VLibs source here.

P.S.
I sense a disturbance in the force... a new question...
"What if content editor web part contains javascript?"
Well, stay tuned... this is the content of the next article.

Read More