Posted in Salesforce

Salesforce Lightning : Device Based Behavior

Salesforce Lightning Components are a great way to build modern intuitive development. However, when there is a need for the component or the application to behave differently in different devices, we can make use of $Browser global value provider.

$Browser global value provider allow us to distinguish device’s client in general as Desktop/Phone/Tablet. In addition, it has certain attributes that help us to find whether the device we use has Android or iOS operating system, or even the hardware of the device is iPad or iPhone or Windows Phone or plain Phone.

This global value provider can be used both in the view of the Lightning Component or in Javascript Controller.

Lightning Component

<aura:component>
    {!$Browser.formFactor} - prints DESKTOP / PHONE / TABLET
    {!$Browser.isAndroid} - prints whether the browser is running on an Android device (true) or not (false).
    {!$Browser.isIos} - prints whether the browser is running on an iOS device (true) or not (false).
    {!$Browser.isPad} - prints whether the browser is running on an iPad (true) or not (false).
    {!$Browser.isIPhone} - prints whether the browser is running on an iPhone (true) or not (false).
    {!$Browser.isPhone} - prints whether the browser is running on a phone including a mobile phone with a browser and a smartphone (true), or not (false).
    {!$Browser.isTablet} - prints whether the browser is running on an iPad or a tablet with Android 2.2 or later (true) or not (false).
    {!$Browser.isWindowsPhone} - prints whether the browser is running on a Windows phone (true) or not (false).
</aura:component>

Lightning Controller

({
    getBrowserDetail: function(component) {
        var device = $A.get("$Browser.formFactor");
        alert("This is a " + device + " device");
    },

    getBrowserDetail: function(component) {
        var iPhone = $A.get("$Browser.isPhone");
        if(iPhone) {
            alert("This is an iPhone");
        } else {
            alert("This is NOT an iPhone");
        } 
    },
})

Similarly, in Lightning Component, these attributes can be used in <aura:if> tag to show or hide certain blocks inside the component based on the device.

Note:

  1. isIOS/isIPad/isIphone will not be available in all implementations
  2. isWindowPhone only windows phones and not tablets or other devices of same category

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s