Deep Dive: Field Service App Template For Android And iOS With RAD Studio 10.2 Tokyo

by Jul 15, 2018

The RAD Server Field Service Template provides an end to end field service application template for routing appointments, managing parts, and user administration. It is made up of a REST server module, a desktop client, and a cross platform mobile client. The template can give you a head start in building your own field service solutions. You can download the template from within the RAD Studio IDE using Embarcadero GetIt.

Introduction

 

The RAD Server Field Service Template utilizes a RAD Server based REST server module for the server side. On the admin side there is a FireMonkey based desktop client for adding, viewing, and managing appointments. Additionally, the admin client allows you to manage parts inventory and do user administration. The offline capable cross platform client app is built in FireMonkey and it can be deployed to Android, iOS, macOS, and Windows. There is a single codebase and single UI. It allows you to view pending and completed appointments, map their locations, and mark them as completed. You can also view parts inventory and receive local notifications when new appointments are synced from the server. Both LiveBindings and FireDAC are used extensively through the Field Service Template to provide a low code solution.

The Field Service Template consists of a RAD Server backend connected to an InterBase database. RAD Service provides REST endpoints which both the Field Service Admin and the Field Service App connect to for performing CRUD operations. Additionally, there is a Field Service Setup app which you will run on the same machine as RAD Server to setup the Field Service Template database and sample data.

  • Field Service Admin

  • Field Service App

  • Field Service Server (RAD Server)

  • Field Service Setup

You should deploy and run the projects in the following order:

 

  1. RAD Server Dev Server needs to be running for the Field Service Setup app to connect to and create the user accounts.

  2. Field Service Setup app will help you set up your database, the tables and data, and your EMS user accounts.

  3. Field Service Server is a RAD Server side REST resource which both the Admin client and the App client interface with. It should be deployable on Windows and Linux through IIS, Apache, or the stand alone RAD Server (EMS) server.

  4. Field Service App is a RAD Studio FireMonkey based client application for Android, iOS, macOS and Windows. The client application should allow you to select a tenant from your RAD Server and then log in as a user. Once logged in it will download the sample appointment and parts data for your current tenant and allow appointments to be completed. Once an appointment is complete it can be submitted back to the server if there is internet access. If the Field Service App is offline it will save the changed data until it is online again.

  5. Field Service Admin is a RAD Studio FireMonkey based client application designed for desktops on Windows and macOS. The Admin app can be used to create and edit appointments, view completed appointments, create and edit parts, and create and edit users.

 

Field Service Setup

Start: Your RAD Server Dev Server should already be setup and running.

Step 1: Set a path for your field service database. Set the path to the EMSServer database.

The Field Service database is created, used, and populated with data in Step 3.

The EMSServer database link is used to populate the drop down of Tenant ID in Step 2.

Step 2: Setup the demo users on the RAD Server using the EMS API.

You will need your EMSServer Host, Port, and Tenant ID in this step. The Setup will connect to your EMSServer and create groups and users for the template. There is a Managers group which can log into the Field Service Admin app and a Technicians group for logging into the Field Service App.

You can create Tenant IDs using this tutorial: http://docwiki.embarcadero.com/RADStudio/Tokyo/en/RAD_Server_Multi-Tenancy_Support#EMS_Multi-Tenant_Console

Step 3: Create the tables and insert the data into your field service database with the Initialize All button.

This step contains the SQL setup queries for the Field Service database. There are three tables which will be set up which are: APPOINTMENTS, PARTS, TECHNICIANS

Each table will be dropped and re-created when the queries are run (any existing data in the tables will be lost). There are also TFDMemTables containing the default data and these are copied into the InterBase tables once they have been created.

Pressing the Initialize All button will execute the SQL queries against your defined Field Service database from Step 1.

Step 4: Optional. View or reset the default data in the Field Service database.

You can view the default sample data that is inserted into the database on this step. Additionally, you could come back later and reset the data in your database with the Reset button to the default data.

Step 5: Setup the IBLite license file for the Field Service App client.

IBLite requires a license file to use. Download it from the Product Registration Portal. You can find out more about doing that here:

http://docwiki.embarcadero.com/RADStudio/Tokyo/en/IBLite_and_IBToGo_Test_Deployment_Licensing

Locate the IBLite registration file that you download from the Product Registration Portal. It may be in your Downloads directory by default. The filename will be similar to regXXXX_XXXXXXXX.txt where the X's are numbers. The file will ultimately need to be named reg_iblite.txt.

Complete: After step 5 the databases and users should be setup and ready for you to use the client and admin areas.

