How to modify the OOB Field Service technician service Report using PCF control

Sending
User Review
0 (0 votes)

Recently we had a requirement from one of our clients for incorporating the customization in the OOB Field service technician service report in the field service mobile and web app. Microsoft Field Service Reporting is a managed solution that can be installed in the environment.

OOB field service

Once you install the solution, the Report will appear on the Booking entity but if you are unable to see the report then you need to make sure the following two configurations are in place:

1. Make sure that the logged-in user is having “Field Service – Resource” security role

OOB field service

2. In the field service mobile app, make sure that the below two forms are added to your app.

  • Reporting
  • Booking and Work Order

OOB field service

So, the OOB report will be viewed from the Bookable Resource Booking entity using the “Report” button.

OOB field service

OOB field service

Now, we want to modify the above report, so let’s see the steps to modify this OOB field service report using the custom PCF control:

This report is developed using PCF control so, we need to modify this PCF control as per our need and upload it with a new name with the new version.

Let us understand how to incorporate the below changes:

  • Modify the Logo
  • Change the Company Name & Address

The below screenshot shows the OOB field service reporting header:

OOB field service

You need to first download the sample PCF code component solution used for the existing service report from here. Also, some prerequisites need to be installed in the machine to modify the report.

Following are the steps to update the report.

1. Open the sample code solution in the visual studio code and open Input.xml. We need to rename the control namespace, constructor & display-name-key as already a PCF control exists within the CRM with this same specific namespace and constructor. Just to avoid the duplicate name conflict issue later.

OOB field service

Here, of-type=” SingleLine.Text” since we need to bind this control to the single line text field of property name ‘bookingid’.

2. After #1, Update the class name in the ts file by using the same name as the constructor that we used above. For demonstration, we have used the name “ServiceReportPreview” here.

OOB field service

3. Open the visual studio code terminal and run the npm install

This will simply install the node module and create a subfolder that consists of all required packages for the project.

OOB field service

Note: If you are not able to install node modules with the above commands then delete package-lock.json and try to install npm again.

OOB field service

4. Once the node module is installed in #3 (it takes a few minutes), we can now modify the report.

The dummy logo has been placed under the image.ts file. This file consists of a logo that has been converted to base64. To place your logo, convert the logo to base64 with any image using a base64 converter. Once the image is converted to base64, place the code in the SAMPLE_IMAGE variable.

OOB field service

NOTE: for displaying any image in the report using PCF you need to first convert the image into Base64 format as explained above

5. Navigate to the ReportPreview Folder and open tsx file that contains the report code which defines the look and feel of the report.

In the default function, you will be able to view the dummy company and address that was initially seen while displaying the OOB field service report.

You can rename those values as per your requirements. As demonstrated below, I have changed the company name and address which were used in the header of a report previously:

OOB sample company and address details used in header previously:

OOB field service

Modified company and address details in header afterward:

OOB field service

Once done, you can verify the changes in the local host first before deploying the final changes in CRM. For doing so you can open the terminal and enter npm start to run the report in the local host.

As shown below our test went well in the local host:

OOB field service

6. To connect to your Dataverse CRM, enter pac auth create –URL https://xyz.crm.dynamics.com. In the URL enter your organization link.

OOB field service

7. List the details of the environment by entering the pac auth list and selecting the environment using the index pac auth select –index <index of the active profile>

8. Push the component solution to the environment by entering the publisher name pac PCF push –publisher-prefix <your publisher prefix>

OOB field service

Note: If the import fails then make sure that the .NET Framework developer pack has been installed on the machine.

9. Once the solution has been imported into the CRM environment. “PowerApps_dev” is the name of the solution that is imported into the CRM.

   OOB field service       

10. After #9, the next step is to select the custom PCF control of the reportview

NOTE: By default, OOB control is selected for the reportview field. You need to explicitly select your custom control, in this demonstration I have selected the “ServiceReportPreview” custom control, save the form and publish it.

While adding the control make sure you are selecting the appropriate input parameters as below:

OOB field service

And also select the platform like Web, Mobile, and Tablet, etc. from where you would like to access this report as shown below:

OOB field service

In our scenario, if we access the modified sample custom report from Web then it will look like this-

OOB field service

Conclusion

We can customize the existing field service technician service report as per our requirement by simply modifying the existing PCF code provided by Microsoft.