HTML Report Setup

Prerequisites

Read the following articles before you set up HTML reports for the first time:
- Expressions
- Report Helpers
To set up HTML reports, you need the following licenses:
- FieldFX Base Package
- FieldFX E-Ticketing
To set up HTML reports, you must:
- Set up the FX E-Ticketing module
To set up HTML reports, you need:
- FX E-Ticketing minimum permissions
- System permissions:
  - Customize Application
  - Manage Profiles and Permission Sets
  - View Setup and Configuration

HTML Reports are deprecated and will not receive any further enhancements.

Instead, use XML reports and the Report Template Editor in the Admin Portal.

Basics

A HTML report is a type of FX Report.

HTML Templates

A HTML template is a file containing HTML markup that controls the design and content of a HTML report.
HTML templates use:
- CSS attributes to define the report’s layout and appearance.
- Expressions and report helpers to define the report’s content.
You can create HTML templates in a text editor.

Setting Up the HTML Reports Feature

Access FieldFX Back Office
Switch to Salesforce Classic
Upload the en_US file:
1. From Setup, enter "static" in the Quick Find box, then select Static Resources
2. Complete one of the following:
  - If the en_US file displays in the list, proceed to step 4.
  - If the en_US file doesn’t display in the list, proceed to step c.
3. Download the en_US file
4. Unzip the file and extract it to your local computer
5. Move back to FieldFX Back Office
6. Click New
7. Complete the following:
  1. In Name, enter "en_US"
  2. In Cache Control, select "Public"
  3. Click Choose File
  4. Select the en_US file you downloaded
8. Click Save
Configure static resources:
1. From Setup, enter "file upload" in the Quick Find box, then select File Upload and Download Security
2. Click Edit
3. For ".html, .acgi, .htm, .htx, .shtm, .shtml", select "Hybrid" in Download Behavior
4. Click Save
Configure Salesforce Files settings:
1. From Setup, enter "general" in the Quick Find box, then select General Settings
2. Click Edit
3. Select Enable Files Sync
4. Deselect Files uploaded to the Attachments related list on records are uploaded as Salesforce Files, not as attachments
5. Click Save

Adding a HTML Report

Create a HTML template for the report:
1. Open a text editor
2. Add a new file
3. Set the <!DOCTYPE>:
  <!DOCTYPE html>
4. Add <html> tags:
  <!DOCTYPE html> <html> </html>
5. Enter CSS attributes to define the report’s layout and appearance
6. Enter expressions and report helpers to define the report’s content
7. Save the template as an .html file
Add a report template for the report:
1. Access FieldFX Back Office
2. Switch to Salesforce Classic
3. Open the Report Templates tab
4. Click New
5. In Report Template Name, enter a name for the report template
6. In SObject, enter the API name of the object for which you are adding the report
  
  Example 1. For a report about Ticket records
  
  Enter FX5__Ticket__c if the report is for the Ticket object.
7. Specify when to use the report:
  1. In Account, select a customer to use the report for that customer
  2. In Office, select an office to use the report for that office
  3. In Segment, select a business segment to use the report for that segment
  4. In SObject Record Type, enter a record type to use the report for that record type
8. In Sequence Number, enter a sequence number to use for the report
  
  Sequence numbers control the order of reports in lists. Refer to the Sequence Number article for more information.
9. Click Save
10. Click Attach File
11. Click Choose File
12. Select the XML template you created in step 1
13. Click Attach File
14. Click Done

Add a Visualforce page for the report:

From Setup, enter "pages" in the Quick Find box, then select Visualforce Pages
Click New
In Label, enter a name that corresponds to the object for which you are adding the report

Example 2. If the report is for Tickets

Enter "Ticket Report" if you are adding a report for the Ticket object.
In Name, enter the report’s name with underscores for spaces

Copy the following code:

<apex:page standardController="ObjectName" extensions="FX5.ReportTemplateExtension">
  <apex:includeScript value="{!$Resource.FX5__jquery1102minjs}"/>
  <style type="text/css">
    div.apexp {
      margin-left:-10px;
    }
    body {
      margin-left:0px !important;
    }
    a {
      text-decoration:none;
    }
  </style>
  <script type="text/javascript">
    $('td.labelCol.empty').remove();
    $('td.dataCol.empty').css('width','50%');
    $('td.labelCol.first').css('vertical-align', 'bottom');
    $('td.dataCol.first').css('vertical-align', 'bottom');
    $('input[type=submit]').appendTo('td.dataCol.empty');
    function jsOpenReport(entityId, templateId, objectTypeId, namespace)
    {
      var pagePath ='apex';
      var ctrl = document.querySelectorAll("[id$='reportPagePath']")[0];
      var customUrl='';
      if(ctrl!=null)
      {
        pagePath = ctrl.innerText;
        if(pagePath && pagePath.toLowerCase()!='apex')
        {
          customUrl='&customUrl=' + pagePath;
        }
      }
      var href = '/' + pagePath + '/' + namespace + 'Reporting?templateId='+ templateId + '&objectId=' + entityId + '&objectType=' + objectTypeId + customUrl;
      window.open(href, '_blank');
      window.top.location=window.top.location;
    }
  </script>
  <div style="display:none;">
    <apex:outputText id="reportPagePath" value="{!PagePath}" />
  </div>
  <apex:dynamicComponent componentValue="{!form}" id="dynamic"/>
</apex:page>

Replace the code on the Visualforce Markup tab by pasting over it with the code you copied
In the first line of the code, replace "ObjectName" with the API name of the object for which you are adding the report
If the report is for Ticket records
```
<apex:page standardController="FX5__Ticket__c" extensions="FX5.ReportTemplateExtension">
```
Click the Version Settings tab
Click -- Select to Add Installed Package -- and select "FieldFX Base Package"
Click Save

Update page layouts:
1. From Setup, enter "object" in the Quick Find box, then select Objects
2. Open the object for which you are adding the report
3. Under Page Layouts, click Edit next to a page layout for FieldFX Back Office
4. On the toolbar, click Visualforce Pages
5. Drag Section from the toolbar to a suitable location on the layout
6. In Section Name, enter "Reports"
7. Under Layout, select 1-Column
8. Click OK
9. Drag the Visualforce page for the report into the Reports section
10. Click Save on the toolbar
11. Repeat steps c to j for other page layouts as needed
Grant permission to use the Visualforce page for the report:
1. From Setup, enter "permission" in the Quick Find box, then select Permission Sets
2. Open a permission set for Visualforce pages
3. Under Apps, click Visualforce Page Access
4. Click Edit
5. Add the Visualforce page for the report to Enabled Visualforce Pages
6. Click Save
7. Repeat steps a to f for other permission sets as needed
Test the report:
1. Open a record
2. Move down to the Reports section
3. Click the button for the report

Sample HTML Report

Ticket Report

Download the HTML template for a sample Ticket report.

HTML Report Setup

Basics

HTML Templates

Setting Up the HTML Reports Feature

Adding a HTML Report

Sample HTML Report

Online Resources

External References