Your EMS database and users should be setup at this point. You should be able to connect the Field Service package to your new field service database and compile the package.

Once your Field Service Server EMS package is running in the RAD Server Development Server you should be able to open and compile the Field Service App client.

 

After you complete some of the appointments via the Field Service App client you should be able to log into the Field Service Admin and see the completed appointments in the Service History.

Field Service Server

The Field Service Server is the RAD Server module for the Field Service App and the Field Service Admin to interface with.

The end points mainly return the FireDAC JSON format which can be easily loaded in to a RAD Studio client or access via standard JSON in a non-RAD Studio environment. FireDAC JSON can be loaded into various FireDAC components like TFDQuery and TFDMemTable using LoadFromStream and LoadFromFile.

Endpoints:

GET fieldservice/appts/:PageId – Returns FireDAC JSON containing the appointments list. For Managers it is all appointments. For Technicians it is only their current day appointments for their user account.

GET fieldservice/parts/:PageId – Returns FireDAC JSON containing the parts list.

GET fieldservice/technicians/:PageId – Returns FireDAC JSON containing the users list. For Managers it is all users. For Technicians it is only their own account.

POST fieldservice/update/appt – Receives FireDAC JSON containing an appointment ID and NOTES for an existing appointment, stores the data, and sets the appointment to completed.

POST fieldservice/appts/0 – Receives FireDAC JSON for creating or editing appointments. Returns FireDAC JSON with the IDs. Only users in the Managers group can use this endpoint. Passing an ID of 0 will create a new record while using an existing ID will edit the existing record.

POST fieldservice/parts/0 – Receives FireDAC JSON for creating or editing parts. Returns FireDAC JSON with the IDs. Only users in the Managers group can use this endpoint. Passing an ID of 0 will create a new record while using an existing ID will edit the existing record.

POST fieldservice/technicians/0 – Receives FireDAC JSON for creating or editing users. Returns FireDAC JSON with the IDs. Only users in the Managers group can use this endpoint. Passing an ID of 0 will create a new record while using an existing ID will edit the existing record.

 

DELETE fieldservice/appts/:Id – Takes the Id to be deleted as the last segment parameter in the URL and deletes the appointment record. Returns JSON. Only users in the Managers group can use this endpoint.

DELETE fieldservice/parts/:Id – Takes the Id to be deleted as the last segment parameter in the URL and deletes the appointment record. Returns JSON. Only users in the Managers group can use this endpoint.

DELETE fieldservice/technicians/:Id – Takes the Id to be deleted as the last segment parameter in the URL and deletes the appointment record. Returns JSON. Only users in the Managers group can use this endpoint.

User Permissions:

User permissions are governed by the {$DEFINE GROUPPERMISSIONS}. You can comment or uncomment this line for dev and live deployments. User permissions are ignored when {$DEFINE GROUPPERMISSIONS} is commented out.

By default there are two Groups setup which are Managers and Technicians.

Different data is returned depending on if the user is in the Managers or Technicians group. Some operations are only allowed by users in the Managers group.

Database Schema:

The FireDAC JSON format is used to pass data back and forth between the server, the Admin client, and the App client. The database schema for the Appointments, the Parts, and the Technicians tables are the same across all four applications. You can save the data from each of the application’s TFDMemTables out to file and load it into each of the other applications.

Field Service Admin

The Field Service Admin project is built in RAD Studio Delphi using FireMonkey (FMX). The Admin app connects to RAD Server on the backend via a REST API. You should be able to log into the Admin area by selecting a Branch ID (Tenant ID) plus entering the login and password for a user in the Managers Group. For this template the default user is manager1.

Be sure to configure the EMS_SERVER and EMS_PORT const in uMainForm.pas to point at your development server. The default is localhost 8080.

The Branch ID is stored with each data table so each branch will only see its own set of appointments, parts, and users. Each branch has its own users and groups as well. The Branch system is built on top of the Tenant functionality in RAD Server.

Appointments

Appointments are records that can be created, viewed, and edited in the Admin client. They can also be assigned to a Technician. Appointments can be viewed and completed in the Field Service App. Appointments have various fields like Appointment date and time, customer title, description, address information, phone number, location, photo, status, and notes. The photo field supports PNGs and JPGs. Addresses can be converted to longitude and latitude using the Locate button utilizing the Google Geocoding API.

 

History

The Service History list is a view into the Appointments and only shows Appointments that have been their status set to Complete. Technicians using the Field Service App submit completed appointments and include notes. The History view utilizes TFDLocalSQL to show only the completed appointments.

 

Parts

