Mobile and Offline Developer Guide
jGeofencingService Example
Here’s a basic example of a Lightning web component that uses GeofencingService to
monitor when a user arrives at or departs from a geographic region.
Here’s a basic example of a Lightning web component that uses GeofencingService to monitor and determine when a user arrives or departs a geographic region.
1<template>
2 <lightning-card title="Geofencing Service" icon-name="custom:custom14">
3 <div class="slds-var-m-around_medium">
4 <p><lightning-formatted-text value={geofencingResults}></lightning-formatted-text></p>
5 <div class="slds-var-m-around_medium">
6 <p>Create an entry and exit geofence at the Salesforce Tower:</p>
7 <lightning-button variant="brand" label="Add Geofences"
8 title="Add Geofences to SF Tower"
9 onclick={addGeofence}
10 class="slds-var-m-around_x-small"
11 disabled={geofencingServiceDisabled}>
12 </lightning-button>
13 </div>
14 <div class="slds-var-m-around_medium">
15 <p><lightning-formatted-text value={geofencingAddedResults}></lightning-formatted-text></p>
16 </div>
17 </div>
18 <div class="slds-var-m-around_medium">
19 <div class="slds-var-m-around_medium">
20 <p>Remove all active geofences:</p>
21 <lightning-button variant="brand" label="Remove All Geofences"
22 title="Remove all geofences"
23 onclick={removeGeofences}
24 class="slds-var-m-around_x-small"
25 disabled={geofencingServiceDisabled}>
26 </lightning-button>
27 </div>
28 <div class="slds-var-m-around_medium">
29 <p><lightning-formatted-text value={removeGeofencesResults}></lightning-formatted-text></p>
30 </div>
31 </div>
32 <div class="slds-var-m-around_medium">
33 <div class="slds-var-m-around_medium">
34 <p>Get list of all active geofences:</p>
35 <lightning-button variant="brand" label="Get Active Geofences"
36 title="Get active geofences"
37 onclick={getActiveGeofences}
38 class="slds-var-m-around_x-small"
39 disabled={geofencingServiceDisabled}>
40 </lightning-button>
41 </div>
42 <div class="slds-var-m-around_medium">
43 <p><lightning-formatted-text value={activeGeofencesResults}></lightning-formatted-text></p>
44 <ul class="slds-var-m-around_medium">
45 <template for:each={activeGeofences} for:item="geofence">
46 <li key={geofence}>{geofence}</li>
47 </template>
48 </ul>
49 </div>
50 </div>
51 </lightning-card>
52</template>The component’s JavaScript file imports getGeofencingService() and uses it to get a GeofencingService instance. When the component is initialized, it tests whether GeofencingService is available and disables the buttons if it isn’t. Each button’s handler calls the corresponding GeofencingService function and displays the outcome in the template. This example monitors an entry geofence and an exit geofence at the Salesforce Tower.
1// geofencingServiceExample.js
2import { LightningElement } from 'lwc';
3import { getGeofencingService } from 'lightning/mobileCapabilities';
4
5export default class GeofencingServiceExample extends LightningElement {
6
7 // Internal component state
8 myGeofencingService;
9 geofencingServiceDisabled = false;
10 geofencingResults;
11 geofencingAddedResults;
12 removeGeofencesResults;
13 activeGeofencesResults;
14 activeGeofences = [];
15
16 // Define an entry and an exit geofence at the Salesforce Tower
17 sftowerEntry = {
18 latitude: 37.7899,
19 longitude: -122.3969,
20 radius: 50,
21 notifyOnEntry: true,
22 notifyOnExit: false,
23 message: 'Welcome to Salesforce Tower',
24 triggerOnce: false
25 };
26 sftowerExit = {
27 latitude: 37.7899,
28 longitude: -122.3969,
29 radius: 50,
30 notifyOnEntry: false,
31 notifyOnExit: true,
32 message: 'Thanks for visiting Salesforce Tower',
33 triggerOnce: false
34 };
35
36 // When the component is initialized, detect whether GeofencingService is available
37 connectedCallback() {
38 this.myGeofencingService = getGeofencingService();
39 if (this.myGeofencingService == null || !this.myGeofencingService.isAvailable()) {
40 // GeofencingService isn't available, so disable the buttons
41 this.geofencingServiceDisabled = true;
42 this.geofencingResults =
43 'GeofencingService is not available. Try again from the Salesforce app on a mobile device.';
44 } else {
45 this.geofencingResults = 'GeofencingService is available.';
46 }
47 }
48
49 // Start monitoring the entry and exit geofences at the Salesforce Tower
50 addGeofence() {
51 if (this.myGeofencingService != null && this.myGeofencingService.isAvailable()) {
52 Promise.all([
53 this.myGeofencingService.startMonitoringGeofence(this.sftowerEntry),
54 this.myGeofencingService.startMonitoringGeofence(this.sftowerExit)
55 ])
56 .then((ids) => {
57 this.geofencingAddedResults = `Geofences added with IDs: ${ids.join(', ')}`;
58 })
59 .catch((error) => {
60 this.geofencingAddedResults = `Error: ${JSON.stringify(error)}`;
61 });
62 }
63 }
64
65 // Stop monitoring and remove all active geofences
66 removeGeofences() {
67 if (this.myGeofencingService != null && this.myGeofencingService.isAvailable()) {
68 this.myGeofencingService
69 .stopMonitoringAllGeofences()
70 .then(() => {
71 this.removeGeofencesResults = 'All geofences removed.';
72 this.activeGeofences = [];
73 })
74 .catch((error) => {
75 this.removeGeofencesResults = `Error: ${JSON.stringify(error)}`;
76 });
77 }
78 }
79
80 // Get the IDs of all active geofences
81 getActiveGeofences() {
82 if (this.myGeofencingService != null && this.myGeofencingService.isAvailable()) {
83 this.myGeofencingService
84 .getMonitoredGeofences()
85 .then((results) => {
86 this.activeGeofences = JSON.parse(JSON.stringify(results));
87 this.activeGeofencesResults = `Number of active geofences: ${this.activeGeofences.length}`;
88 })
89 .catch((error) => {
90 this.activeGeofencesResults = `Error: ${JSON.stringify(error)}`;
91 });
92 }
93 }
94}