Learn How To Customize The Look And Feel Of The FireMonkey Field Service Template Apps

by Jul 17, 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.

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.

 

Field Service Admin Client

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.

Field Service App Client

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

This text is an excerpt from the Field Service Template FAQ documentation. 
Check out the full deep dive into the Field Service Template for Android, iOS, macOS, and Windows.