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)
- Returns a FormFactor enum value based on the type of hardware the browser is running on.
- {!$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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:application extends="force:slds" > | |
| <c:DetectMyDevice /> | |
| </aura:application> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| 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.
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
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