Parts are records that can be created, viewed, and edited in the Admin client. They can also be viewed by Technicians. Parts have various fields like title, description, location, quantity, and photo. The photo field supports PNGs and JPGs.

 

Users

Users are records that can be be created, viewed, and edited in the Admin client. They also show up as an individual profile to logged in Technicians. When a user is created in the Field Service database it also creates a shadow user in the RAD Server Users API where their username and password are stored. By default users can be in the Managers Group or the Technicians Group. The Group information is also stored in the RAD Server Groups API and the server accesses the RAD Server User and Group data for the permissions.

 

Data Sync

The Data Sync tab in the Admin client is where JSON data is downloaded from the Field Service Server REST endpoint and loaded up into the various in memory TFDMemTable components. Data for the Appointments, Parts, Users, and Groups is all downloaded on this tab. You can also request to Refresh the data at any time to get new updates from the server. Additionally, there is a background TTimer which will refresh the data from the server automatically on an interval.

Architecture

The architecture of the app is built in a low code rapid application development style using TTabControls for handling pages and individual frames for each page. TActionList is used to consolidate much of the code in the MainForm. There are two TTabControls on the MainForm. The first one contains the Login frame and the second TTabControl. The second TTabControl contains the rest of the frames. Within the ApptsFrame, HistoryFrame, PartsFrame, and TechsFrame there are additional Master/Detail TTabControls.

If you want to make changes to the design time frames be sure to edit the frame itself and not the version of it that is embedded in the MainForm. This will keep your changes consolidated in one place. If your changes don't update in the MainForm you can delete the Frame from the MainForm and re-add it. Be sure to add it to the correct Tab and set to Align Client after you add the frame.

The frames are built to be as modular as possible with TBindSourceDB components used as endpoints for the LiveBindings. This allows you to easily re-use the frames in your own projects by connecting the TBindSourceDBs to your own datasets.

A TFDLocalSQL component is used to provide SQL access to the various TFDMemTables via TFDQuery components. This allows the App to provide query results for filtering some of the datasets.

  • uDataModule in 'uDataModule.pas' {MainDM: TDataModule},
    Contains the RAD Server (EMS) Provider client components, the in memory table components, and the various FireDAC connecting components.

  • uMainForm in 'uMainForm.pas' {MainForm},
    Contains the main form of the application with the various TTabControls and inline embedded TFrames.

  • uLoginFrame in 'uLoginFrame.pas' {LoginFrame: TFrame},
    Contains the UI and code for the Login screen.

  • uApptsFrame in 'uApptsFrame.pas' {ApptsFrame: TFrame},
    Contains the UI and code for the Appointments screen.

  • uHistoryFrame in 'uHistoryFrame.pas' {HistoryFrame: TFrame},
    Contains the UI and code for the History screen.

  • uPartsFrame in 'uPartsFrame.pas' {PartsFrame: TFrame},
    Contains the UI and code for the Parts screen.

  • uTechsFrame in 'uTechsFrame.pas' {TechsFrame: TFrame},
    Contains the UI and code for the Users screen.

  • uProgressFrame in 'uProgressFrame.pas' {ProgressFrame: TFrame},
    Contains the activity progress TFrame which is displayed when the app is busy.

  • uTenantsDM in 'uTenantsDM.pas' {TenantsDM: TDataModule},
    Contains the RAD Server (EMS) Provider connector components for accessing the Branch (Tenants) list.

  • uTenantListForm in 'uTenantListForm.pas' {TenantForm},
    Contains the UI and code for selecting a Branch/Tenant.

  • uQueueFrame in 'uQueueFrame.pas' {QueueFrame: TFrame},
    Contains the UI and code for syncing data from the server.

  • uGroupsListForm in 'uGroupsListForm.pas' {GroupsForm},
    Contains the UI and code for selecting a Group.

  • uTechsListForm in 'uTechsListForm.pas' {TechsForm};
    Contains the UI and code for selecting a Technician to assign to an appointment.

Permissions

The Field Server Admin app will make an additional call after it logs in to download the list of Groups that the current user account is in. It will check to see that the user is in the Managers Group. If the user is not in the Managers Group it will log you back out. There are additional permissions in the Field Server Server which govern what data is sent down to which users as well. Only users in the Managers Group will receive the full data and be able to make changes to it.

Customize The UI

You can quickly and easily customize most of the look and feel of the app with three easy changes. In TMainForm there is a BackgroundRect, a BackgroundImageRect, and a EmeraldDarkStyleBook control. You can change the background color of the app by changing the BackgroundRect.Fill.Gradient property. You can change the image that is overlayed over the entire app by changing the BackgroundImageRect.Fill.Bitmap.Bitmap property. The background image works by being above all of the other controls, having a low Opacity, having a HitTest of False and a Locked property of True. Finally, you can change most of the rest of the theme by loading different Premium Styles into the EmeraldDarkStyleBook control.

