SharePoint Tidbit - SharePoint 2013 Device Channels

Hello All,

As promised I’m doing a series of SharePoint Tidbits on things I have learned about SharePoint 2013 during my classes.  And the first I thought I would discuss was device channels.

Device Channels is a feature under Web Content Management, and this feature is to improve the way we deal with pages.  In WSSv3 and MOSS 2007 you got one mobile page, it was the same no matter what kind of mobile device you were using.  Which meant there where two ways to view the Site Collection the regular page and the mobile page.

So in SharePoint 2013 we have created a way that designers can design a site once, and then based on that design we will render it using different Style Sheets and Master Pages, multiple times.  We can have these different sheets and Master Pages for one single device or a group of multiple devices together, it all depends on what experience you want to provide you users.

But hold it….how do we recognize which client goes to which Channel.  Good question and we base the channels primarily on the User Agent String but if you want you can also use Query Strings, Cookies, or Custom Code.   The User Agent String as I’m sure we all know identifies which browser you are using to connect with it is sent from the Client to the Server within the initial headers and contains certain tokens like Operating System, Browser, etc.

Finally how to set it up

  1. Create a Site Collection using the Publishing Template
  2. Go to Site Settings -> Look and Feel -> Device Channels
  3. You will see that the Default Channel is automatically created for you, I recommend you leave it for any devices that you don’t design to specifically.
  4. Now we need to create a channel for the devices we want to design for specifically.
    1. Click on New Item
    2. Enter a Name this is to identify the Channel when in the Site Collection
    3. Enter a unique Alias
    4. Enter a Description
    5. Enter one or more Device Inclusion Rules, these rules are one per line and need to include an identifying token from the User Agent like Windows Phone OS 7.5 or Android
      4.0.3 or Safari/419.3
    6. Lastly there is a check box to make the channel active
    7. Now that you have the channel active and categorized you have to setup the different Site resources to the Channel, this can be done in two different ways
      1. Alternate Master Pages
        i.     Create your desired Master Page in the Master Page Gallery (Make sure it is approved)
        ii.     Under Site Settings go to Look and Feel -> Master Page then for each Channel select the Master Page that you want used
      2. Device Channel Panels    
        i.     This is a control added to Page Layouts that are linked to a specific Channel and will only show when the connection comes thru that Channel.

Here are some of the browsers I would expect us to support

  1. Internet Explorer Mobile 9/10
  2. Safari
  3. Android
  4. Blackberry
  5. Nokia

Remember that you do not necessarily need the device to test your channel as there some great emulators out there, I have included links to them below

NOTE: I do not endorse or recommend any of these tools

https://www.microsoft.com/en-us/download/details.aspx?displaylang=en\&id=26716

https://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.92).aspx

https://www.microsoft.com/en-us/download/details.aspx?id=13890

https://www.blogsdna.com/10400/android-2-2-froyo-emulator-for-pc-and-mac-os-x.htm

https://www.addictivetips.com/windows-tips/download-google-android-emulator/

https://developer.android.com/sdk/index.html

https://www.brothersoft.com/iphone-simulator-208745.html

https://www.genuitec.com/mobile/

https://iphonemonsta.com/free-iphone-browser-simulator-for-windows-linux-mac

 

Articles you may find useful 

List of User Agent Strings

https://www.useragentstring.com/pages/useragentstring.php

Understanding User-Agent Strings

https://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx

Overview of mobile devices and SharePoint Server 2013

https://technet.microsoft.com/en-us/library/fp161351(v=office.15).aspx

What's new for mobile devices in SharePoint Server 2013

https://technet.microsoft.com/en-us/library/fp161352(v=office.15).aspx