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.

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

Advertisements

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