Thursday, April 24, 2014

SharePoint2013: Toggling Between Mobile and Desktop Views with Device Channels Using Cookies

Scenario: Toggling between mobile and desktop views using cookies

Solution: After creating the device channels, to toggle from desktop view to mobile view do the following in the Desktop master page.
<li><a href="javascript:Microsoft.SetMobileView()"><asp:Literal runat="server" Text="MobileView" /></a></li>

var MobileSiteAlias = "Mobile";

Microsoft.SetMobileView = function () {
    Microsoft.CreateChannelCookie(MobileSiteAlias);
    window.location.reload();
}

Below we are setting the "deviceChannel" cookie to expire in 30 days
Microsoft.CreateChannelCookie = function (value) {  
    SetCookie("deviceChannel", value, 30 * 24 * 60);
};

In code (in other pages like display templates) we can use the aliases as below
if(effectiveDeviceChannel == MobileSiteAlias)
{
   //Do something say, have HTML markup specific to particular device
}

No comments:

Post a Comment