You can customize the header logo of the Login screen on the LoginFrame. There are a few other places where the custom green color is used on some elements in the TListView controls and some the search icons using a TFillRGBEffect.

You will need to update the BackgroundRect and BackgroundImageRect in the GroupsListForm, the TechsListForm, and the TenantForm as well. There is a BackgroundImage control in the LoginFrame if want to customize the background of the Login page. Remember that you will need to load one style for each of the four deployment platforms. You can access the Premium Styles here:

https://www.embarcadero.com/products/rad-studio/fireui/premium-styles

https://cc.embarcadero.com/item/30491

Field Service App

The Field Service App client project which is built in RAD Studio Delphi using FireMonkey (FMX). The client is targeted for deployment to Android, iOS, macOS, and Windows. The Field Service App client connects to RAD Server on the backend via a REST API. You should be able to log into the App client by selecting a Branch ID (Tenant ID) plus entering the login and password for a user in the Technicians Group. For this template the default users are technician1 and technician2.

Be sure to configure the EMS_SERVER and EMS_PORT const in uMainForm.pas to point at your development server. The default is localhost 8080.

The Branch ID is stored with each data table so each branch will only see its own set of appointments, parts, and users. Each branch has its own users and groups as well. The Branch system is built on top of the Tenant functionality in RAD Server.

Appointments

Appointments are records that can be viewed in the Field Service App client. When you are logged in as a Technician you will only see appointments assigned to you, marked as pending, and with a date of today. Appointments have various fields like Appointment date and time, customer title, description, address information, phone number, location, photo, status, and notes. You can view a static map of the address of the appointment plus you can press a Locate button to bring up an interactive map of the address. You can also click on the phone number on a mobile device and it will launch the call functionality of the device. Technicians can enter notes about an appointment and mark it as complete. The notes and status change are sent to the server.

 

History

The Service History list is a view into the Appointments and only shows Appointments that have been their status set to Complete for this technician for today. Newly completed records show up in the History tab even if they have not yet been synced with the server yet.

 

Parts

Parts are records that can be viewed in the Field Service App client. Parts have various fields like title, description, location, quantity, and photo. Parts are not editable in the Field Service App but the data does get updated when synced from the server.

 

Profile

The profile section shows the current Technician that is logged into the Field Service App and their various information. You can also choose to disable the local notifications here. Profile information also shows up in the TMultiView menu.

 

Notify

The notify section shows new appointments that have been downloaded from the server that have not yet been viewed by the current technician. Choosing a notification here will take you to the appointment for that notification. Local notifications are also implemented and when new appointments are received local notifications will be sent to the device. The notification functionality is built so that you can implement your own remote notifications using the same system if needed.

 

Data Sync

The Data Sync tab in the Field Service App client is where JSON data is downloaded from the Field Service Server REST endpoint and loaded up into the local IBLite database. Data for the Appointments, Parts, and Technician is all downloaded on this tab. You can also request to Refresh the data at any time to get new updates from the server. Additionally, there is a background TTimer which will upload and sync the completed data from the Field Service App automatically on an interval. A cloud icon will appear in the upper left of the Field Service App when there is data to be synced in the queue.

Architecture

The architecture of the app is built in a low code rapid application development style using TTabControls for handling pages and individual frames for each page. TActionList is used to consolidate much of the code in the MainForm. There are two TTabControls on the MainForm. The first one contains the Login frame and the second TTabControl. The second TTabControl contains the rest of the frames. Within the ApptsFrame and the HistoryFrame there are additional Master/Detail TTabControls.

If you want to make changes to the design time frames be sure to edit the frame itself and not the version of it that is embedded in the MainForm. This will keep your changes consolidated in one place. If your changes don't update in the MainForm you can delete the Frame from the MainForm and re-add it. Be sure to add it to the correct Tab and set to Align Client after you add the frame.

