How to Get the Browsing Device Information in Lightning?

Poster Detect Browse

Lightning mainly focuses on the user experience on the web and mobile interfaces. So, most of the scenarios we should need to know the information of the browser to align the design with respect to the device browser.  In this post, I would like to discuss, how we can detect the browsing device information in a lightning component.

To address this issue, we can use $Browser global value provider The $Browser global value provider returns information about the hardware and operating system of the browser accessing the application.

  • {!$Browser.formFactor} 
    • Returns a FormFactor enum value based on the type of hardware the browser is running on.
      • DESKTOP for a desktop client
      • PHONE for a phone including a mobile phone with a browser and a smartphone
      • TABLET for a tablet client (for which isTablet returns true)
  • {!$Browser.isTablet}
    • Return true if the browser is running on an iPad or a tablet with Android 2.2 or later otherwise false
  • {!$Browser.isPhone}
    • Return true if the browser is running on a phone including a mobile phone with a browser and a smartphone otherwise false
  • {!$Browser.isAndroid}
    • Return true if the browser is running on an android device, otherwise false
  • {!$Browser.isIOS}
    • Return true if the browser is running on an IOS device, otherwise false
  • {!$Browser.isIPhone}
    • Return true if the browser is running on an iPhone, otherwise false
  • {!$Browser.isWindowsPhone}
    • Return true if the browser is running on a windows phone, otherwise false
  • {!$Browser.isIPad}
    • Return true if the browser is running on an iPad, otherwise false

Example

This example shows usage of the $Browser global value provider.

Here, I have created a lightning component (DetectMyDevice.cmp)  which is invoked from the lightning app named DetectMyDeviceApp.app.  The lightning component checks different conditions based on $Browser global value provider and displays the browsing device details.

Please see the code comments for more details.

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<lightning:card title="Detect Your Device" class="slds-m-around_large">
<aura:set attribute="actions">
<lightning:button label="Browser Info" onclick="{!c.browse}" />
</aura:set>
<div class="slds-p-horizontal_medium">
<aura:if isTrue="{!$Browser.formFactor == 'DESKTOP'}">
<p>You are using Desktop <lightning:icon iconName="utility:desktop" alternativeText="Desktop!" variant="error"/> Browser </p>
</aura:if>
<aura:if isTrue="{!$Browser.formFactor == 'PHONE' || $Browser.isPhone}">
<p>You are using Desktop <lightning:icon iconName="utility:phone_portrait" alternativeText="Phone!" variant="error"/> Browser </p>
</aura:if>
<aura:if isTrue="{!$Browser.formFactor == 'TABLET ' || $Browser.isTablet}">
<p>You are using Tablet <lightning:icon iconName="utility:tablet_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
</aura:if>
<aura:if isTrue="{!$Browser.isIPad || $Browser.isTablet}">
<p>You are using IPad <lightning:icon iconName="utility:tablet_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
</aura:if>
<aura:if isTrue="{!$Browser.isIPhone}">
<p>You are using IPhone <lightning:icon iconName="utility:phone_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
</aura:if>
<aura:if isTrue="{!$Browser.isAndroid || $Browser.isPhone}">
<p>You are using Android phone <lightning:icon iconName="utility:phone_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
</aura:if>
</div>
</lightning:card>
</aura:component>

<aura:application extends="force:slds" >
<c:DetectMyDevice />
</aura:application>

({
browse : function(component, event, helper) {
//$A – global aura namespace, get method returns the value referenced
var device = $A.get("$Browser.formFactor");
alert("You are using a " + device);
}
})

You can check the same code in this git repository.

 

Poster Detect Browse

Don’t forget to share the post if you like it & bookmark the blog for future references. If you have any comments or doubts on this post, Please comment on the box below.

References

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_browser_value_provider.htm

https://github.com/anilsomasundaran/Detect-Browsing-Device

1 thought on “How to Get the Browsing Device Information in Lightning?”

  1. Nigel McGavin

    Howdy!

    You Need Leads, Sales, Conversions, Traffic for techevangel.com ? Will Findet…

    I WILL SEND 5 MILLION MESSAGES VIA WEBSITE CONTACT FORM

    Don’t believe me? Since you’re reading this message then you’re living proof that contact form advertising works!
    We can send your ad to people via their Website Contact Form.

    IF YOU ARE INTERESTED, Contact us => lisaf2zw526@gmail.com

    Regards,
    McGavin

Leave a Reply

%d bloggers like this: