Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
Delphi

Full Featured FireMonkey Mobile Client Source Code For Delphi 10.2 Tokyo On Android, iOS, macOS, and Windows

For the server-side, the RAD Server Field Service Template makes use of a RAD Server-based REST server module. On the admin side, there is a desktop client based on FireMonkey for adding, viewing, and managing appointments. You can also use the admin client to manage parts inventory and user administration. FireMonkey was used to create the offline-capable cross-platform client app, which can be deployed to Android, iOS, macOS, and Windows. There is only one codebase and one UI. It lets you view pending and completed appointments, map their locations, and mark them as finished. You can also see the inventory of parts and receive local notifications when new appointments are synced from the server. The Field Service Template makes extensive use of both LiveBindings and FireDAC to provide a low-code solution.

The Field Service Admin project is built in RAD Studio Delphi using FireMonkey (FMX). The Admin app connects to the 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.

As of this writing, a single site license for RAD Server with RAD Studio Enterprise is available, as is a multi-site license for RAD Server with RAD Studio Architect edition.


 

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

Check out the full deep dive into the Field Service Template for Android, iOS, macOS, and Windows.

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

Do you want to create an app for iOS, Android, macOS, and Windows? Try the Multiple Platform App Development, which can help you create apps in the Delphi or C++ environments.


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

About author

FMXExpress.com has over 600 articles with all kinds of tips and tricks for Delphi FireMonkey on Android, IOS, OSX, Windows, and Linux.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES