{"id":35913,"date":"2023-09-06T12:16:48","date_gmt":"2023-09-06T06:46:48","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=35913"},"modified":"2023-09-07T10:17:34","modified_gmt":"2023-09-07T04:47:34","slug":"execute-ssrs-report-using-javascript-in-dynamics-365-field-service-mobile-app","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2023\/09\/execute-ssrs-report-using-javascript-in-dynamics-365-field-service-mobile-app\/","title":{"rendered":"Execute SSRS report using JavaScript in Dynamics 365 Field Service Mobile App"},"content":{"rendered":"

Microsoft\u2019s Dynamics 365 Field Service Mobile app<\/a> provides the ability to work on tasks and resolve issues from the mobile platform in online and offline modes. The technician can view their daily schedule, which includes details such as customer names, addresses, and appointment times.<\/p>\n

They can see the priority of each service call, helping them prioritize urgent repairs. Before arriving at a customer’s location, the technician can access detailed customer information, including contact details and a history of previous service calls.<\/p>\n

From the web, we can run an SSRS Report for a record by the Run Report<\/strong> button but on the mobile Run Report<\/strong> button is not visible.<\/p>\n

Here comes one scenario if the technician arrives at the customer location and wants to run a report related to any record from the Mobile App, Microsoft has provided a way to show Reports on the Mobile App that is by PCF control \u201cTechnician Service Reports<\/strong>\u201d.<\/p>\n

Refer to the below link for more details,<\/p>\n

https:\/\/learn.microsoft.com\/en-us\/dynamics365\/field-service\/mobile-powerapp-reporting<\/a><\/p>\n

Using this way, we can add a Report<\/strong> button on the form which will be visible on the Mobile App. But what if we want to run multiple reports from the mobile app, in this case, we need to add multiple Buttons with\u00a0 Multiple PCF controls which will be a very time-consuming and inappropriate way.<\/p>\n

So there is one workaround for this, we can add a functionality to show SSRS reports using JavaScript on the form without adding a button.<\/p>\n

This workaround allows users to access and view relevant reports directly within the form in the Mobile App, which will help streamline decision-making and enhance efficiency.<\/p>\n

NOTE: This functionality will work on Mobile App online mode and Mobile App Offline mode with network connectivity.<\/em><\/strong><\/p>\n

In this blog, we are taking an example of a Work Order Entity to show Reports on form,<\/p>\n

To achieve this, We can develop a Javascript library and we can add a dynamic option set field to the Work Order form. This field contains the Names and IDs of various reports. The purpose of adding the names and IDs of the reports on the field\u2019s Label is we can use those values in the Javascript code to execute the report from the server.<\/p>\n

We could store Names and IDs in the value of the Option set field but there are OOB limitations that the Optionset field\u2019s value contains only Numbers. So, we need to store the Names and IDs on the field\u2019s Label.<\/p>\n

By selecting a report from the dropdown, users can instantly view the desired report’s content within the form.<\/p>\n

Check the steps to achieve the same:<\/strong><\/p>\n

Step 1<\/strong>:<\/p>\n

First, we can add one Option Set field with the appropriate name on the form. As below, we have added one Option Set field named Reports<\/strong>. On a field, we can add the Names and IDs of the reports that we want to see on the form.<\/p>\n

We required the Name and ID of the report separately to use within the code for further functionality, so will be separating the Names and IDs with a colon(:), We will check the use of the same later within the next step.<\/p>\n

Note<\/em><\/strong>:- We need to take the Names and IDs of the Reports from the URL of the Report as shown in the below screenshots<\/em><\/p>\n

\"JavaScript<\/p>\n

\"JavaScript<\/p>\n

As we can see the Name of the Report on the URL contains (%20) in between, which is nothing but the space between the two words, We need to replace those \u201c%20\u201d with space before adding it to the field.<\/p>\n

We will be adding the Name and ID of the report we got from the URL on the Reports<\/strong> option set field which will be visible as shown in the below screenshot,<\/p>\n

\"JavaScript<\/p>\n

\u00a0<\/strong>Step\u00a0 2:<\/strong><\/p>\n

We will show the report with the help of a report\u2019s URL so we can add an Iframe on the form and in Javascript code we will overwrite that Iframe source with the Report URL source.\u00a0<\/strong><\/p>\n

\"Maplytics<\/a><\/p>\n

Step\u00a0 3:<\/strong><\/p>\n

We will develop a javascript code to achieve the functionality to show reports on the form.<\/p>\n

We will be adding this javascript library on the change event of the \u201cReports\u201d field so that when we change the value of the Report field will check and show the report as per the selected value within the Iframe.<\/p>\n

var workOrderId = formContext.data.entity.getId(); \/\/ get work order Id\r\n\r\nvar reports = formcontext.getAttribute(\"new_reports\").getValue();\r\n\r\n\u00a0\r\n\r\nreports = reports.split(\":\");\r\n\r\nvar name = reports [0];\r\n\r\nvar reportId = reports [1];\r\n\r\n\/\/ get url of current organization\r\n\r\nvar url =\u00a0 Xrm.Utility.getGlobalContext().getClientUrl() ;\r\n\r\n\u00a0\r\n\r\nreportName = url + \"\/crmreports\/viewer\/viewer.aspx?id=\" + reportId + \"&action=run&context=records&recordstype=10937&records=\"\r\n\r\n+ workOrderId + \"&helpID=\" + name + \".rdl\";\r\n\r\n\u00a0\r\n\r\ntabObj =\u00a0 formContext.ui.tabs.get(\"tab_Report\");\r\n\r\n\u00a0\r\n\r\n\/\/ getting IFrame\r\n\r\nvar getIframe = formContext.ui.controls.get(\"WebResource_showReportOnFSM\");\r\n\r\nvar target = reportName;\r\n\r\n\/\/show report\r\n\r\ngetIframe.setSrc(target);<\/pre>\n
Below is the explanation of the above code,<\/p>\n