HTML Report Setup (Deprecated)

This feature has been deprecated, will receive no further updates, and no longer supported. Instead, use XML reports and the Report Template Editor in the Admin Portal.

Prerequisites

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

  1. Access FieldFX Back Office

  2. Switch to Salesforce Classic

  3. 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

  4. 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

  5. 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

  1. 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

  2. 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

  3. Add a Visualforce page for the report:

    1. From Setup, enter "pages" in the Quick Find box, then select Visualforce Pages

    2. Click New

    3. 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.

    4. In Name, enter the report’s name with underscores for spaces

    5. 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>
    6. Replace the code on the Visualforce Markup tab by pasting over it with the code you copied

    7. 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">
    8. Click the Version Settings tab

    9. Click -- Select to Add Installed Package -- and select "FieldFX Base Package"

    10. Click Save

  4. 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

  5. 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

  6. 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.

Online Resources

External References