The frames are built to be as modular as possible with TBindSourceDB components used as endpoints for the LiveBindings. This allows you to easily re-use the frames in your own projects by connecting the TBindSourceDBs to your own datasets.

  • uDataModule in 'uDataModule.pas' {MainDM: TDataModule},
    Contains the RAD Server (EMS) Provider client components, the in memory table components, the IBLite tables, and the various FireDAC connecting components.

  • uMainForm in 'uMainForm.pas' {MainForm},
    Contains the main form of the application with the various TTabControls and inline embedded TFrames. Additionally, it includes the TNotificationCenter.

  • uLoginFrame in 'uLoginFrame.pas' {LoginFrame: TFrame},
    Contains the UI and code for the Login screen.

  • uApptsFrame in 'uApptsFrame.pas' {ApptsFrame: TFrame},
    Contains the UI and code for the Appointments screen.

  • uHistoryFrame in 'uHistoryFrame.pas' {HistoryFrame: TFrame},
    Contains the UI and code for the Service History screen.

  • uPartsFrame in 'uPartsFrame.pas' {PartsFrame: TFrame},
    Contains the UI and code for the Parts screen.

  • uProfileFrame in 'uProfileFrame.pas' {ProfileFrame: TFrame},
    Contains the UI and code for the Profile screen.

  • uNotifyFrame in 'uNotifyFrame.pas' {NotifyFrame: TFrame},
    Contains the UI and code for the Notification screen.

  • uProgressFrame in 'uProgressFrame.pas' {ProgressFrame: TFrame},
    Contains the activity progress TFrame which is displayed when the app is busy.

  • uTenantsDM in 'uTenantsDM.pas' {TenantsDM: TDataModule},
    Contains the RAD Server (EMS) Provider connector components for accessing the Branch (Tenants) list.

  • uTenantListForm in 'uTenantListForm.pas' {TenantForm},
    Contains the UI and code for selecting a Branch/Tenant.

  • uQueueFrame in 'uQueueFrame.pas' {QueueFrame: TFrame},
    Contains the UI and code for syncing data from the server.

  • uWebBrowserForm in 'uWebBrowserForm.pas' {WebBrowserForm};
    Contains the UI and code for viewing real time map data in a TWebBrowser.

Offline Caching

The Field Service App is able to work offline once you have logged into your account at least once. The next time you log into the app it will use your previous RAD Server Session ID for any new connections it tries to make to the server. The data from the server is cached as JSON files and stored in the IBLite database. The Appointments are saved as appts.json, the Parts as parts.json, the Techs as technicians.json, and the Tenants as tenants.json. If no connection to the server is available the data will be loaded from those files instead. Additionally, if there is no internet connection it will save the appointments and notes that you have marked completed in the History table of the IBLite database. When the next time an internet connection is detected it will upload those changes.

The Field Service App has a local History table where is stores the local changed state of the Appointments. Even if you re-sync the data from the server and your changes have not been uploaded yet it will apply your existing local changes to this new data until which time it is able to upload the changes to the server.

If you log out of the existing account the local database is deleted until you log in again. If you log out before uploading your changes then you changes would be lost.

Notifications

The local notification functionality built into the Field Service App relies on the cross platform  TNotificationCenter component that is built into RAD Studio. There is a local IBLite Notify table in the Field Server App where it stores the current state of notifications (whether the user has viewed them already and whether they have been sent to the user’s platform).

When a new Appointment is downloaded from the server during a data sync a new record is added to the IBLite Notify table. A notification is sent to the platform through the TNotificationCenter when this happens. The user can view the notification by clicking on the record on the Notify tab. Once a notification is viewed it will no longer be displayed on the Notify tab.

Each platform handles notifications differently. You should be able to hook up remote notifications as well through this existing local notification system.

Customize The UI

You can quickly and easily customize most of the look and feel of the app with three easy changes. In TMainForm there is a BackgroundRect, a BackgroundImageRect, and a EmeraldDarkStyleBook control. You can change the background color of the app by changing the BackgroundRect.Fill.Gradient property. You can change the image that is overlayed over the entire app by changing the BackgroundImageRect.Fill.Bitmap.Bitmap property. The background image works by being above all of the other controls, having a low Opacity, having a HitTest of False and a Locked property of True. Finally, you can change most of the rest of the theme by loading different Premium Styles into the EmeraldDarkStyleBook control.

You can customize the header logo of the Login screen on the LoginFrame. There are a few other places where the custom green color is used on some elements in the TListView controls and some the search icons using a TFillRGBEffect.

The Profile screen for the technician has a background image in the ProfileFrame called HeaderBackgroundRect plus a BackgroundRect control. The Profile is also displayed in the TMultiView control on the MainForm with another control named HeaderBackgroundRect as well. Change the Fill.Bitmap.Bitmap property on both controls.

You will need to update the BackgroundRect and BackgroundImageRect in the WebBrowserForm and the TenantForm as well. Remember that you will need to load one style for each of the four deployment platforms. You can access the Premium Styles here:

https://www.embarcadero.com/products/rad-studio/fireui/premium-styles

https://cc.embarcadero.com/item/30491