HTMLプレビュー

レコード詳細画面、またはブラウザの別タブにHTMLプレビューを表示します。

※本機能はOffice File Creator Proで使用可能です。

ofcHtmlコンポーネント

レコード詳細画面にofcHtmlコンポーネントを配置し、画面内にプレビューを表示します。

設定

対象のオブジェクトのレコード詳細画面を開き、設定>編集ページをクリックします。または、設定>オブジェクトマネージャー>対象オブジェクト>Lightningレコードページをクリックします。

左サイドバーの「カスタム - 管理」内の「ofcHtml」を選択し、表示させたい位置にドラッグ&ドロップします。

 

配置したコンポーネントを選択し、各種値を入力後、「保存」ボタンをクリックします。

※初めてLightningページを変更する場合など、Lightningページを有効化していない場合は、「有効化」ボタンより有効化してください。

 

設定一覧

項目 設定内容
Title コンポーネントのタイトル。

: 請求書

Icon コンポーネントのアイコン。「アイコンタイプ:アイコン名」の形式で、すべて小文字で入力します。

: standard:quotes

Template OFC_TemplateレコードのテンプレートAPI名。HTML用のテンプレートを設定してください。
Height (in pixels) プレビューの表示領域の高さ。ピクセル単位で入力します。

既定値: 1200

Zoom (%) プレビューの表示倍率(%)30200の範囲で入力します。

既定値: 100

Button Group 複数ボタンを配置したときのボタン同士の間隔。

  • チェックオン: ボタンとボタンの間隔なし
  • チェックオフ: ボタンとボタンの間隔あり
(Preview) Label プレビューボタンのラベル名。空欄の場合、「プレビュー」が表示されます。

: 請求書プレビュー

(Preview) Style プレビューボタンのスタイルを選択リスト値より設定します。空欄の場合、neutralが適用されます。

  • base: 青文字(枠線なし)
  • neutral: 白背景に、青文字とグレイの枠線
  • brand: 青背景に、白文字
  • brand-outline: 白背景に、青文字と青の枠線
  • destructive: 赤背景に、白文字
  • destructive-text: 白背景に、赤文字とグレイの枠線
  • success: 緑背景に、白文字
(Preview) Icon プレビューボタンのアイコン。「アイコンタイプ:アイコン名」の形式で、すべて小文字で入力します。

: utility:preview

(Print) Label 印刷ボタンのラベル名。空欄の場合、「印刷」が表示されます。

: 請求書印刷

(Print) Style 印刷ボタンのスタイルを選択リスト値より設定します。空欄の場合、neutralが適用されます。

  • base: 青文字(枠線なし)
  • neutral: 白背景に、青文字とグレイの枠線
  • brand: 青背景に、白文字
  • brand-outline: 白背景に、青文字と青の枠線
  • destructive: 赤背景に、白文字
  • destructive-text: 白背景に、赤文字とグレイの枠線
  • success: 緑背景に、白文字
(Print) Icon 印刷ボタンのアイコン。「アイコンタイプ:アイコン名」の形式で、すべて小文字で入力します。

: utility:print

 

プレビュー・印刷

「プレビュー」ボタンより、プレビューが表示されます。

 

「印刷」ボタンより、ブラウザの印刷ダイアログが表示され、プレビュー画面の内容が表示されます。「PDFに保存」を選択すると、PDFとしてダウンロードが可能です。

※プレビュー画面に何も表示されていない場合、プレビュー+印刷ダイアログが表示されます。

 

カスタムボタン

カスタムボタンより、ブラウザの別タブにプレビューと印刷ダイアログを表示します。

カスタムボタン作成時、カスタムボタンのURLOFC_Templateレコードの「カスタムボタンURL(プレビュー)」または「カスタムボタンURL(印刷)」のリンクを使用します。カスタムボタン作成手順はカスタムボタン作成を参照してください。

 

カスタムボタンURL(プレビュー): ブラウザの別タブにプレビューを表示します。

カスタムボタンURL(印刷): ブラウザの別タブにプレビュー表示後、印刷ダイアログを表示します。

 

Lightningコンポーネントボタン

Lightningコンポーネントボタンより、ブラウザの別タブにプレビューと印刷ダイアログを表示します。

Lightningコンポーネントボタン作成時、ofcForRecordPageコンポーネントの「(Button XX) Save」プロパティを"preview"、または"print"に設定します。Lightningコンポーネントボタン作成手順はLightningコンポーネントボタン作成を参照してください。

 

preview: ブラウザの別タブにプレビューを表示します。

print: ブラウザの別タブにプレビューを表示後、印刷ダイアログを表示します。

 

参考

HTML出力(テンプレートファイル作成)