Home
7. Output Options
HTML Preview

HTML Preview

Displays an HTML preview on the record detail page or in a new browser tab.

*This feature is available in Office File Creator Pro.

ofcHtml Component

Place the ofcHtml component on the record detail page to display a preview within the page.

Settings

Open the record detail page of the target object and click Setup > Edit Page. Alternatively, click Setup > Object Manager > target object > Lightning Record Pages.

Select "ofcHtml" under "Custom - Managed" in the left sidebar and drag and drop it to the position where you want it displayed.

 

Select the component you placed, enter the values, and then click the "Save" button.

*If the Lightning page has not been activated, such as when you change a Lightning page for the first time, activate it with the "Activation" button.

 

Property List

Field Contents
Title Component title.

e.g. Invoice
Icon Icon of the component. Enter in the format "Icon Type:Icon Name", all lowercase.

e.g. standard:quotes
Template Template API name for the OFC_Template record. Set a template for HTML.
Height (in pixels) Height of the preview display area. Enter the value in pixels.

Default: 1200
Zoom (%) Zoom level of the preview (%). Enter a value between 30 and 200.

Default: 100
Button Group Spacing between buttons when multiple buttons are placed.

  • Check On: No spacing between buttons.
  • Check Off: There is a space between buttons.
(Preview) Label Label name of the preview button. If left blank, "Preview" is displayed.

e.g. Invoice Preview
(Preview) Style Sets the style of the preview button from the selection list value. If left blank, neutral is applied.

  • base: Blue text (no border)
  • neutral: Blue text and a gray border on a white background
  • brand: White text on a blue background
  • brand-outline: Blue text and blue border on white background
  • destructive: White text on a red background
  • destructive-text: White background with red text and a gray border
  • success: White text on a green background
(Preview) Icon Icon of the preview button. Enter in the format "Icon Type:Icon Name", all lowercase.

e.g. utility:preview
(Print) Label Label name of the print button. If left blank, "Print" is displayed.

e.g. Print Invoice
(Print) Style Sets the style of the print button from the selection list value. If left blank, neutral is applied.

  • base: Blue text (no border)
  • neutral: Blue text and a gray border on a white background
  • brand: White text on a blue background
  • brand-outline: Blue text and blue border on white background
  • destructive: White text on a red background
  • destructive-text: White background with red text and a gray border
  • success: White text on a green background
(Print) Icon Icon of the print button. Enter in the format "Icon Type:Icon Name", all lowercase.

e.g. utility:print

 

Preview and Print

Clicking the "Preview" button displays the preview.

 

Clicking the "Print" button opens your browser's print dialog, which displays the contents of the preview screen. Select "Save as PDF" to download the file as a PDF.

*If nothing is shown in the preview screen, the preview is displayed and the print dialog opens.

 

Custom Button

A custom button displays the preview and the print dialog in a new browser tab.

When creating the custom button, use the link in "Custom Button URL (Preview)" or "Custom Button URL (Print)" of the OFC_Template record as the URL of the custom button. For instructions on creating a custom button, refer to Create Custom Button.

 

Custom Button URL (Preview): Displays the preview in a new browser tab.

Custom Button URL (Print): Displays the preview in a new browser tab, and then displays the print dialog.

 

Lightning Component Button

A Lightning component button displays the preview and the print dialog in a new browser tab.

When creating the Lightning component button, set the "(Button XX) Save" property of the ofcForRecordPage component to "preview" or "print". For instructions on creating a Lightning component button, refer to Create Lightning Component Button.

 

preview: Displays the preview in a new browser tab.

print: Displays the preview in a new browser tab, and then displays the print dialog.

 

Reference

HTML (Create Template File)