Custom panel example: Users in a Geofence

Custom panels in GpsGate are mash-ups that use REST API resources. You can dynamically display data from GpsGate and other business systems in the Vehicle Tracker. In this article we will describe how to right-click on a geofence and list all vehicles inside it.

Learn more about custom panels.


Custom Panels setup

In this example, we use a script resource that will create a mash-up panel. We recommend that you host all your custom panels under the ”\GpsGateServer\IIS\VehicleTracker\CustomPanels” folder on your GpsGate server.

Paste the content of the CustomPanels.zip file in your local server in the following path:

GpsGateServer\IIS\VehicleTracker\CustomPanels\

mceclip0.png

If you have a hosted server, please contact support.

App Builder setup

The following step is to configure the App Builder and add the right-click script option for your geofences.

1. Select Admin > Developer > App Builder

2. Select + App

mceclip0.png

3. Add a name and a description and click on Save

mceclip8.png

4. Select + Click Script

mceclip2.png 

5. Put a name to your new script and select in Kind the option GeofenceRightclicMenu

mceclip9.png

6. Click on Edit

7. Paste in the following code into the editor:

ui.iframe(
'usersingeofence',
'Geofence/Users',
'https://myserver/gpsgateserver/VehicleTracker/CustomPanels/GeofenceUserPanel/geofenceuser.html?applicationid=' + application.id + '&geofenceid=' + geofence.id,
100, 100, 1300, 650
);

  • Where myserver is the URL of your current server. Note that you should use either HTTP or HTTPS in the URL according to how your server is configured.
  • Where appID is your application ID number. You can see this number at the end of the URL of your app.

8. Select a Geofence from your Geofence panel and click on Run Script button

Then click on Save.

mceclip10.png

9. Click on Save again

mceclip11.png

Now your script is ready

mceclip12.png

Testing

1. Select a geofence you want to count your vehicles on, and right click on it.

2. Select your script previously created

mceclip13.png

As a result, you'll get a new panel with the new information represented in a mash-up style (the vehicles within the selected geofence)

mceclip2.png