Enabling The effectiveDeviceChannel JavaScript Variable

Device Channels in SharePoint can set a JavaScript variable that you can use to dynamically render content based on the Device Channels.  The variable is called effectiveDeviceChannel.  This variable is turned off by default.  To enable it simply add a property named  PublishingInformationControlIncludeEffectiveDeviceChannel to the property bag of the root site in your site collection and give it a value of true.

Here’s some PowerShell that does it.

$web = Get-SPWeb http://wcm.powder.ski/sites/pso

$web.AllProperties["PublishingInformationControlIncludeEffectiveDeviceChannel"] = "true"

$web.Update()

After you add the property, you can access it inside a Display Template and react to the variable and render your content based on Device Channels, like this:

<!–#_

}

if(!line3.isEmpty && effectiveDeviceChannel!=”Mobile”)

{

_#–>

<div class=”cbs-pictureLine3 ms-textSmall ms-noWrap”id=”_#= line3Id =#_”title=”_#= line3 =#_”>Model: _#= line3 =#_</div>

<!–#_

}

This example only renders the Model number for an item displayed by the Content By Search Web Part that uses this Display Template.  The Model number is mapped to the line3 variable.

Here’s what the output looks like in the Default Device Channel.  Notice the Model number is displayed for the product.

Here’s what the output looks like in the Mobile Device Channel.  Notice the Model number is not displayed for the product.

Go get your ski goggles!  ABasin opens in 2 days!